gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat(client): JAWS 2022 bugfix for monaco editor (#44784)

Browse Source 
* feat: JAWS 2021 bugfix for monaco editor

* update menu label and toggle announcement

* Update client/src/templates/Challenges/classic/editor.tsx

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

* Update client/src/templates/Challenges/classic/editor.tsx

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

* Update client/src/templates/Challenges/classic/editor.tsx

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

* clarify visibility hack for live region

* Update client/src/templates/Challenges/classic/editor.tsx

Co-authored-by: Shaun Hamilton <shauhami020@gmail.com>

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
Co-authored-by: Shaun Hamilton <shauhami020@gmail.com>
This commit is contained in:
Bruce B
2022-01-24 09:45:01 -08:00
committed by GitHub
parent e61668833a
commit 76529a17ba
1 changed files with 56 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
client/src/templates/Challenges/classic/editor.tsx
View File

@ -409,7 +409,63 @@ const Editor = (props: EditorProps): JSX.Element => {
});
}
});
// Introduced as a work around for a bug in JAWS 2022
// https://github.com/FreedomScientific/VFO-standards-support/issues/598
editor.addAction({
id: 'toggle-aria-roledescription',
label: 'Toggle aria-roledescription',
keybindings: [
monaco.KeyMod.CtrlCmd | monaco.KeyMod.Alt | monaco.KeyCode.KEY_J
],
run: toggleAriaRoledescription
});
editor.onDidFocusEditorWidget(() => props.setEditorFocusability(true));
// aria-roledescription is on (true) by default, check if it needs
// to be removed.
if (!getStoredAriaRoledescription()) {
setAriaRoledescription(false);
}
};
const toggleAriaRoledescription = () => {
const newRoledescription = !getStoredAriaRoledescription();
setAriaRoledescription(newRoledescription);
ariaAlert(
`aria-roledescription has been turned ${
newRoledescription ? 'on' : 'off'
}`
);
};
const setAriaRoledescription = (value: boolean) => {
const textareas = document.querySelectorAll('.monaco-editor textarea');
textareas.forEach(textarea => {
value
? textarea.setAttribute('aria-roledescription', 'editor')
: textarea.removeAttribute('aria-roledescription');
});
store.set('ariaRoledescription', value);
};
const getStoredAriaRoledescription = () =>
!!(store.get('ariaRoledescription') ?? true);
// Borrowed from
// freeCodeCamp/node_modules/monaco-editor/esm/vs/base/browser/ui/aria/aria.js
// Uses the aria live region provided by monaco.
const ariaAlert = (message: string) => {
const ariaLive: NodeListOf<HTMLDivElement> =
document.querySelectorAll('.monaco-alert');
if (ariaLive.length > 0) {
const liveText = ariaLive[0];
liveText.textContent = message;
// Hack used by monaco to force older browsers to announce the update to
// the live region.
// See https://www.tpgi.com/html5-accessibility-chops-aria-rolealert-browser-support/
liveText.style.visibility = 'hidden';
liveText.style.visibility = 'visible';
}
};
const descriptionZoneCallback = (