Merge "Improve readability of anon user menu for screenreaders"

This commit is contained in:
jenkins-bot 2021-08-27 20:36:16 +00:00 committed by Gerrit Code Review
commit fef51f9023
7 changed files with 26 additions and 6 deletions

View file

@ -18,3 +18,7 @@ curl -sSL "https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/maste
curl -sS "https://en.m.wikipedia.org/static/images/mobile/copyright/wikipedia-wordmark-en.svg" -o ".storybook/resolve-imports/assets/wordmark.svg"
curl -sS "https://en.m.wikipedia.org/static/images/mobile/copyright/wikipedia.png" -o ".storybook/resolve-imports/assets/icon.png"
curl -sS "https://en.wikipedia.org/static/images/mobile/copyright/wikipedia-tagline-en.svg" -o ".storybook/resolve-imports/assets/tagline.svg"
# Add less variable support
echo "@msg-parentheses-start: '(';" >> .storybook/resolve-imports/mediawiki.skin.defaults.less
echo "@msg-parentheses-end: ')';" >> .storybook/resolve-imports/mediawiki.skin.defaults.less

View file

@ -30,6 +30,7 @@
"vector-search-loader": "Loading search suggestions",
"vector-anon-user-menu-pages": "Pages for logged out editors",
"vector-anon-user-menu-pages-learn": "learn more",
"vector-anon-user-menu-pages-label": "Learn more about editing",
"vector-personal-more-label": "User links",
"vector-main-menu-tooltip": "Main menu",
"tooltip-vector-anon-user-menu-title": "More options"

View file

@ -42,6 +42,7 @@
"vector-search-loader": "Text to display below search input while the search suggestion module is loading",
"vector-anon-user-menu-pages": "Label describing the anon editor links in the anon user menu",
"vector-anon-user-menu-pages-learn": "Lowercase text of link that goes to Help:Introduction and helps the user learn more about editing",
"vector-anon-user-menu-pages-label": "Accessible version of 'vector-anon-user-menu-pages' link text, prompts user to learn more about editing",
"vector-personal-more-label": "Label describing the user links next to the user links dropdown menu.",
"vector-main-menu-tooltip": "Used as title attribute for main menu icon on hover.",
"tooltip-vector-anon-user-menu-title": "Used as title attribute for user menu icon on hover for anonymous users."

View file

@ -195,6 +195,7 @@ class SkinVector extends SkinMustache {
$learnMoreLinkData = [
'text' => $this->msg( 'vector-anon-user-menu-pages-learn' )->text(),
'href' => Title::newFromText( 'Help:Introduction' )->getLocalURL(),
'aria-label' => $this->msg( 'vector-anon-user-menu-pages-label' )->text(),
];
$learnMoreLink = $this->makeLink( '', $learnMoreLinkData );
@ -206,9 +207,7 @@ class SkinVector extends SkinMustache {
], true ),
'htmlLogin' => $this->makeLink( 'login', $loginData ),
'msgLearnMore' => $this->msg( 'vector-anon-user-menu-pages' ),
'htmlLearnMoreLink' => $this->msg( 'parentheses' )->
rawParams( $learnMoreLink )->
escaped()
'htmlLearnMoreLink' => $learnMoreLink
] );
}

View file

@ -143,6 +143,16 @@
p {
margin: 0;
}
a:before {
content: '@{msg-parentheses-start}';
color: @colorGray5;
}
a:after {
content: '@{msg-parentheses-end}';
color: @colorGray5;
}
}
.vector-menu-content-item-logout {

View file

@ -35,8 +35,8 @@
"createaccount",
"vector-anon-user-menu-pages",
"vector-anon-user-menu-pages-learn",
"vector-anon-user-menu-pages-label",
"vector-personal-more-label",
"parentheses",
"otherlanguages",
"tooltip-p-logo",
"vector-opt-out-tooltip",
@ -155,6 +155,10 @@
"styles": [
"resources/common/common.less",
"resources/skins.vector.styles/skin.less"
],
"lessMessages": [
"parentheses-start",
"parentheses-end"
]
},
"skins.vector.icons": {

View file

@ -2,6 +2,7 @@
* @external MenuDefinition
* @external UserLinksDefinition
*/
import msgs from '../i18n/en.json';
import mustache from 'mustache';
import { menuTemplate } from './Menu.stories.data';
import userLinksTemplateLegacy from '!!raw-loader!../includes/templates/legacy/UserLinks.mustache';
@ -109,8 +110,8 @@ const loggedOutData = {
'html-before-portal': mustache.render( userLinksLoginTemplate, {
htmlCreateAccount: `<a href="/w/index.php?title=Special:CreateAccount&amp;returnto=Special%3AUserLogout" icon="userAvatar" class="user-links-collapsible-item vector-menu-content-item mw-ui-icon mw-ui-icon-before mw-ui-icon-wikimedia-userAvatar" title="You are encouraged to create an account and log in; however, it is not mandatory"><span>Create account</span></a>`,
htmlLogin: `<a class="vector-menu-content-item vector-menu-content-item-login mw-ui-icon mw-ui-icon-before mw-ui-icon-wikimedia-logIn" href="/w/index.php?title=Special:UserLogin&amp;returnto=Main+Page" title="You are encouraged to log in; however, it is not mandatory [ctrl-option-o]" accesskey="o"><span>Log in</span></a>`,
msgLearnMore: `Pages for logged out editors `,
htmlLearnMoreLink: `(<a href="/wiki/Help:Introduction"><span>learn more</span></a>):`
msgLearnMore: msgs[ 'vector-anon-user-menu-pages' ],
htmlLearnMoreLink: `<a href="/wiki/Help:Introduction"><span>${msgs[ 'vector-anon-user-menu-pages-learn' ]}</span></a>:`
} )
};