chore: add some links to Sparkbox icons and an "en" tag to the HTML a… by auaruss · Pull Request #27 · sparkbox/apprentices-page-next

auaruss · 2021-11-22T15:33:51Z

chore: add some links to Sparkbox icons and an "en" tag to the HTML attribute (via the next.config.js)

References FSA21V2-162

Description

Add some links to Sparkbox icons and an "en" tag to the HTML attribute (via the next.config.js)

Spec

Designs: [link to design if applicable]

See Story: FSA21V2-162

To Test

Make sure all PR Checks have passed (Github Actions, Netlify etc).
Pull down all related branches.
Confirm all tests pass: npm run test:ci

[For an example of good validation instructions, check out Bryan's Bouncy Ball PR.]

netlify · 2021-11-22T15:37:36Z

✔️ Deploy Preview for sb-apprentices ready!

🔨 Explore the source changes: 953a183

🔍 Inspect the deploy log: https://app.netlify.com/sites/sb-apprentices/deploys/61a9118a93878000074ab73f

😎 Browse the preview: https://deploy-preview-27--sb-apprentices.netlify.app

jonoliver

Nice work, Alice! We just need a few adjustments to ensure that the links have accessible text.

jonoliver · 2021-11-24T16:00:58Z

components/hero/hero.js

+          <svg aria-hidden className={styles['hero__sparkbox-logo--full']} width="193" height="52" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M11.225 34.33v7.112h2.245l4.146-7.112h-6.391Zm23.82-15.427h.032c1.933 0 3.523-1.58 3.523-3.572 0-1.96-1.559-3.572-3.523-3.572h-.904l-4.147 7.113 5.02.031Zm-23.82-7.112v8.092l11.848-8.092H11.225ZM35.077 34.33h-1.154L23.51 41.442h11.568c1.933 0 3.523-1.58 3.523-3.572 0-1.928-1.59-3.54-3.523-3.54Zm11.318-8.504-8.762 6.006a6.596 6.596 0 0 1 3.96 6.07c0 3.635-2.9 6.606-6.516 6.606H19.082L8.2 51.937a.446.446 0 0 1-.218.063.363.363 0 0 1-.374-.38c0-.094.03-.157.062-.22l4.022-6.923H8.574a.382.382 0 0 1-.374-.38V31.674c0-.221.156-.38.374-.38H22.17c.187 0 .374.159.374.38a.461.461 0 0 1-.063.221l-6.36 10.938 21.513-14.73H.374a.363.363 0 0 1-.374-.38c0-.127.062-.253.187-.316l8.044-5.5V9.071c0-.19.187-.347.374-.347H27.5l8.263-5.659L40.159.063A.446.446 0 0 1 40.377 0c.218 0 .374.158.374.38a.592.592 0 0 1-.062.22l-4.74 8.188c3.212.41 5.675 3.192 5.675 6.543 0 3.636-2.9 6.607-6.516 6.607h-9.634a.363.363 0 0 1-.375-.38c0-.063.032-.126.032-.189l7.077-12.202L8.948 25.1H46.24c.218 0 .374.158.374.38-.031.158-.093.284-.218.347ZM72.648 19.314l-2.65 1.454c-.406-.885-1.092-2.75-3.274-2.655-1.216.032-2.339 1.233-2.339 2.94 0 1.738.749 2.94 3.15 4.394 3.21 1.991 4.832 4.14 4.832 7.65 0 3.983-2.245 6.764-5.955 6.764-3.742 0-5.425-2.529-6.454-5.563l2.93-1.454c.656 1.643 1.31 3.572 3.15 3.603 1.528.032 2.744-1.106 2.744-2.971 0-1.707-.686-2.94-3.368-4.52-2.837-1.707-4.614-3.983-4.614-7.524 0-3.825 2.65-6.733 5.8-6.733 4.302 0 5.58 3.572 6.048 4.615ZM77.45 15.047h4.707c4.303 0 6.922 3.034 6.922 7.997 0 5.027-2.619 8.125-6.86 8.125h-1.122v8.187H77.45v-24.31Zm3.647 12.644h.842c2.12 0 3.337-1.707 3.337-4.615 0-2.845-1.248-4.52-3.368-4.52h-.81v9.135ZM101.208 33.919H95.97l-1.091 5.468h-3.523l5.269-24.34h4.115l5.207 24.34h-3.648l-1.091-5.468Zm-4.614-3.32h3.991l-1.934-9.704h-.093l-1.964 9.704ZM110.406 15.047h4.427c4.397 0 7.078 2.908 7.078 7.587 0 2.908-.904 5.12-2.557 6.511l3.586 10.242h-3.928l-2.931-8.85c-.468.063-.905.126-1.372.126h-.624v8.724h-3.648v-24.34h-.031Zm3.679 12.17h.561c2.214 0 3.492-1.58 3.492-4.489 0-2.718-1.278-4.172-3.492-4.172h-.561v8.661ZM133.354 29.525l-1.621 3.034v6.797h-3.648v-24.34h3.648V26.71l4.708-11.696h4.053l-4.739 10.653 5.238 13.688h-4.178l-3.461-9.831ZM145.732 15.047h5.457c3.71 0 6.204 2.529 6.204 6.322 0 2.402-1.091 4.489-2.806 5.374 1.933.822 3.212 2.971 3.212 5.627 0 4.204-2.682 6.986-6.61 6.986h-5.426l-.031-24.31Zm3.586 10.463h1.559c1.652 0 2.712-1.454 2.712-3.762 0-2.023-1.06-3.414-2.681-3.414h-1.59v7.176Zm1.621 10.621c1.84 0 3.025-1.517 3.025-3.761 0-2.181-1.185-3.604-3.056-3.604h-1.59v7.365h1.621ZM168.992 39.798c-4.615 0-7.203-4.489-7.203-12.613 0-8.092 2.62-12.55 7.203-12.55 4.614 0 7.202 4.521 7.202 12.614 0 8.092-2.588 12.549-7.202 12.549Zm0-3.667c2.12 0 3.336-3.16 3.336-8.914 0-5.722-1.247-8.883-3.336-8.883-2.151 0-3.336 3.161-3.336 8.883 0 5.753 1.185 8.914 3.336 8.914ZM183.865 27.09l-4.709-12.043h4.147l2.993 8.693 2.775-8.693h3.835l-4.614 12.296L193 39.388h-4.116l-3.024-8.724-2.931 8.724h-3.804l4.74-12.296Z" fill="#fff" />
+          </svg>
+        </a>


Thank you! One note: Axe is flagging the link for not having discernible text. We can just move the visually hidden span of text on line 8 inside of the a tag.

jonoliver · 2021-11-24T16:01:31Z

next.config.js

+    locales: ['en'],
+    defaultLocale: 'en',
+  },
+};


jonoliver · 2021-11-24T16:02:37Z

components/call-to-action/call-to-action.js

-      <svg width="29" height="33" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.96 22.058v4.377h1.392l2.571-4.377H6.96Zm14.77-9.493h.02a2.19 2.19 0 0 0 2.185-2.198A2.19 2.19 0 0 0 21.75 8.17h-.56l-2.572 4.377 3.113.02ZM6.96 8.19v4.98l7.347-4.98H6.96Zm14.79 13.87h-.715l-6.458 4.376h7.173a2.19 2.19 0 0 0 2.185-2.198 2.198 2.198 0 0 0-2.185-2.178Zm7.018-5.233-5.433 3.696a4.058 4.058 0 0 1 2.456 3.735c0 2.237-1.798 4.065-4.041 4.065h-9.918l-6.747 4.572a.278.278 0 0 1-.136.039.224.224 0 0 1-.232-.234c0-.058.02-.097.039-.136l2.494-4.26H5.317a.236.236 0 0 1-.232-.234v-7.645c0-.136.096-.233.232-.233h8.429c.116 0 .232.097.232.233 0 .059-.02.098-.039.137l-3.944 6.73 13.34-9.065H.232A.224.224 0 0 1 0 17.993c0-.078.039-.156.116-.195l4.988-3.384V6.515c0-.116.116-.213.232-.213h11.716l5.123-3.482L24.901.972c.039-.02.078-.04.136-.04.135 0 .232.098.232.234 0 .039-.02.097-.039.136l-2.939 5.039c1.992.252 3.519 1.964 3.519 4.026 0 2.237-1.798 4.066-4.04 4.066H15.794a.224.224 0 0 1-.232-.233c0-.04.02-.078.02-.117l4.388-7.51L5.55 16.379H28.67c.136 0 .232.098.232.234-.019.097-.058.175-.135.214Z" fill="#fff" /></svg>
+      <a href="https://www.seesparkbox.com">
+        <svg width="29" height="33" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.96 22.058v4.377h1.392l2.571-4.377H6.96Zm14.77-9.493h.02a2.19 2.19 0 0 0 2.185-2.198A2.19 2.19 0 0 0 21.75 8.17h-.56l-2.572 4.377 3.113.02ZM6.96 8.19v4.98l7.347-4.98H6.96Zm14.79 13.87h-.715l-6.458 4.376h7.173a2.19 2.19 0 0 0 2.185-2.198 2.198 2.198 0 0 0-2.185-2.178Zm7.018-5.233-5.433 3.696a4.058 4.058 0 0 1 2.456 3.735c0 2.237-1.798 4.065-4.041 4.065h-9.918l-6.747 4.572a.278.278 0 0 1-.136.039.224.224 0 0 1-.232-.234c0-.058.02-.097.039-.136l2.494-4.26H5.317a.236.236 0 0 1-.232-.234v-7.645c0-.136.096-.233.232-.233h8.429c.116 0 .232.097.232.233 0 .059-.02.098-.039.137l-3.944 6.73 13.34-9.065H.232A.224.224 0 0 1 0 17.993c0-.078.039-.156.116-.195l4.988-3.384V6.515c0-.116.116-.213.232-.213h11.716l5.123-3.482L24.901.972c.039-.02.078-.04.136-.04.135 0 .232.098.232.234 0 .039-.02.097-.039.136l-2.939 5.039c1.992.252 3.519 1.964 3.519 4.026 0 2.237-1.798 4.066-4.04 4.066H15.794a.224.224 0 0 1-.232-.233c0-.04.02-.078.02-.117l4.388-7.51L5.55 16.379H28.67c.136 0 .232.098.232.234-.019.097-.058.175-.135.214Z" fill="#fff" /></svg>
+      </a>


This one is also being flagged in Axe. Could we also add some visually hidden text here please?

jonoliver · 2021-12-01T17:19:38Z

Hey Alice, I disabled Netlify's "drawer" on the preview deploys to get rid of the noise in the html validation. Please see the first 3 issues listed here. Hopefully that helps you track down where the tag mismatch might be.

jonoliver · 2021-12-02T18:27:30Z

Looks good, thank you Alice!

…ttribute (via the next.config.js) References FSA21V2-162

auaruss force-pushed the chore--misc-page-enhancements branch 2 times, most recently from 0ae23f5 to 3a11f3c Compare November 23, 2021 14:19

auaruss requested a review from jonoliver November 23, 2021 14:23

jonoliver requested changes Nov 24, 2021

View reviewed changes

auaruss force-pushed the chore--misc-page-enhancements branch 2 times, most recently from 69d9ebb to 1a39b29 Compare November 29, 2021 16:32

auaruss force-pushed the chore--misc-page-enhancements branch from 292ce3d to 756d6cc Compare December 2, 2021 16:36

jonoliver approved these changes Dec 2, 2021

View reviewed changes

auaruss added 4 commits December 2, 2021 12:33

chore: add some links to Sparkbox icons and an "en" tag to the HTML a…

b954954

…ttribute (via the next.config.js) References FSA21V2-162

chore: add test:snapshot:update command

8f27432

chore: make links accessible

a8ec5f4

fix: validation error

953a183

auaruss force-pushed the chore--misc-page-enhancements branch from 756d6cc to 953a183 Compare December 2, 2021 18:33

changangus merged commit 953a183 into main Dec 2, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore: add some links to Sparkbox icons and an "en" tag to the HTML a…#27

chore: add some links to Sparkbox icons and an "en" tag to the HTML a…#27
changangus merged 4 commits intomainfrom
chore--misc-page-enhancements

auaruss commented Nov 22, 2021

Uh oh!

netlify bot commented Nov 22, 2021 •

edited

Loading

Uh oh!

jonoliver left a comment

Uh oh!

jonoliver Nov 24, 2021

Uh oh!

jonoliver Nov 24, 2021

Uh oh!

jonoliver Nov 24, 2021

Uh oh!

jonoliver commented Dec 1, 2021

Uh oh!

jonoliver commented Dec 2, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

auaruss commented Nov 22, 2021

Description

Spec

To Test

Uh oh!

netlify bot commented Nov 22, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jonoliver left a comment

Choose a reason for hiding this comment

Uh oh!

jonoliver Nov 24, 2021

Choose a reason for hiding this comment

Uh oh!

jonoliver Nov 24, 2021

Choose a reason for hiding this comment

Uh oh!

jonoliver Nov 24, 2021

Choose a reason for hiding this comment

Uh oh!

jonoliver commented Dec 1, 2021

Uh oh!

jonoliver commented Dec 2, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

netlify bot commented Nov 22, 2021 •

edited

Loading