Page MenuHomePhabricator

Add toggle/state buttons to WikiEditor
Closed, ResolvedPublic

Description

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

Details

Related Gerrit Patches:
mediawiki/extensions/CodeMirror : masterMake use of new WikiEditor 2010 toggle tool
mediawiki/extensions/CodeEditor : masterMake use of new WikiEditor 2010 toggle tool
mediawiki/extensions/WikiEditor : masterToolbar: Add a new 'toggle' tool type; declare as v0.5.2

Event Timeline

TheDJ created this task.Jul 4 2018, 8:02 AM
Restricted Application added a project: Community-Tech. · View Herald TranscriptJul 4 2018, 8:02 AM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript

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

Trizek-WMF added a subscriber: Trizek-WMF.

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

"Make toolbar toggle buttons more accessible"?

"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

Jdforrester-WMF closed this task as Resolved.Aug 21 2018, 6:54 PM
Jdforrester-WMF assigned this task to TheDJ.
Jdforrester-WMF removed a project: Patch-For-Review.

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

TheDJ moved this task from Backlog to Closed on the WikiEditor board.Nov 27 2018, 1:47 PM