What is the problem?
The inline toggle is not labelled in a way that assistive technologies can identify it.
This seems to have happened after T341955. Previously, (commit 070f32371e4ce1c6f6276446c04f6736054b56e7) it used aria-labelledby (see the HTML below).
For example, when you focus the toggle, the Orca screen reader will just say "Push button".
Previously, it had said "Inline push button".
I am not sure what the best solution for this particular control is from an accessibility perspective. Our previous solution might not have been ideal because it used aria-labelledby in a <div> element, which is not recommended.
For more solutions, see https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=332%2C111#non-text-content
Steps to reproduce problem
- https://en.wikipedia.beta.wmflabs.org/w/index.php?title=Conflict-title-0.9339533637109694-I%C3%B1t%C3%ABrn%C3%A2ti%C3%B4n%C3%A0liz%C3%A6ti%C3%B8n&diff=453540&oldid=453539&diffmode=source
- Turn on your screen reader (e.g. VoiceOver, NVDA or Orca)
- Press tab until the inline toggle is in focus
Expected behavior: The screen reader will give some indication that this toggle is for the inline diff display functionality
Observed behavior: The screen reader just tells you this is a button or checkbox, but no indication what it is for
Environment
Wiki(s): https://en.wikipedia.beta.wmflabs.org MediaWiki 1.41.0-alpha (ceedcc8) 06:06, 12 September 2023.
HTML
Previously, the HTML of the inline toggle button was:
<div class="mw-diff-inline-toggle-layout oo-ui-layout oo-ui-labelElement oo-ui-fieldLayout oo-ui-fieldLayout-align-left">
<div class="oo-ui-fieldLayout-body">
<span class="oo-ui-fieldLayout-header">
<label class="oo-ui-labelElement-label" id="ooui-2">Inline
</label>
</span>
<div class="oo-ui-fieldLayout-field">
<div class="oo-ui-widget oo-ui-widget-enabled oo-ui-toggleWidget oo-ui-toggleWidget-off oo-ui-toggleSwitchWidget" aria-checked="false" tabindex="0" role="switch" aria-labelledby="ooui-2">
<span class="oo-ui-toggleSwitchWidget-glow">
</span>
<span class="oo-ui-toggleSwitchWidget-grip">
</span>
</div>
</div>
</div>
</div>Now, here is the HTML:
<div class="oo-ui-layout oo-ui-labelElement oo-ui-fieldLayout oo-ui-fieldLayout-align-left">
<div class="oo-ui-fieldLayout-body">
<span class="oo-ui-fieldLayout-header">
<label id="ooui-php-2" class="oo-ui-labelElement-label">Inline
</label>
</span>
<div class="oo-ui-fieldLayout-field">
<div id="mw-diffPage-inline-toggle-switch" class="oo-ui-widget oo-ui-widget-enabled oo-ui-toggleWidget oo-ui-toggleWidget-off oo-ui-toggleSwitchWidget" aria-checked="false" tabindex="0" role="switch" data-ooui="">
<span class="oo-ui-toggleSwitchWidget-glow">
</span>
<span class="oo-ui-toggleSwitchWidget-grip">
</span>
</div>
</div>
</div>
</div>