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.

@TheDJ, this ticket is not very clear. Can you explain a bit more?

@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.

Thanks for the detailed explanation, @TheDJ! That makes sense.

Change 447734 had a related patch set uploaded (by TheDJ; owner: TheDJ):
[mediawiki/extensions/WikiEditor@master] Toolbar: Add a new 'toggle' tool type

https://gerrit.wikimedia.org/r/447734

Change 447735 had a related patch set uploaded (by TheDJ; owner: TheDJ):
[mediawiki/extensions/CodeMirror@master] Make use of new WikiEditor 2010 toggle tool

https://gerrit.wikimedia.org/r/447735

Change 447737 had a related patch set uploaded (by TheDJ; owner: TheDJ):
[mediawiki/extensions/CodeEditor@master] Make use of new WikiEditor 2010 toggle tool

https://gerrit.wikimedia.org/r/447737

How that task can be explained in one simple sentence? When will it be deployed?

"Make toolbar toggle buttons more accessible"?

In T198781#4453304, @Esanders wrote:

"Make toolbar toggle buttons more accessible"?

Thanks.
While it is for WikiEditor, I don't think that's under Tech News scope.

Change 447734 merged by jenkins-bot:
[mediawiki/extensions/WikiEditor@master] Toolbar: Add a new 'toggle' tool type; declare as v0.5.2

https://gerrit.wikimedia.org/r/447734

Change 447737 merged by jenkins-bot:
[mediawiki/extensions/CodeEditor@master] Make use of new WikiEditor 2010 toggle tool

https://gerrit.wikimedia.org/r/447737

Change 447735 merged by jenkins-bot:
[mediawiki/extensions/CodeMirror@master] Make use of new WikiEditor 2010 toggle tool

https://gerrit.wikimedia.org/r/447735