Codemirror and CodeEditor both currently provide buttons to toggle state in the editor. These buttons use setActive to change the style, but don't actually reflect this state in the HTML dom, meaning there is no state provided to screenreaders.
CodeMirror has a kludge around this, see also T197534
A better solution seems wise
Since it is not a traditional ticbox where users place or remove a ticmark but some new experience the behaviour is not really intuitive. It is hard to guess for users, e.g. when textarea is empty and no effect is immediately visible, and difficult for people with limited visual capabilities but no screnreader. It requires high skills anyway to connect the colour change with later effects.
For all user groups two separate tooltips telling the next effect are common and best help available.
In the future a change in ARIA end of last year may be recognized by screenreaders, but apparently not today.
@Niharika WikiEditor has a toolbar, this toolbar can have several widgets, there is a single 'button' widget. Then people added ooui buttons to WikiEditor, using the oouiIcon attribute to automatically generate an OO.ui.ButtonWidget. I think this was even done for CodeMirror specifically, but i don't remember.
But several extensions (incl. CodeMirror, CodeEditor, but also some user scripts) have required a toggle button instead (OO.ui.ToggleButtonWidget) the point of a toggle button is to reflect state. On or Off. The extensions do this by calling wikiEditor to apply setActive of the 'widget' which basically sets a class. That is a purely visual effect and therefore not accessible, making it a bad implementation. It is WHY there is a separate ToggleButtonWidget.
CodeMirror has a workaround for this accessibility problem, which was to apply some decorator aria attributes manually to the ButtonWidget to reflect to screenreaders that this should actually have been a ToggleButtonWidget instead of a ButtonWidget.
It can be properly solved by adding a new attribute to the WikiEditor addToToolbar which denoted the type of button to use. So instead of:
$( '#wpTextbox1' ).wikiEditor(
'addToToolbar',
{
section: 'main',
groups: {
codemirror: {
tools: {
CodeMirror: {
label: mw.msg( 'codemirror-toggle-label' ),
type: 'button',
oouiIcon: 'highlight',
action: {
type: 'callback',
execute: function () {
switchCodeMirror();
}
}
}
}
}
}
}
);We should introduce a type:toggle so we can generate a OO.ui.ToggleButtonWidget, which would automatically flip the right aria attributes.
That would fix the need to do this during init:
$codeMirrorButton = $( '#wpTextbox1' ).data( 'wikiEditor-context' ).modules.toolbar.$toolbar.find( '.tool[rel=CodeMirror]' ); $codeMirrorButton .attr( 'id', 'mw-editbutton-codemirror' ) // Set a role on the ButtonWidget, since it's a ButtonWidget instead of a ToggleButtonWidget .find( 'a' ).attr( 'role', 'switch' );
and during update this
$button.find( 'a' ).attr( 'aria-checked', !!useCodeMirror );
and would also properly fix CodeEditor and any other extension that want's to use a toggle button.
Change 447734 had a related patch set uploaded (by TheDJ; owner: TheDJ):
[mediawiki/extensions/WikiEditor@master] Toolbar: Add a new 'toggle' tool type
Change 447735 had a related patch set uploaded (by TheDJ; owner: TheDJ):
[mediawiki/extensions/CodeMirror@master] Make use of new WikiEditor 2010 toggle tool
Change 447737 had a related patch set uploaded (by TheDJ; owner: TheDJ):
[mediawiki/extensions/CodeEditor@master] Make use of new WikiEditor 2010 toggle tool
Change 447734 merged by jenkins-bot:
[mediawiki/extensions/WikiEditor@master] Toolbar: Add a new 'toggle' tool type; declare as v0.5.2
Change 447737 merged by jenkins-bot:
[mediawiki/extensions/CodeEditor@master] Make use of new WikiEditor 2010 toggle tool
Change 447735 merged by jenkins-bot:
[mediawiki/extensions/CodeMirror@master] Make use of new WikiEditor 2010 toggle tool