tarrien/Mastodon
1
0 Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Accessibility] Add hotkeys PageUp and PageDown for list navigation (#39252)

Browse Source
This commit is contained in:
diondiondion authored and GitHub committed 2026-06-03 13:26:43 +00:00
1 parent 65622a52e1
commit ce3fdf73f3
5 files changed
+39 -21
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/javascript/mastodon/features/keyboard_shortcuts/index.jsx
+7 -7
View File
@@ -68,7 +68,7 @@ class KeyboardShortcuts extends ImmutablePureComponent {
<td><FormattedMessage id='keyboard_shortcuts.quote' defaultMessage='Quote post' /></td>
</tr>
<tr>
<td><kbd>enter</kbd>, <kbd>o</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.keys.enter' defaultMessage='Enter' tagName='kbd' />, <kbd>o</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.enter' defaultMessage='to open status' /></td>
</tr>
<tr>
@@ -88,11 +88,11 @@ class KeyboardShortcuts extends ImmutablePureComponent {
<td><FormattedMessage id='keyboard_shortcuts.toggle_sensitivity' defaultMessage='to show/hide media' /></td>
</tr>
<tr>
<td><kbd>k</kbd></td>
<td><kbd>k</kbd>, <FormattedMessage id='keyboard_shortcuts.keys.page_up' defaultMessage='Page Up' tagName='kbd' /></td>
<td><FormattedMessage id='keyboard_shortcuts.up' defaultMessage='to move up in the list' /></td>
</tr>
<tr>
<td><kbd>j</kbd></td>
<td><kbd>j</kbd>, <FormattedMessage id='keyboard_shortcuts.keys.page_down' defaultMessage='Page Down' tagName='kbd' /></td>
<td><FormattedMessage id='keyboard_shortcuts.down' defaultMessage='to move down in the list' /></td>
</tr>
<tr>
@@ -112,15 +112,15 @@ class KeyboardShortcuts extends ImmutablePureComponent {
<td><FormattedMessage id='keyboard_shortcuts.compose' defaultMessage='to focus the compose textarea' /></td>
</tr>
<tr>
<td><kbd>alt</kbd>+<kbd>n</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.keys.alt' defaultMessage='Alt' tagName='kbd' />+<kbd>n</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.toot' defaultMessage='to start a brand new post' /></td>
</tr>
<tr>
<td><kbd>alt</kbd>+<kbd>x</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.keys.alt' defaultMessage='Alt' tagName='kbd' />+<kbd>x</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.spoilers' defaultMessage='to show/hide CW field' /></td>
</tr>
<tr>
<td><kbd>backspace</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.keys.backspace' defaultMessage='Backspace' tagName='kbd' /></td>
<td><FormattedMessage id='keyboard_shortcuts.back' defaultMessage='to navigate back' /></td>
</tr>
<tr>
@@ -128,7 +128,7 @@ class KeyboardShortcuts extends ImmutablePureComponent {
<td><FormattedMessage id='keyboard_shortcuts.search' defaultMessage='to focus search' /></td>
</tr>
<tr>
<td><kbd>esc</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.keys.esc' defaultMessage='Esc' tagName='kbd' /></td>
<td><FormattedMessage id='keyboard_shortcuts.unfocus' defaultMessage='to un-focus compose textarea/search' /></td>
</tr>
<tr>
app/javascript/mastodon/features/ui/index.jsx
+4 -2
View File
@@ -508,7 +508,8 @@ class UI extends PureComponent {
if (currentItemIndex === -1) {
focusColumn(1);
} else {
focusItemSibling(currentItemIndex, -1);
const wasHandled = focusItemSibling(currentItemIndex, -1);
return wasHandled;
}
};
@@ -517,7 +518,8 @@ class UI extends PureComponent {
if (currentItemIndex === -1) {
focusColumn(1);
} else {
focusItemSibling(currentItemIndex, 1);
const wasHandled = focusItemSibling(currentItemIndex, 1);
return wasHandled;
}
};
app/javascript/mastodon/features/ui/util/focusUtils.ts
+5 -3
View File
@@ -159,13 +159,12 @@ export function focusItemSibling(index: number, direction: 1 | -1) {
);
if (!siblingItem) {
return;
return false;
}
// If sibling element is empty, we skip it
if (siblingItem.matches(':empty')) {
focusItemSibling(index + direction, direction);
return;
return focusItemSibling(index + direction, direction);
}
// Check if the sibling is a post or a 'follow suggestions' widget
@@ -184,5 +183,8 @@ export function focusItemSibling(index: number, direction: 1 | -1) {
});
targetElement.focus();
return true;
} else {
return false;
}
}