Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add alt text for the "New tab" icon #1775

Merged
merged 1 commit into from
Apr 20, 2022
Merged

Add alt text for the "New tab" icon #1775

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions frontend/pendingTranslations.ftl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@
# License, v. 2.0. If a copy of the MPL was not distributed with this
# file, You can obtain one at http://mozilla.org/MPL/2.0/.

common-link-newtab-alt = (Opens in a new tab)

survey-option-dismiss = Dismiss

survey-csat-question = How satisfied are you with your Firefox Relay experience?
Expand Down
14 changes: 8 additions & 6 deletions frontend/src/components/Icons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
// then added to react-icons: https://react-icons.github.io/react-icons/.
// These manually-created components are a workaround until that is done.

import { useLocalization } from "@fluent/react";
import { SVGProps } from "react";

/** Info button that inherits the text color of its container */
Expand Down Expand Up @@ -55,14 +56,15 @@ export const CloseIcon = ({
};

/** Icon to indicate links that open in a new tab, that inherits the text color of its container */
export const NewTabIcon = ({
alt,
...props
}: SVGProps<SVGSVGElement> & { alt: string }) => {
export const NewTabIcon = (
props: SVGProps<SVGSVGElement> & { alt?: string }
) => {
const { l10n } = useLocalization();

return (
<svg
role="img"
aria-label={alt}
aria-label={props.alt ?? l10n.getString("common-link-newtab-alt")}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
width={16}
Expand All @@ -73,7 +75,7 @@ export const NewTabIcon = ({
}}
{...props}
>
<title>{alt}</title>
<title>{props.alt ?? l10n.getString("common-link-newtab-alt")}</title>
<path d="M5 1H4a3 3 0 00-3 3v8a3 3 0 003 3h8a3 3 0 003-3v-1a1 1 0 00-2 0v1a1 1 0 01-1 1H4a1 1 0 01-1-1V4a1 1 0 011-1h1a1 1 0 100-2z" />
<path d="M14.935 1.618A1 1 0 0014.012 1h-5a1 1 0 100 2h2.586L8.305 6.293A1 1 0 109.72 7.707l3.293-3.293V7a1 1 0 102 0V2a1 1 0 00-.077-.382z" />
</svg>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/layout/UserMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,7 +137,7 @@ export const UserMenu = () => {
className={styles["settings-link"]}
>
{l10n.getString("nav-profile-manage-fxa")}
<NewTabIcon alt="" />
<NewTabIcon />
</a>
</span>
</Item>
Expand Down
6 changes: 3 additions & 3 deletions frontend/src/pages/accounts/settings.page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@ const Settings: NextPage = () => {
>
<img src={messageIcon.src} alt="" />
{l10n.getString("settings-meta-contact-label")}
<NewTabIcon alt="" aria-hidden />
<NewTabIcon />
</a>
</li>
) : null;
Expand Down Expand Up @@ -167,7 +167,7 @@ const Settings: NextPage = () => {
>
<img src={helpIcon.src} alt="" />
{l10n.getString("settings-meta-help-label")}
<NewTabIcon alt="" aria-hidden />
<NewTabIcon />
</a>
</li>
<li>
Expand All @@ -179,7 +179,7 @@ const Settings: NextPage = () => {
>
<img src={performanceIcon.src} alt="" />
{l10n.getString("settings-meta-status-label")}
<NewTabIcon alt="" aria-hidden />
<NewTabIcon />
</a>
</li>
</ul>
Expand Down