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>1 to <1>9" 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>Shift + <1>c" 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>Ctrl + <1>Enter or <2>⌘ + <3>Enter" 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>Shift + <1>r" 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>l or <1>f" 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>Shift + <1>b" 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>Shift + <1>Alt + <2>k" 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) {