opensource/freeCodeCamp
3
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-10-24 12:13:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(a11y): add titles and roles to inline logo svgs (#51657)

Browse Source
This commit is contained in:
Lucas Lombardo
2023-10-03 17:29:15 -07:00
committed by GitHub
parent 10ea10cefb
commit d96e0db322
12 changed files with 53 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/i18n/locales/english/translations.json
+3 -1
View File
@@ -551,7 +551,9 @@
"how-update": "I set up a monthly donation, but I need to update or pause the monthly recurrence. How can I do this?",
"take-care-of-this": "Just forward one of your monthly donation receipts to donors@freecodecamp.org and tell us what you'd like us to do. We'll take care of this for you and send you confirmation.",
"anything-else": "Is there anything else I can learn about donating to freeCodeCamp.org?",
"other-support": "If there is some other way you'd like to support our charity and its mission that isn't listed here, or if you have any questions at all, please email Quincy at quincy@freecodecamp.org."
"other-support": "If there is some other way you'd like to support our charity and its mission that isn't listed here, or if you have any questions at all, please email Quincy at quincy@freecodecamp.org.",
"bear-progress-alt": "Illustration of an adorable teddy bear with a pleading expression holding an empty money jar.",
"bear-completion-alt": "Illustration of an adorable teddy bear holding a large trophy."
},
"report": {
"sign-in": "You need to be signed in to report a user",
client/src/assets/images/components/alibaba-logo.tsx
+3
View File
@@ -9,8 +9,11 @@ const AlibabaLogo = (
viewBox='0 0 604 341'
xmlns='http://www.w3.org/2000/svg'
xmlnsXlink='http://www.w3.org/1999/xlink'
role='img'
aria-labelledby='alibaba-logo-label'
{...props}
>
<title id='alibaba-logo-label'>Alibaba</title>
<g fill='none'>
<g fill='var(--quaternary-color)'>
<g transform='translate(302 170.5) scale(-1 1) rotate(180) translate(-302 -170.5)'>
client/src/assets/images/components/amazon-logo.tsx
+7 -4
View File
@@ -1,6 +1,6 @@
import React from 'react';
const SpotifyLogo = (
const AmazonLogo = (
props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
): JSX.Element => (
<svg
@@ -8,9 +8,12 @@ const SpotifyLogo = (
viewBox='93.907 250 1350 472'
xmlns='http://www.w3.org/2000/svg'
xmlnsXlink='http://www.w3.org/1999/xlink'
{...props}
fill='var(--quaternary-color)'
role='img'
aria-labelledby='amazon-logo-label'
{...props}
>
<title id='amazon-logo-label'>Amazon</title>
<g>
<path
d=' M 627.609 633.492 C 577.617 670.34 505.156 690 442.768 690 C 355.291 690 276.539 657.645 216.96 603.833 C 212.279 599.602 216.473 593.835 222.09 597.13 C 286.387 634.54 365.888 657.046 448.011 657.046 C 503.396 657.046 564.323 645.587 620.344 621.808 C 628.808 618.213 635.885 627.35 627.609 633.492'
@@ -64,6 +67,6 @@ const SpotifyLogo = (
</svg>
);
SpotifyLogo.displayName = 'SpotifyLogo';
AmazonLogo.displayName = 'AmazonLogo';
export default SpotifyLogo;
export default AmazonLogo;
client/src/assets/images/components/apple-logo.tsx
+4 -1
View File
@@ -8,9 +8,12 @@ const AppleLogo = (
viewBox='450 0 500 650'
xmlns='http://www.w3.org/2000/svg'
xmlnsXlink='http://www.w3.org/1999/xlink'
{...props}
fill='var(--quaternary-color)'
role='img'
aria-labelledby='apple-logo-label'
{...props}
>
<title id='apple-logo-label'>Apple</title>
<g>
<path d=' M 856.091 303.9 C 855.442 231.513 915.212 196.762 917.915 195.068 C 884.281 145.861 831.938 139.12 813.265 138.327 C 768.744 133.82 726.35 164.534 703.784 164.534 C 681.217 164.534 646.321 138.975 609.407 139.697 C 560.813 140.417 516.076 167.923 491.058 211.398 C 440.625 298.889 478.188 428.558 527.287 499.575 C 551.332 534.29 579.955 573.403 617.59 571.961 C 653.855 570.519 667.554 548.529 711.318 548.529 C 755.081 548.529 767.41 571.961 805.73 571.276 C 844.7 570.519 869.429 535.804 893.294 500.981 C 920.835 460.678 932.227 421.673 932.876 419.618 C 932.01 419.257 856.884 390.454 856.091 303.9 Z ' />
<path d=' M 784.1 91.348 C 804.071 67.159 817.553 33.524 813.839 0 C 785.07 1.155 750.249 19.179 729.592 43.368 C 711.099 64.746 694.877 98.991 699.273 131.833 C 731.358 134.32 764.125 115.501 784.1 91.348' />
client/src/assets/images/components/as-seen-in-text.tsx
+6
View File
File diff suppressed because one or more lines are too long
client/src/assets/images/components/bear-block-completion-modal.tsx
+7
View File
@@ -1,8 +1,10 @@
import React from 'react';
import { useTranslation } from 'react-i18next';
function BearBlockCompletion(
props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
): JSX.Element {
const { t } = useTranslation();
return (
<>
<svg
@@ -11,8 +13,13 @@ function BearBlockCompletion(
height='180'
viewBox='0 0 187 175'
fill='none'
role='img'
aria-labelledby='bear-completion-illustration-label'
{...props}
>
<title id='bear-completion-illustration-label'>
{t('donate.bear-completion-alt')}
</title>
<path
d='M187 95c0 32.268-8.375 58.697-34 75.376h-22.5c-12.5.624-10-1-31.5 0-20.5-1-25.5 0-36.5 0h-27C9.875 153.697 0 124.268 0 92 0 40.638 40.257 0 93 0s94 43.638 94 95z'
fill='#fff'
client/src/assets/images/components/bear-progress-modal.tsx
+5
View File
@@ -1,8 +1,10 @@
import React from 'react';
import { useTranslation } from 'react-i18next';
function BearProgressModal(
props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
): JSX.Element {
const { t } = useTranslation();
return (
<>
<svg
@@ -11,8 +13,11 @@ function BearProgressModal(
width='187'
height='178'
fill='none'
role='img'
aria-labelledby='bear-progress-label'
{...props}
>
<title id='bear-progress-label'>{t('donate.bear-progress-alt')}</title>
<path
d='M187 95c0 32.268-8.375 58.697-34 75.376h-22.5c-10 3.124-10.5 4.124-32 5.124-20.5-1-26.5-1-36-5.124h-27C9.875 153.697 0 124.268 0 92 0 40.638 40.257 0 93 0s94 43.638 94 95z'
fill='#fff'
client/src/assets/images/components/google-logo.tsx
+4 -1
View File
@@ -8,9 +8,12 @@ const GoogleLogo = (
viewBox='1635 200 1185 600'
xmlns='http://www.w3.org/2000/svg'
xmlnsXlink='http://www.w3.org/1999/xlink'
{...props}
fill='var(--quaternary-color)'
role='img'
aria-labelledby='google-logo-label'
{...props}
>
<title id='google-logo-label'>Google</title>
<g>
<path d=' M 2143.153 531.761 C 2143.153 587.997 2099.159 629.437 2045.169 629.437 C 1991.178 629.437 1947.184 587.997 1947.184 531.761 C 1947.184 475.128 1991.178 434.085 2045.169 434.085 C 2099.159 434.085 2143.153 475.128 2143.153 531.761 Z M 2100.26 531.761 C 2100.26 496.619 2074.762 472.574 2045.169 472.574 C 2015.575 472.574 1990.077 496.619 1990.077 531.761 C 1990.077 566.551 2015.575 590.948 2045.169 590.948 C 2074.762 590.948 2100.26 566.507 2100.26 531.761 Z ' />
<path d=' M 2354.534 531.761 C 2354.534 587.997 2310.541 629.437 2256.55 629.437 C 2202.56 629.437 2158.566 587.997 2158.566 531.761 C 2158.566 475.172 2202.56 434.085 2256.55 434.085 C 2310.541 434.085 2354.534 475.128 2354.534 531.761 Z M 2311.642 531.761 C 2311.642 496.619 2286.144 472.574 2256.55 472.574 C 2226.957 472.574 2201.459 496.619 2201.459 531.761 C 2201.459 566.551 2226.957 590.948 2256.55 590.948 C 2286.144 590.948 2311.642 566.507 2311.642 531.761 Z ' />
client/src/assets/images/components/microsoft-logo.tsx
+4 -1
View File
File diff suppressed because one or more lines are too long
client/src/assets/images/components/patreon-logo.tsx
+3
View File
@@ -8,8 +8,11 @@ const PatreonLogo = (
viewBox='10 0 2560 356'
xmlns='http://www.w3.org/2000/svg'
xmlnsXlink='http://www.w3.org/1999/xlink'
role='img'
aria-labelledby='patreon-logo-label'
{...props}
>
<title id='patreon-logo-label'>Patreon</title>
<g>
<path d='M1536.54 72.449v76.933h128.24v61.473h-128.24v74.51h128.24v62.921h-206.64V9.529h206.64v62.92h-128.24M2070.82 178.907c0-55.652-37.76-107.434-99.21-107.434-61.95 0-99.21 51.782-99.21 107.434s37.26 107.435 99.21 107.435c61.45 0 99.21-51.783 99.21-107.435zm-278.77 0c0-92.916 66.79-178.093 179.56-178.093 112.26 0 179.05 85.177 179.05 178.093 0 92.916-66.79 178.093-179.05 178.093-112.77 0-179.56-85.177-179.56-178.093zM186.32 131.97c0-31.46-21.299-58.563-54.206-58.563H78.398v117.109h53.716c32.907 0 54.206-27.086 54.206-58.546zM0 9.529h141.788c75.016 0 123.417 56.628 123.417 122.441s-48.401 122.423-123.417 122.423h-63.39v93.893H0V9.529zM492.17 106.314l-41.621 139.382h82.266L492.17 106.314zm73.081 241.972-13.054-41.134H431.69l-13.072 41.134h-83.73L455.882 9.529h72.105l122.442 338.757h-85.178zM782.055 77.277H705.61V9.529h231.793v67.748h-76.951v271.009h-78.397V77.277M2485.08 230.202V9.529h77.91v338.757h-81.78l-121.97-217.78v217.78h-78.4V9.529h81.78l122.46 220.673M1245.68 131.97c0-31.46-21.3-58.563-54.21-58.563h-53.72v117.109h53.72c32.91 0 54.21-27.086 54.21-58.546zM1059.36 9.529h142.29c75 0 123.4 56.628 123.4 122.441 0 47.425-25.17 89.517-67.28 109.369l67.77 106.947h-90.98l-60.03-93.893h-36.78v93.893h-78.39V9.529z' />
</g>
client/src/assets/images/components/spotify-logo.tsx
+4 -1
View File
File diff suppressed because one or more lines are too long
client/src/assets/images/components/tencent-logo.tsx
+3 -1
View File
@@ -10,9 +10,11 @@ const TencentLogo = (
viewBox='0 0 1000 190'
width='100'
xmlns='http://www.w3.org/2000/svg'
role='img'
aria-labelledby='tencent-logo-label'
{...props}
>
<title>Tencent_Logo</title>
<title id='tencent-logo-label'>Tencent</title>
<g fill='none'>
<g fill='var(--quaternary-color)'>
<polygon