Commit e2c41192 authored by Robert Knight's avatar Robert Knight

Add `aria-label` to links without text content

Fix an a11y issue reported by axe-core [1] by adding an aria-label
attribute to several links that did not have text content. These links
all have `title` attributes but axe v4.0.0 does not consider that a valid
label.

[1] https://dequeuniversity.com/rules/axe/4.0/link-name?application=axeAPI
parent 6409c35a
...@@ -44,7 +44,11 @@ function LoggedOutMessage({ onLogin, serviceUrl }) { ...@@ -44,7 +44,11 @@ function LoggedOutMessage({ onLogin, serviceUrl }) {
. .
</span> </span>
<div className="logged-out-message__logo"> <div className="logged-out-message__logo">
<a href="https://hypothes.is" title="Hypothesis homepage"> <a
href="https://hypothes.is"
aria-label="Hypothesis homepage"
title="Hypothesis homepage"
>
<SvgIcon name="logo" className="logged-out-message__logo-icon" /> <SvgIcon name="logo" className="logged-out-message__logo-icon" />
</a> </a>
</div> </div>
......
...@@ -366,6 +366,7 @@ function Toolbar({ isPreviewing, onCommand, onTogglePreview }) { ...@@ -366,6 +366,7 @@ function Toolbar({ isPreviewing, onCommand, onTogglePreview }) {
ref={buttonRefs[buttonIds.help]} ref={buttonRefs[buttonIds.help]}
tabIndex={getTabIndex(buttonIds.help)} tabIndex={getTabIndex(buttonIds.help)}
title="Formatting help" title="Formatting help"
aria-label="Formatting help"
> >
<SvgIcon <SvgIcon
name="help" name="help"
......
...@@ -8,12 +8,13 @@ import SvgIcon from '../../shared/components/svg-icon'; ...@@ -8,12 +8,13 @@ import SvgIcon from '../../shared/components/svg-icon';
/** /**
* A single sharing link as a list item * A single sharing link as a list item
*/ */
function ShareLink({ iconName, title, uri, onClick }) { function ShareLink({ label, iconName, uri, onClick }) {
return ( return (
<li className="share-links__link"> <li className="share-links__link">
<a <a
aria-label={label}
href={uri} href={uri}
title={title} title={label}
onClick={onClick} onClick={onClick}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
...@@ -27,8 +28,8 @@ function ShareLink({ iconName, title, uri, onClick }) { ...@@ -27,8 +28,8 @@ function ShareLink({ iconName, title, uri, onClick }) {
ShareLink.propTypes = { ShareLink.propTypes = {
/** The name of the SVG icon to use for this link */ /** The name of the SVG icon to use for this link */
iconName: propTypes.string.isRequired, iconName: propTypes.string.isRequired,
/** link title */ /** Accessible label / tooltip for link. */
title: propTypes.string.isRequired, label: propTypes.string.isRequired,
/** URI for sharing this annotation on the given social service */ /** URI for sharing this annotation on the given social service */
uri: propTypes.string.isRequired, uri: propTypes.string.isRequired,
/** click callback (for analytics tracking) */ /** click callback (for analytics tracking) */
...@@ -55,21 +56,21 @@ function ShareLinks({ analytics, analyticsEventName, shareURI }) { ...@@ -55,21 +56,21 @@ function ShareLinks({ analytics, analyticsEventName, shareURI }) {
<ul className="share-links"> <ul className="share-links">
<ShareLink <ShareLink
iconName="twitter" iconName="twitter"
title="Tweet share link" label="Tweet share link"
uri={`https://twitter.com/intent/tweet?url=${encodedURI}&hashtags=annotated`} uri={`https://twitter.com/intent/tweet?url=${encodedURI}&hashtags=annotated`}
onClick={trackShareClick('twitter')} onClick={trackShareClick('twitter')}
/> />
<ShareLink <ShareLink
iconName="facebook" iconName="facebook"
title="Share on Facebook" label="Share on Facebook"
uri={`https://www.facebook.com/sharer/sharer.php?u=${encodedURI}`} uri={`https://www.facebook.com/sharer/sharer.php?u=${encodedURI}`}
onClick={trackShareClick('facebook')} onClick={trackShareClick('facebook')}
/> />
<ShareLink <ShareLink
iconName="email" iconName="email"
title="Share via email" label="Share via email"
uri={`mailto:?subject=${encodeURIComponent( uri={`mailto:?subject=${encodeURIComponent(
"Let's Annotate" "Let's Annotate"
)}&body=${encodedURI}`} )}&body=${encodedURI}`}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment