Descriptive aria-labels for Keyboard shortcuts which include punctuation previously ignored by screen readers #666
Conversation
e218736
changed the title
There was a problem hiding this comment.
Thank you for working on this!
Did you consider using aria-keyshortcuts instead?
| const keyToText: { [key: string]: string } = { | ||
| ']': 'Closing bracket', | ||
| '[': 'Opening bracket', | ||
| ',': 'Comma', | ||
| '.': 'Full stop', | ||
| "'": 'Single quote', | ||
| '-': 'Hyphen-minus' | ||
| }; |
There was a problem hiding this comment.
I think that we would want to make it easy to override in subclasses of the renderer so that they could reuse the logic below, but change the values on the right-hand side. In particular, JupyterLab will want to substituted the values with translated versions.
One solution would be making keyToText an option that can be passed to the renderer constructor, something like:
constructor(options: IRenderer.IOptions = {}) {
this._keyToText = options.keyToText ?? DEFAULT_KEY_TO_TEXT;
}But please read the next comment which tackles the deeper question on where the logic should be placed before implementing the suggestion above.
There was a problem hiding this comment.
@krassowski I had tried to use aria-keyshortcuts in place of aria-label however, my screen reader (Windows Narrator) still omits some punctuation. With aria-label it is read out as expected.
I have implemented your other suggestions which should now allow translations to be substituted in JupyterLab
packages/widgets/src/menu.ts
Outdated
| const keyToText: { [key: string]: string } = { | ||
| ']': 'Closing bracket', | ||
| '[': 'Opening bracket', | ||
| ',': 'Comma', | ||
| '.': 'Full stop', | ||
| "'": 'Single quote', | ||
| '-': 'Hyphen-minus' | ||
| }; | ||
|
|
||
| let kbText = data.item.keyBinding; | ||
| let result = kbText ? CommandRegistry.formatKeystroke(kbText.keys) : null; | ||
|
|
||
| let punctuationRegex = /\p{P}/u; | ||
| let punctuations = result?.match(punctuationRegex); | ||
| if (!punctuations) { | ||
| return []; | ||
| } | ||
| for (const punctuation of punctuations) { | ||
| if (result != null && Object.keys(keyToText).includes(punctuation)) { | ||
| const individualKeys = result.split('+'); | ||
| let index = individualKeys.indexOf(punctuation); | ||
| if (index != -1) { | ||
| individualKeys[index] = keyToText[punctuation]; | ||
| } | ||
| const textShortcut = individualKeys.join('+'); | ||
| return textShortcut; | ||
| } | ||
| } | ||
| return kbText ? CommandRegistry.formatKeystroke(kbText.keys) : null; |
There was a problem hiding this comment.
All right, this makes it pretty clear that we need to have this implemented at CommandRegistry level (see earlier suggestion on creating CommandRegistry.formatKeystrokeAriaLabel)
There was a problem hiding this comment.
Hi @krassowski,
All makes sense, thank you for your comments. I will revert back to draft for now whist I work on these and let you know once ready for review again.
krassowski
added
enhancement
References
Issue 15497 - Screen reader doesn't read all keyboard shortcut punctuation
When using screen reader (Windows Narrator) and navigating through the top menubar/command palette some punctuation is not announced. Keyboard shortcuts being read out incorrectly may be confusing/misleading for users of assistive technologies. This PR ensures that aria labels include descriptive text for punctuation used within default keyboard shortcuts so that the screen reader will announce correctly.
Code changes
User-facing changes
none visible.
For screen reader users, keyboard shortcuts that include punctuation will be announced by default when focused.