fix(a11y): use appropriate aria-label for fCC logo depending on its use (#45201)

This commit is contained in:
sidemt
2022-02-23 17:22:44 +09:00
committed by GitHub
parent 2f4cee8e36
commit c681c33587
3 changed files with 8 additions and 7 deletions

View File

@ -1,18 +1,17 @@
import React from 'react'; import React from 'react';
import { useTranslation } from 'react-i18next';
function FreeCodeCampLogo(): JSX.Element {
const { t } = useTranslation();
function FreeCodeCampLogo(
props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
): JSX.Element {
return ( return (
<svg <svg
aria-label={t('aria.fcc-curriculum')}
height={24} height={24}
version='1.1' version='1.1'
viewBox='0 0 210 24' viewBox='0 0 210 24'
width={210} width={210}
xmlns='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg'
xmlnsXlink='http://www.w3.org/1999/xlink' xmlnsXlink='http://www.w3.org/1999/xlink'
{...props}
> >
<defs> <defs>
<path <path

View File

@ -322,7 +322,7 @@ const ShowCertification = (props: ShowCertificationProps): JSX.Element => {
<header> <header>
<Col md={5} sm={12}> <Col md={5} sm={12}>
<div className='logo'> <div className='logo'>
<FreeCodeCampLogo /> <FreeCodeCampLogo aria-hidden='true' />
</div> </div>
</Col> </Col>
<Col md={7} sm={12}> <Col md={7} sm={12}>

View File

@ -1,8 +1,10 @@
import React from 'react'; import React from 'react';
import { useTranslation } from 'react-i18next';
import FreeCodeCampLogo from '../../../assets/icons/FreeCodeCamp-logo'; import FreeCodeCampLogo from '../../../assets/icons/FreeCodeCamp-logo';
const NavLogo = (): JSX.Element => { const NavLogo = (): JSX.Element => {
return <FreeCodeCampLogo />; const { t } = useTranslation();
return <FreeCodeCampLogo aria-label={t('aria.fcc-curriculum')} />;
}; };
NavLogo.displayName = 'NavLogo'; NavLogo.displayName = 'NavLogo';