WMDE-Fisch has uploaded a new change for review. ( https://gerrit.wikimedia.org/r/358985 )
Change subject: Basic screenreader compatiblity improvements ...................................................................... Basic screenreader compatiblity improvements Improvements included in this patch: - added aria-expanded attributes to the expand buttons - added aria-label for the help button - minor refactoring of OOUI elements - changed help link in tutorial so it makes more sense when read by screen readers - add tabindex for changes div and auto focus after base version selection - add aria-labels for the changes div and the editor - use labelled divs and allow tabbing over them in the changes div - add acceskey and grid role for changes div Bug: T166117 Change-Id: I8143b852ef24ebf654f662a98f40528393d30050 --- M i18n/en.json M i18n/qqq.json M includes/TwoColConflictPage.php M modules/ext.TwoColConflict.BaseVersionSelector.js M modules/ext.TwoColConflict.filterOptions.js M modules/ext.TwoColConflict.init.js 6 files changed, 54 insertions(+), 26 deletions(-) git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/TwoColConflict refs/changes/85/358985/1 diff --git a/i18n/en.json b/i18n/en.json index 09d5e4d..94997b4 100644 --- a/i18n/en.json +++ b/i18n/en.json @@ -27,13 +27,14 @@ "twoColConflict-base-selection-submit-label": "OK", "twoColConflict-diffchange-own-title": "in your version", "twoColConflict-diffchange-foreign-title": "in $1's version", + "twoColConflict-diffchange-unchanged-title": "unchanged text", "twoColConflict-label-show": "show", "twoColConflict-label-hide": "hide", "twoColConflict-label-unchanged": "unchanged text", "twoColConflict-label-show-unchanged": "show unchanged text", "twoColConflict-label-hide-unchanged": "hide unchanged text", "twoColConflict-show-help-tooltip": "Show help text", - "twoColConflict-help-dialog-slide1": "This page helps you to resolve an edit conflict. There are two columns: The first shows the conflicting changes and the second is a text editor, whose content will be published.\n\nFeedback is very much appreciated [//www.mediawiki.org/wiki/Help_talk:Two_Column_Edit_Conflict_View here].", + "twoColConflict-help-dialog-slide1": "This page helps you to resolve an edit conflict. There are two columns: The first shows the conflicting changes and the second is a text editor, whose content will be published.\n\n[//www.mediawiki.org/wiki/Help_talk:Two_Column_Edit_Conflict_View Feedback is very much appreciated here].", "twoColConflict-help-dialog-slide2": "The first column shows the changes in your version and the changes in the currently saved version. The differences between both versions are highlighted.", "twoColConflict-help-dialog-slide3": "At the top of the first column you can click on \"{{int:twoColConflict-label-show}}\" to see unchanged text. This might help to understand the context of changes. By default, unchanged text is greyed out and collapsed.", "twoColConflict-help-dialog-slide4": "The second column is an editor. When the page is opened, there is a selection box on top of the editor. It lets you decide which version should be in the editor. This is often the version where more changes were made.", diff --git a/i18n/qqq.json b/i18n/qqq.json index fb551be..ff07326 100644 --- a/i18n/qqq.json +++ b/i18n/qqq.json @@ -31,6 +31,7 @@ "twoColConflict-base-selection-submit-label": "The label on the submit button in the base version selection dialog.\n{{Identical|OK}}", "twoColConflict-diffchange-own-title": "The title text in the unified diff view for changes by the user.", "twoColConflict-diffchange-foreign-title": "The title text in the unified diff view for conflicting changes.\n\nParameters:\n$1 - Username of the user that edited the current revision of the page.", + "twoColConflict-diffchange-unchanged-title": "The label text in the unified diff view for unchanged text.", "twoColConflict-label-show": "Label for the option showing elements in the diff view.\n{{Identical|Show}}", "twoColConflict-label-hide": "Label for the option hiding elements in the diff view.\n{{Identical|Hide}}", "twoColConflict-label-unchanged": "Label for the options showing and hiding unchanged text in the diff view.", diff --git a/includes/TwoColConflictPage.php b/includes/TwoColConflictPage.php index dc4ae50..7798617 100644 --- a/includes/TwoColConflictPage.php +++ b/includes/TwoColConflictPage.php @@ -103,8 +103,8 @@ private function buildConflictPageChangesCol() { $out = '<div class="mw-twocolconflict-changes-col">'; $out .= '<div class="mw-twocolconflict-col-header">'; - $out .= '<h3>' . $this->getContext()->msg( 'twoColConflict-changes-col-title' )->parse() . - '</h3>'; + $out .= '<h3 id="mw-twocolconflict-changes-header">' . + $this->getContext()->msg( 'twoColConflict-changes-col-title' )->parse() . '</h3>'; $out .= '<div class="mw-twocolconflict-col-desc">'; $out .= $this->getContext()->msg( 'twoColConflict-changes-col-desc-1' )->text(); $out .= '<ul>'; @@ -138,6 +138,8 @@ $this->context->getOutput()->enableOOUI(); $showHideOptions = new OOUI\RadioSelectInputWidget( [ + 'name' => 'mw-twocolconflict-same', + 'classes' => [ 'mw-twocolconflict-filter-options-btn' ], 'options' => [ [ 'data' => 'show', @@ -148,9 +150,11 @@ 'label' => $this->getContext()->msg( 'twoColConflict-label-hide' )->text() ], ], - 'name' => 'mw-twocolconflict-same', - 'title' => 'mw-twocolconflict-same', - 'classes' => [ 'mw-twocolconflict-filter-options-btn' ] + ] ); + + $fieldset = new OOUI\FieldsetLayout(); + $fieldset->addItems( [ + $showHideOptions ] ); $out = '<div class="mw-twocolconflict-filter-options-container">'; @@ -159,7 +163,7 @@ $out .= '<div class="mw-twocolconflict-filter-titles">' . $this->getContext()->msg( 'twoColConflict-label-unchanged' )->text() . '</div>'; - $out .= $showHideOptions; + $out .= $fieldset; $out .= $this->buildHelpButton(); $out .= '</div>'; @@ -184,6 +188,10 @@ 'title' => $this->getContext()->msg( 'twoColConflict-show-help-tooltip' )->text(), 'classes' => [ 'mw-twocolconflict-show-help' ] ] ); + $helpButton->setAttributes( [ + 'aria-haspopup' => 'true', + 'aria-label' => $helpButton->getTitle() + ] ); $out = '<div class="mw-twocolconflict-show-help-container">'; $out .= $helpButton; @@ -202,8 +210,11 @@ $name = 'mw-twocolconflict-changes-editor'; $customAttribs = [ - 'tabindex' => 0, - 'class' => $name + 'tabindex' => 1, + 'accesskey' => '.', + 'class' => $name, + 'aria-labelledby' => 'mw-twocolconflict-changes-header', + 'role' => 'grid', ]; if ( $this->wikiEditorIsEnabled() ) { $customAttribs['class'] .= ' mw-twocolconflict-wikieditor'; @@ -281,7 +292,8 @@ */ private function buildConflictPageEditorCol() { $out = '<div class="mw-twocolconflict-col-header">'; - $out .= '<h3>' . $this->getContext()->msg( 'twoColConflict-editor-col-title' ) . '</h3>'; + $out .= '<h3 id="mw-twocolconflict-edit-header">' . + $this->getContext()->msg( 'twoColConflict-editor-col-title' ) . '</h3>'; $out .= '<div class="mw-twocolconflict-col-desc">'; $out .= '<div class="mw-twocolconflict-edit-desc">'; $out .= '<p>' . $this->getContext()->msg( 'twoColConflict-editor-col-desc-1' ) . '</p>'; @@ -358,11 +370,12 @@ if ( $this->hasConflictInLine( $currentLine ) ) { $class .= ' mw-twocolconflict-diffchange-conflict'; } + $label = $this->context->msg( 'twoColConflict-diffchange-own-title' )->escaped(); - $output .= '<div class="' . $class . '">' . + $output .= '<div class="' . $class . '" aria-label="' . $label . '" tabindex="1">' . '<div class="mw-twocolconflict-diffchange-title">' . '<span mw-twocolconflict-diffchange-title-pseudo="' . - $this->context->msg( 'twoColConflict-diffchange-own-title' )->escaped() . + $label . '" unselectable="on">' . // used by IE9 '</span>' . '</div>' . @@ -374,14 +387,15 @@ if ( $this->hasConflictInLine( $currentLine ) ) { $class .= ' mw-twocolconflict-diffchange-conflict'; } + $label = $this->context->msg( + 'twoColConflict-diffchange-foreign-title', + $lastUser + )->escaped(); - $output .= '<div class="' . $class . '">' . + $output .= '<div class="' . $class . '" aria-label="' . $label . '" tabindex="1">' . '<div class="mw-twocolconflict-diffchange-title">' . '<span mw-twocolconflict-diffchange-title-pseudo="' . - $this->context->msg( - 'twoColConflict-diffchange-foreign-title', - $lastUser - )->escaped() . + $label . '" unselectable="on">' . // used by IE9 '</span>' . '</div>' . @@ -393,7 +407,9 @@ } break; case 'copy': - $output .= '<div class="mw-twocolconflict-diffchange-same">' . + $class = 'mw-twocolconflict-diffchange-same'; + $label = $this->context->msg( 'twoColConflict-diffchange-unchanged-title' )->escaped(); + $output .= '<div class="' . $class . '" aria-label="' . $label . '" tabindex="1">' . $this->addUnchangedText( $changeSet['copy'] ) . '</div>' . "\n"; break; @@ -484,8 +500,8 @@ } return - '<div class="mw-twocolconflict-diffchange-same-full">' . $text . '</div>' . - '<div class="mw-twocolconflict-diffchange-same-collapsed">' . $collapsedText . '</div>'; + '<span class="mw-twocolconflict-diffchange-same-full">' . $text . '</span>' . + '<span class="mw-twocolconflict-diffchange-same-collapsed">' . $collapsedText . '</span>'; } /** diff --git a/modules/ext.TwoColConflict.BaseVersionSelector.js b/modules/ext.TwoColConflict.BaseVersionSelector.js index 575f877..3b2565c 100644 --- a/modules/ext.TwoColConflict.BaseVersionSelector.js +++ b/modules/ext.TwoColConflict.BaseVersionSelector.js @@ -39,8 +39,8 @@ radioSelect, submit, fieldset, form; radioSelect = new OO.ui.RadioSelectInputWidget( { - classes: [ 'mw-twocolconflict-base-dialog-radio' ], name: 'mw-twocolconflict-base-version', + classes: [ 'mw-twocolconflict-base-dialog-radio' ], options: [ { data: 'yours', @@ -67,7 +67,7 @@ fieldset = new OO.ui.FieldsetLayout(); fieldset.addItems( [ - new OO.ui.FieldLayout( radioSelect ), + radioSelect, submit ] ); diff --git a/modules/ext.TwoColConflict.filterOptions.js b/modules/ext.TwoColConflict.filterOptions.js index 34dea4a..e756b9d 100644 --- a/modules/ext.TwoColConflict.filterOptions.js +++ b/modules/ext.TwoColConflict.filterOptions.js @@ -55,7 +55,10 @@ classes: [ 'mw-twocolconflict-expand-collapse-btn' ], title: mw.msg( 'twoColConflict-label-show-unchanged' ) } ); - expandBtn.$element.children().attr( 'aria-label', expandBtn.getTitle() ); + expandBtn.$element.children().attr( { + 'aria-label': expandBtn.getTitle(), + 'aria-expanded': false + } ); collapseBtn = new OO.ui.ButtonInputWidget( { indicator: 'up', @@ -64,7 +67,10 @@ classes: [ 'mw-twocolconflict-expand-collapse-btn' ], title: mw.msg( 'twoColConflict-label-hide-unchanged' ) } ); - collapseBtn.$element.children().attr( 'aria-label', collapseBtn.getTitle() ); + collapseBtn.$element.children().attr( { + 'aria-label': collapseBtn.getTitle(), + 'aria-expanded': true + } ); $( '.mw-twocolconflict-diffchange-same-collapsed' ).prepend( expandBtn.$element ); $( '.mw-twocolconflict-diffchange-same-full' ).prepend( collapseBtn.$element ); diff --git a/modules/ext.TwoColConflict.init.js b/modules/ext.TwoColConflict.init.js index d8413d5..b739a3e 100644 --- a/modules/ext.TwoColConflict.init.js +++ b/modules/ext.TwoColConflict.init.js @@ -171,10 +171,9 @@ function afterBaseVersionSelection() { enableEditButtons(); $( '.mw-twocolconflict-form' ).removeClass( 'mw-twocolconflict-before-base-selection' ); - // select 'hide' as the default option - $( 'input[name="mw-twocolconflict-same"]' )[ 1 ].click(); redrawPage(); autoScroll.scrollToFirstOwnOrConflict(); + $( '.mw-twocolconflict-changes-editor' ).focus(); } function initAndShowBaseVersionSelector() { @@ -199,6 +198,11 @@ $( window ).on( 'resize', redrawPage ); + // set label for the textbox to the editor header text + $( '#wpTextbox1' ).attr( { + 'aria-labelledby': 'mw-twocolconflict-edit-header' + } ); + initAndShowBaseVersionSelector(); initHelpDialog(); addTargetToEditSummaryLinks(); -- To view, visit https://gerrit.wikimedia.org/r/358985 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: newchange Gerrit-Change-Id: I8143b852ef24ebf654f662a98f40528393d30050 Gerrit-PatchSet: 1 Gerrit-Project: mediawiki/extensions/TwoColConflict Gerrit-Branch: master Gerrit-Owner: WMDE-Fisch <christoph.jau...@wikimedia.de> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits