Merge "Accessibility: Improve contributions navigation for screen reader users"

diff --git a/includes/specials/pagers/ContribsPager.php b/includes/specials/pagers/ContribsPager.php
index 18da235..b42af9b 100644 (file)
--- a/includes/specials/pagers/ContribsPager.php
+++ b/includes/specials/pagers/ContribsPager.php
@@ -568,10 +568,17 @@ class ContribsPager extends RangeChronologicalPager {
                                $del .= ' ';
                        }
 
-                       $diffHistLinks = Html::rawElement( 'ul',
-                               [ 'class' => 'mw-changeslist-link-list' ],
-                               Html::rawElement( 'li', [], $difftext ) .
-                               Html::rawElement( 'li', [], $histlink )
+                       // While it might be tempting to use a list here
+                       // this would result in clutter and slows down navigating the content
+                       // in assistive technology.
+                       // See https://phabricator.wikimedia.org/T205581#4734812
+                       $diffHistLinks = Html::rawElement( 'span',
+                               [ 'class' => 'mw-changeslist-links' ],
+                               // The spans are needed to ensure the dividing '|' elements are not
+                               // themselves styled as links.
+                               Html::rawElement( 'span', [], $difftext ) .
+                               ' ' . // Space needed for separating two words.
+                               Html::rawElement( 'span', [], $histlink )
                        );
 
                        # Tags, if any.

diff --git a/resources/src/mediawiki.special.changeslist.less b/resources/src/mediawiki.special.changeslist.less
index 34b0836..3785ff8 100644 (file)
--- a/resources/src/mediawiki.special.changeslist.less
+++ b/resources/src/mediawiki.special.changeslist.less
@@ -67,12 +67,8 @@
        content: '. .';
 }
 
-.mw-changeslist-link-list {
+.mw-changeslist-links {
        display: inline-block;
-       /* In @media print, list elements have margins and/or paddings defined.
-       We don't want to see margins/paddings on these elements under any circumstances. */
-       margin: 0;
-       padding: 0;
 
        &:before {
                content: '@{msg-parentheses-start}';
@@ -81,11 +77,7 @@
                content: '@{msg-parentheses-end}';
        }
 
-       > li {
-               display: inline;
-
-               &:not( :first-child ):before {
-                       content: '@{msg-pipe-separator}';
-               }
+       > span:not( :first-child ):before {
+               content: '@{msg-pipe-separator}';
        }
 }