[a11y] Add title attributes to logout, talk and history and DRY up code.

* Addresses feedback in:
** T289816#7440605
** T283505#7440585
Change-Id: I98abdab8c3eb20567af527e6a8bf75faa5670d6b
This commit is contained in:
jdlrobson 2021-10-19 08:27:18 -07:00
parent fa15608f3e
commit 358d81ddce
3 changed files with 18 additions and 9 deletions

View File

@ -257,6 +257,7 @@ class SkinVector extends SkinMustache {
]; ];
return $templateParser->processTemplate( 'UserLinks__logout', [ return $templateParser->processTemplate( 'UserLinks__logout', [
'msg-tooltip-pt-logout' => $this->msg( 'tooltip-pt-logout' ),
'htmlLogout' => $this->makeLink( 'logout', $logoutLinkData ) 'htmlLogout' => $this->makeLink( 'logout', $logoutLinkData )
] ); ] );
} }

View File

@ -1,4 +1,4 @@
{{!-- The #pt-logout ID is required for the AJAX enabled logout in mediawiki.page.ready to work.}} {{!-- The #pt-logout ID is required for the AJAX enabled logout in mediawiki.page.ready to work.}}
<div id="pt-logout" class="vector-user-menu-logout"> <div id="pt-logout" class="vector-user-menu-logout" title="{{msg-tooltip-pt-logout}}">
{{{htmlLogout}}} {{{htmlLogout}}}
</div> </div>

View File

@ -23,6 +23,17 @@ function copyAttribute( from, to, attribute ) {
} }
} }
/**
* Copies attribute from an element to another.
*
* @param {Element} from
* @param {Element} to
*/
function copyButtonAttributes( from, to ) {
copyAttribute( from, to, 'href' );
copyAttribute( from, to, 'title' );
}
/** /**
* Suffixes an attribute with a value that indicates it * Suffixes an attribute with a value that indicates it
* relates to the sticky header to support click tracking instrumentation. * relates to the sticky header to support click tracking instrumentation.
@ -80,13 +91,13 @@ function prepareIcons( header, history, talk ) {
} }
if ( history ) { if ( history ) {
copyAttribute( history, historySticky, 'href' ); copyButtonAttributes( history, historySticky );
} else { } else {
// @ts-ignore // @ts-ignore
historySticky.parentNode.removeChild( historySticky ); historySticky.parentNode.removeChild( historySticky );
} }
if ( talk ) { if ( talk ) {
copyAttribute( talk, talkSticky, 'href' ); copyButtonAttributes( talk, talkSticky );
} else { } else {
// @ts-ignore // @ts-ignore
talkSticky.parentNode.removeChild( talkSticky ); talkSticky.parentNode.removeChild( talkSticky );
@ -132,15 +143,12 @@ function prepareEditIcons(
} else if ( isProtected ) { } else if ( isProtected ) {
removeNode( wikitextSticky ); removeNode( wikitextSticky );
removeNode( primaryEditSticky ); removeNode( primaryEditSticky );
copyAttribute( primaryEdit, protectedSticky, 'href' ); copyButtonAttributes( primaryEdit, protectedSticky );
copyAttribute( primaryEdit, protectedSticky, 'title' );
} else { } else {
removeNode( protectedSticky ); removeNode( protectedSticky );
copyAttribute( primaryEdit, primaryEditSticky, 'href' ); copyButtonAttributes( primaryEdit, primaryEditSticky );
copyAttribute( primaryEdit, primaryEditSticky, 'title' );
if ( secondaryEdit ) { if ( secondaryEdit ) {
copyAttribute( secondaryEdit, wikitextSticky, 'href' ); copyButtonAttributes( secondaryEdit, wikitextSticky );
copyAttribute( secondaryEdit, wikitextSticky, 'title' );
} else { } else {
removeNode( wikitextSticky ); removeNode( wikitextSticky );
} }