Change:
Looking forward for reporting a security issue: Please report security issues by sending an email to instead of raising a Github issue. Describe the bug A clear and concise description of what the bug is. The Monaco editor contains features for accessibility, specifically a mode for screen reader users which helps in navigating and using the editor effectively. This feature, as of now, must be enabled at the start of each lesson, even after enabling it once at the beginning of the session. To Reproduce Steps to reproduce the behavior: to any lesson in the curriculum. the code editor, set focus to it. alt+f1 to show accessibility help for the editor, and choose to enable the screen reader mode the lesson, advance to the next, and repeat steps two and three Expected behavior A clear and concise description of what you expected to happen. The screen reader mode should have stayed enabled across lessons. Screenshots If applicable, add screenshots to help explain your problem. Desktop (please complete the following information): OS: [e.g. iOS] Windows Browser [e.g. chrome, safari] Chrome Version [e.g. 22] 69.0.3497.100 (Official Build) (64-bit) Smartphone (please complete the following information): Device: [e.g. iPhone6] OS: [e.g. iOS8.1] Browser [e.g. stock browser, safari] Version [e.g. 22] Additional context Add any other context about the problem here. Tested screen reader: NVDA version 2018.3.2 from
Hey, As a part of hacktoberfest, I would like to work on this issue. Can I expect mentorship on this?
I'm new on this too. But if you need help, I would like to work on this issue too.
Can you reproduce this issue?
A group of us are working on this issue for a class project in university. We aim to address this in the next couple of days. We will try and at least present the community with a first iteration of our proposed solution. Just a heads up. If the current developers have any advice or tips, feel free to contact me. Thank you. is the primary developer in the team, working alongside me.
Any updates on this ?
This looks to be fixed, the editor is focused on load. Can you confirm that this is fixed If so, this can probably be closed.
I don't think it is fixed. It focuses on load by default, but I think that turning on the screen reader mode is separate from just focusing. I don't have a screen reader installed, but if I follow the steps above I keep having to re-enable that mode each time I go to a new challenge.
Sorry, I don’t think the editor should be focused on load, as that means the screen reader user most unfocus it, move back to the heading to read the challenge, then focus it again to write code. Also, I still have to enable accessibility mode on each challenge.
I see now. And I can say that the built in screen reader on osx doesn't do anything with the editor. Is this something we can control? Or is it just part of the monaco editor and we are at their mercy?
VoiceOver on MacOS is… not the best, sadly, when it comes to web apps. If possible, you can send technical info about this to <mailto: is Microsoft’s editor, which seems to be VSCode stripped down to the editor. Perhaps you could contact Microsoft and see if they could add a way to make accessibility states persistent across loads, if this isn’t possible already.
That is annoying. For now you should be able to focus the description by pressing escape (at the moment, it's still in a state of flux), but I'll see about making screen-reader mode something that persists between challenges.
Seeing as how this issue is beyond our control, should we close this and make a new issue about the editor being focused on load? You can feel free to email apple or microsoft if you want Thanks for the advice though.
no need to close this. I think I can fix it.
Yes, we can close this issue.
Quick update. Both the auto-focusing and the persistence of accessibility mode should be fixable. I think I'm about 90% of the way there, but for some reason it stops letting you toggle the accessibility support after a couple of toggles. This, obviously, isn't ideal, but most of the functionality is there.

Discussion:
import { canFocusEditorSelector, executeChallenge, <ins> inAccessibilityModeSelector, </ins> setEditorFocusability, <ins> setAccessibilityMode, </ins> updateFile } from '../redux'; import { userSelector, isDonationModalOpenSelector } from '../../../redux';

executeChallenge: PropTypes.func.isRequired, ext: PropTypes.string, fileKey: PropTypes.string, <ins> inAccessibilityMode: PropTypes.bool.isRequired, setAccessibilityMode: PropTypes.func.isRequired, </ins> setEditorFocusability: PropTypes.func, theme: PropTypes.string, updateFile: PropTypes.func.isRequired

const mapStateToProps = createSelector( canFocusEditorSelector, <ins> inAccessibilityModeSelector, </ins> isDonationModalOpenSelector, userSelector, <del> (canFocus, open, { theme = 'default' }) => ({ </del> <ins> (canFocus, accessibilityMode, open, { theme = 'default' }) => ({ </ins> canFocus: open ? false : canFocus, <ins> inAccessibilityMode: accessibilityMode, </ins> theme }) ); const mapDispatchToProps = { setEditorFocusability, <ins> setAccessibilityMode, </ins> executeChallenge, updateFile };

editorDidMount = (editor, monaco) => { this._editor = editor; <del> if (this.props.canFocus) { </del> <ins> this._editor.updateOptions({ accessibilitySupport: this.props.inAccessibilityMode ? 'on' : 'auto' }); // Users who are using screen readers should not have to move focus from // the editor to the description every time they open a challenge. if (this.props.canFocus && !this.props.inAccessibilityMode) { </ins> this._editor.focus(); } else this.focusOnHotkeys(); this._editor.addAction({

this.props.setEditorFocusability(false); } }); <ins> this._editor.addAction({ id: 'toggle-accessibility', label: 'Toggle Accessibility Mode', keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.F1], run: () => { const currentAccessibility = this.props.inAccessibilityMode; // The store needs to be updated first, as onDidChangeConfiguration is // called before updateOptions returns this.props.setAccessibilityMode(!currentAccessibility); this._editor.updateOptions({ accessibilitySupport: currentAccessibility ? 'auto' : 'on' }); } }); </ins> this._editor.onDidFocusEditorWidget(() => this.props.setEditorFocusability(true) ); <ins> // This is to persist changes caused by the accessibility tooltip. // Unfortunately it relies on Monaco's implementation details this._editor.onDidChangeConfiguration(() => { if ( this._editor.getConfiguration().accessibilitySupport === 2 && !this.props.inAccessibilityMode ) { this.props.setAccessibilityMode(true); } }); </ins> }; focusOnHotkeys() {

}, challengeTests: [], consoleOut: '', <ins> inAccessibilityMode: false, </ins> isCodeLocked: false, isBuildEnabled: true, modal: {

'moveToTab', <del> 'setEditorFocusability' </del> <ins> 'setEditorFocusability', 'setAccessibilityMode' </ins> ], ns );

export const moveToTab = createAction(types.moveToTab); export const setEditorFocusability = createAction(types.setEditorFocusability); <ins> export const setAccessibilityMode = createAction(types.setAccessibilityMode); </ins> export const currentTabSelector = state => state[ns].currentTab; export const challengeFilesSelector = state => state[ns].challengeFiles;

}; export const canFocusEditorSelector = state => state[ns].canFocusEditor; <ins> export const inAccessibilityModeSelector = state => state[ns].inAccessibilityMode; </ins> const MAX_LOGS_SIZE = 64 * 1024;

[types.setEditorFocusability]: (state, { payload }) => ({ ...state, canFocusEditor: payload <ins> }), [types.setAccessibilityMode]: (state, { payload }) => ({ ...state, inAccessibilityMode: payload </ins> }) }, initialState