Thijs/wiki.techinc.nl
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Infuse the inline diff toggle's layout to fix accessibility

Browse source 
Infusing just the toggle widget, without the layout wrapping it,
causes them to get disconnected, which breaks some accessibility
features, including lack of "aria-labelledby" and no support for
activating the toggle by clicking on its label.

Bug: T346132
Change-Id: I227f47d4e6c25e19b4c02a16c287fc481efc2bf4
This commit is contained in:
Bartosz Dziewoński 2023-09-16 01:07:53 +02:00
parent a089fc07d4
commit d45f68b1a9
2 changed files with 8 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
includes/diff/TextSlotDiffRenderer.php
View file

@ -255,11 +255,12 @@ class TextSlotDiffRenderer extends SlotDiffRenderer {
new ToggleSwitchWidget( [
'id' => 'mw-diffPage-inline-toggle-switch',
'href' => $newTitle->getLocalURL( $values ),
'value' => $isInlineDiffType,
'infusable' => true
'value' => $isInlineDiffType
] ),
[
'label' => $context->msg( 'diff-inline-format-label' )->plain()
'id' => 'mw-diffPage-inline-toggle-switch-layout',
'label' => $context->msg( 'diff-inline-format-label' )->plain(),
'infusable' => true
]
),
);

7
resources/src/mediawiki.diff/inlineFormatToggle.js
View file

@ -2,9 +2,9 @@
* JavaScript for diff inline toggle
*/
( function () {
var $inlineToggleSwitch = $( '#mw-diffPage-inline-toggle-switch' );
var $inlineToggleSwitchLayout = $( '#mw-diffPage-inline-toggle-switch-layout' );
// Return if inline switch is not displaying.
if ( !$inlineToggleSwitch.length ) {
if ( !$inlineToggleSwitchLayout.length ) {
return;
}
var $wikitextDiffContainer, $wikitextDiffHeader, $wikitextDiffBody,
@ -12,7 +12,8 @@
url = new URL( location.href ),
api = new mw.Api(),
$inlineLegendContainer = $( '.mw-diff-inline-legend' ),
inlineToggleSwitch = OO.ui.ToggleSwitchWidget.static.infuse( $inlineToggleSwitch );
inlineToggleSwitchLayout = OO.ui.FieldLayout.static.infuse( $inlineToggleSwitchLayout ),
inlineToggleSwitch = inlineToggleSwitchLayout.getField();
inlineToggleSwitch.on( 'change', onDiffTypeInlineChange );
inlineToggleSwitch.on( 'disable', onDiffTypeInlineDisabled );