Accessibility: Improve contributions navigation for screen reader users
authorjdlrobson <jdlrobson@gmail.com>
Mon, 12 Nov 2018 23:43:05 +0000 (15:43 -0800)
committerjdlrobson <jdlrobson@gmail.com>
Fri, 16 Nov 2018 00:04:42 +0000 (16:04 -0800)
`.mw-changeslist-link-list` is not a list element any more per user
feedback and renamed `mw-changeslist-links`

Changing the class name has no implications on caching as this
only impacts Special:Contributions

Bug: T205581
Change-Id: Id2faaaa847c9a9ad57da5942ca9cf92462089d3a

includes/specials/pagers/ContribsPager.php
resources/src/mediawiki.special.changeslist.less

index 18da235..b42af9b 100644 (file)
@@ -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.
index 34b0836..3785ff8 100644 (file)
        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}';
                content: '@{msg-parentheses-end}';
        }
 
-       > li {
-               display: inline;
-
-               &:not( :first-child ):before {
-                       content: '@{msg-pipe-separator}';
-               }
+       > span:not( :first-child ):before {
+               content: '@{msg-pipe-separator}';
        }
 }