$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.
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}';
}
}