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
