diff --git a/src/components/columns.jsx b/src/components/columns.jsx
index 1f1a7a83..dadc9660 100644
--- a/src/components/columns.jsx
+++ b/src/components/columns.jsx
@@ -12,9 +12,16 @@ import Notifications from '../pages/notifications';
import Public from '../pages/public';
import Search from '../pages/search';
import Trending from '../pages/trending';
+import isRTL from '../utils/is-rtl';
import states from '../utils/states';
import useTitle from '../utils/useTitle';
+const scrollIntoViewOptions = {
+ block: 'nearest',
+ inline: 'nearest',
+ behavior: 'smooth',
+};
+
function Columns() {
useTitle(t`Home`, '/');
const snapStates = useSnapshot(states);
@@ -50,12 +57,42 @@ function Columns() {
useHotkeys(['1', '2', '3', '4', '5', '6', '7', '8', '9'], (e, handler) => {
try {
const index = parseInt(handler.keys[0], 10) - 1;
- document.querySelectorAll('#columns > *')[index].focus();
+ const $column = document.querySelectorAll('#columns > *')[index];
+ if ($column) {
+ $column.focus();
+ $column.scrollIntoView(scrollIntoViewOptions);
+ }
} catch (e) {
console.error(e);
}
});
+ useHotkeys(['[', ']'], (e, handler) => {
+ const key = handler.keys[0];
+ const currentFocusedColumn = document.activeElement.closest('#columns > *');
+
+ const rtl = isRTL();
+ const prevColKey = rtl ? ']' : '[';
+ const nextColKey = rtl ? '[' : ']';
+ let $column;
+
+ if (key === prevColKey) {
+ // If [, focus on left of focused column, else first column
+ $column = currentFocusedColumn
+ ? currentFocusedColumn.previousElementSibling
+ : document.querySelectorAll('#columns > *')[0];
+ } else if (key === nextColKey) {
+ // If ], focus on right of focused column, else 2nd column
+ $column = currentFocusedColumn
+ ? currentFocusedColumn.nextElementSibling
+ : document.querySelectorAll('#columns > *')[1];
+ }
+ if ($column) {
+ $column.focus();
+ $column.scrollIntoView(scrollIntoViewOptions);
+ }
+ });
+
return (
),
},
+ {
+ action: t`Focus next column in multi-column mode`,
+ keys: ],
+ },
+ {
+ action: t`Focus previous column in multi-column mode`,
+ keys: [,
+ },
{
action: t`Compose new post`,
keys: c,
diff --git a/src/locales/en.po b/src/locales/en.po
index a9fb7070..b4e59e06 100644
--- a/src/locales/en.po
+++ b/src/locales/en.po
@@ -98,8 +98,8 @@ msgstr "Following"
#: src/components/account-info.jsx:419
#: src/components/account-info.jsx:776
#: src/pages/account-statuses.jsx:484
-#: src/pages/search.jsx:237
-#: src/pages/search.jsx:384
+#: src/pages/search.jsx:312
+#: src/pages/search.jsx:459
msgid "Posts"
msgstr ""
@@ -524,7 +524,7 @@ msgstr ""
msgid "Cloak mode enabled"
msgstr ""
-#: src/components/columns.jsx:19
+#: src/components/columns.jsx:26
#: src/components/nav-menu.jsx:184
#: src/components/shortcuts-settings.jsx:139
#: src/components/timeline.jsx:437
@@ -674,7 +674,7 @@ msgid "Add custom emoji"
msgstr ""
#: src/components/compose.jsx:1504
-#: src/components/keyboard-shortcuts-help.jsx:143
+#: src/components/keyboard-shortcuts-help.jsx:151
#: src/components/status.jsx:913
#: src/components/status.jsx:1701
#: src/components/status.jsx:1702
@@ -957,8 +957,8 @@ msgstr ""
#: src/components/generic-accounts.jsx:145
#: src/components/notification.jsx:438
#: src/pages/accounts.jsx:41
-#: src/pages/search.jsx:227
-#: src/pages/search.jsx:260
+#: src/pages/search.jsx:302
+#: src/pages/search.jsx:335
msgid "Accounts"
msgstr ""
@@ -966,14 +966,14 @@ msgstr ""
#: src/components/timeline.jsx:519
#: src/pages/list.jsx:293
#: src/pages/notifications.jsx:848
-#: src/pages/search.jsx:454
+#: src/pages/search.jsx:529
#: src/pages/status.jsx:1327
msgid "Show more…"
msgstr ""
#: src/components/generic-accounts.jsx:210
#: src/components/timeline.jsx:524
-#: src/pages/search.jsx:459
+#: src/pages/search.jsx:534
msgid "The end."
msgstr ""
@@ -1047,52 +1047,60 @@ msgid "<0>10> to <1>91>"
msgstr ""
#: src/components/keyboard-shortcuts-help.jsx:117
+msgid "Focus next column in multi-column mode"
+msgstr "Focus next column in multi-column mode"
+
+#: src/components/keyboard-shortcuts-help.jsx:121
+msgid "Focus previous column in multi-column mode"
+msgstr "Focus previous column in multi-column mode"
+
+#: src/components/keyboard-shortcuts-help.jsx:125
msgid "Compose new post"
msgstr ""
-#: src/components/keyboard-shortcuts-help.jsx:121
+#: src/components/keyboard-shortcuts-help.jsx:129
msgid "Compose new post (new window)"
msgstr ""
-#: src/components/keyboard-shortcuts-help.jsx:124
+#: src/components/keyboard-shortcuts-help.jsx:132
msgid "<0>Shift0> + <1>c1>"
msgstr ""
-#: src/components/keyboard-shortcuts-help.jsx:130
+#: src/components/keyboard-shortcuts-help.jsx:138
msgid "Send post"
msgstr ""
-#: src/components/keyboard-shortcuts-help.jsx:132
+#: src/components/keyboard-shortcuts-help.jsx:140
msgid "<0>Ctrl0> + <1>Enter1> or <2>⌘2> + <3>Enter3>"
msgstr ""
-#: src/components/keyboard-shortcuts-help.jsx:139
+#: src/components/keyboard-shortcuts-help.jsx:147
#: src/components/nav-menu.jsx:374
#: src/components/search-form.jsx:72
#: src/components/shortcuts-settings.jsx:52
#: src/components/shortcuts-settings.jsx:179
-#: src/pages/search.jsx:39
-#: src/pages/search.jsx:209
+#: src/pages/search.jsx:45
+#: src/pages/search.jsx:284
msgid "Search"
msgstr ""
-#: src/components/keyboard-shortcuts-help.jsx:147
+#: src/components/keyboard-shortcuts-help.jsx:155
msgid "Reply (new window)"
msgstr ""
-#: src/components/keyboard-shortcuts-help.jsx:150
+#: src/components/keyboard-shortcuts-help.jsx:158
msgid "<0>Shift0> + <1>r1>"
msgstr ""
-#: src/components/keyboard-shortcuts-help.jsx:156
+#: src/components/keyboard-shortcuts-help.jsx:164
msgid "Like (favourite)"
msgstr ""
-#: src/components/keyboard-shortcuts-help.jsx:158
+#: src/components/keyboard-shortcuts-help.jsx:166
msgid "<0>l0> or <1>f1>"
msgstr ""
-#: src/components/keyboard-shortcuts-help.jsx:164
+#: src/components/keyboard-shortcuts-help.jsx:172
#: src/components/status.jsx:921
#: src/components/status.jsx:2396
#: src/components/status.jsx:2428
@@ -1100,22 +1108,22 @@ msgstr ""
msgid "Boost"
msgstr ""
-#: src/components/keyboard-shortcuts-help.jsx:166
+#: src/components/keyboard-shortcuts-help.jsx:174
msgid "<0>Shift0> + <1>b1>"
msgstr ""
-#: src/components/keyboard-shortcuts-help.jsx:172
+#: src/components/keyboard-shortcuts-help.jsx:180
#: src/components/status.jsx:1006
#: src/components/status.jsx:2453
#: src/components/status.jsx:2454
msgid "Bookmark"
msgstr ""
-#: src/components/keyboard-shortcuts-help.jsx:176
+#: src/components/keyboard-shortcuts-help.jsx:184
msgid "Toggle Cloak mode"
msgstr ""
-#: src/components/keyboard-shortcuts-help.jsx:178
+#: src/components/keyboard-shortcuts-help.jsx:186
msgid "<0>Shift0> + <1>Alt1> + <2>k2>"
msgstr ""
@@ -1298,7 +1306,7 @@ msgid "Lists"
msgstr ""
#: src/components/nav-menu.jsx:249
-#: src/components/shortcuts.jsx:209
+#: src/components/shortcuts.jsx:215
#: src/pages/list.jsx:133
msgid "All Lists"
msgstr ""
@@ -1780,7 +1788,7 @@ msgid "Media only"
msgstr ""
#: src/components/shortcuts-settings.jsx:235
-#: src/components/shortcuts.jsx:186
+#: src/components/shortcuts.jsx:192
msgid "Shortcuts"
msgstr ""
@@ -2690,7 +2698,7 @@ msgstr ""
#: src/pages/catchup.jsx:1316
#: src/pages/mentions.jsx:147
-#: src/pages/search.jsx:222
+#: src/pages/search.jsx:297
msgid "All"
msgstr ""
@@ -3273,58 +3281,58 @@ msgstr ""
msgid "Switch to Local"
msgstr ""
-#: src/pages/search.jsx:43
+#: src/pages/search.jsx:49
msgid "Search: {q} (Posts)"
msgstr ""
-#: src/pages/search.jsx:46
+#: src/pages/search.jsx:52
msgid "Search: {q} (Accounts)"
msgstr ""
-#: src/pages/search.jsx:49
+#: src/pages/search.jsx:55
msgid "Search: {q} (Hashtags)"
msgstr ""
-#: src/pages/search.jsx:52
+#: src/pages/search.jsx:58
msgid "Search: {q}"
msgstr ""
-#: src/pages/search.jsx:232
-#: src/pages/search.jsx:314
+#: src/pages/search.jsx:307
+#: src/pages/search.jsx:389
msgid "Hashtags"
msgstr ""
-#: src/pages/search.jsx:264
-#: src/pages/search.jsx:318
-#: src/pages/search.jsx:388
+#: src/pages/search.jsx:339
+#: src/pages/search.jsx:393
+#: src/pages/search.jsx:463
msgid "See more"
msgstr ""
-#: src/pages/search.jsx:290
+#: src/pages/search.jsx:365
msgid "See more accounts"
msgstr ""
-#: src/pages/search.jsx:304
+#: src/pages/search.jsx:379
msgid "No accounts found."
msgstr ""
-#: src/pages/search.jsx:360
+#: src/pages/search.jsx:435
msgid "See more hashtags"
msgstr ""
-#: src/pages/search.jsx:374
+#: src/pages/search.jsx:449
msgid "No hashtags found."
msgstr ""
-#: src/pages/search.jsx:418
+#: src/pages/search.jsx:493
msgid "See more posts"
msgstr ""
-#: src/pages/search.jsx:432
+#: src/pages/search.jsx:507
msgid "No posts found."
msgstr ""
-#: src/pages/search.jsx:476
+#: src/pages/search.jsx:551
msgid "Enter your search term or paste a URL above to get started."
msgstr ""
diff --git a/src/utils/focus-deck.js b/src/utils/focus-deck.js
index 16a8fded..c4975caa 100644
--- a/src/utils/focus-deck.js
+++ b/src/utils/focus-deck.js
@@ -3,7 +3,7 @@ const focusDeck = () => {
const columns = document.getElementById('columns');
if (columns) {
// Focus first column
- // columns.querySelector('.deck-container')?.focus?.();
+ columns.querySelector('.deck-container')?.focus?.();
} else {
const modals = document.querySelectorAll('#modal-container > *');
if (modals?.length) {