From d15005408f4d8b8b7fc8859ab2875617e36b54e8 Mon Sep 17 00:00:00 2001 From: bwang Date: Wed, 25 Aug 2021 15:16:33 -0500 Subject: [PATCH] Improve readability of anon user menu for screenreaders Bug: T288293 Change-Id: I10ca58aa492447f179c0ce12eabc0cd1ce4e9d9b --- dev-scripts/setup-storybook.sh | 4 ++++ i18n/en.json | 1 + i18n/qqq.json | 1 + includes/SkinVector.php | 5 ++--- .../skins.vector.styles/components/UserLinks.less | 10 ++++++++++ skin.json | 6 +++++- stories/UserLinks.stories.data.js | 5 +++-- 7 files changed, 26 insertions(+), 6 deletions(-) diff --git a/dev-scripts/setup-storybook.sh b/dev-scripts/setup-storybook.sh index 682fd9a..0002bb9 100755 --- a/dev-scripts/setup-storybook.sh +++ b/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 \ No newline at end of file diff --git a/i18n/en.json b/i18n/en.json index ba003c6..b2b7a3d 100644 --- a/i18n/en.json +++ b/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" diff --git a/i18n/qqq.json b/i18n/qqq.json index e324c5f..acf19a3 100644 --- a/i18n/qqq.json +++ b/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." diff --git a/includes/SkinVector.php b/includes/SkinVector.php index d440503..37dd64c 100644 --- a/includes/SkinVector.php +++ b/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 ] ); } diff --git a/resources/skins.vector.styles/components/UserLinks.less b/resources/skins.vector.styles/components/UserLinks.less index 530a067..c161990 100644 --- a/resources/skins.vector.styles/components/UserLinks.less +++ b/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 { diff --git a/skin.json b/skin.json index 8cd0679..9000d03 100644 --- a/skin.json +++ b/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": { diff --git a/stories/UserLinks.stories.data.js b/stories/UserLinks.stories.data.js index fa699c9..d878f70 100644 --- a/stories/UserLinks.stories.data.js +++ b/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: `Create account`, htmlLogin: `Log in`, - msgLearnMore: `Pages for logged out editors `, - htmlLearnMoreLink: `(learn more):` + msgLearnMore: msgs[ 'vector-anon-user-menu-pages' ], + htmlLearnMoreLink: `${msgs[ 'vector-anon-user-menu-pages-learn' ]}:` } ) };