Improve readability of anon user menu for screenreaders

Bug: T288293
Change-Id: I10ca58aa492447f179c0ce12eabc0cd1ce4e9d9b

dev-scripts/setup-storybook.sh

@@ -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

i18n/en.json

@@ -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"

i18n/qqq.json

@@ -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."

includes/SkinVector.php

@@ -210,6 +210,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 );
 
@@ -221,9 +222,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
 		] );
 	}
 

resources/skins.vector.styles/components/UserLinks.less

@@ -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 {

skin.json

@@ -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",
@@ -150,6 +150,10 @@
 			"styles": [
 				"resources/common/common.less",
 				"resources/skins.vector.styles/skin.less"
+			],
+			"lessMessages": [
+				"parentheses-start",
+				"parentheses-end"
 			]
 		},
 		"skins.vector.icons": {

stories/UserLinks.stories.data.js

@@ -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>:`
 	} )
 };