fix(footer): make SVG accessible

[shortcuts]

Summary

After feedbacks from https://twitter.com/SaraSoueidan/status/1491487611831173131, this PR aims at making the footer SVGs accessible.

keys or the Algolia logo or were not announced by screen readers, this should fix it but I'm not sure if it's the most optimal way to do it.

[netlify]

✔️ Deploy Preview for docsearch ready!

🔨 Explore the source changes: d05c341

🔍 Inspect the deploy log: https://app.netlify.com/sites/docsearch/deploys/6214a49be8279f00087411fe

😎 Browse the preview: https://deploy-preview-1306--docsearch.netlify.app

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit d05c341:

Sandbox	Source
Vanilla	Configuration

[bodinsamuel]

Not entirely sure it's relevant to make the svg accessible if we have a better describe somewhere else.
Not an expert though, maybe @SaraSoueidan has feedbacks on this? ☺️

[SaraSoueidan]

• You could have visually-hidden text. Providing alt text (or a label, in this case) for the SVGs is simple, so you could do that using aria-label.
• Another option could be something like this (for the Algolia icon):

<svg width="" height="" viewBox="" aria-hidden="false"></svg>
<span class="visually-hidden">Algolia</span>

That said, I do prefer adding a label to the SVG in this case to match the visual experience with the SR experience. You'll want to remember to add role="img" to the svg which has a label.

• You don't need focusable="false". This attribute is useful when you have an SVG inside a button for example, and you want the SVG to not be focusable because if it is then the button will end up having two tab stops. (This was mainly an issue in IE.)

[shortcuts]

Thanks for the reply and advices @SaraSoueidan! I've actually used your blog article to pick between the multiple solutions :D

You'll want to remember to add role="img" to the svg which has a label.

Ok so if I understand correctly, the role will only be announced by the SR when the actual element is selected. In that case, when selecting the SVG only and not the list item. Added it!

You don't need focusable="false"

I've removed it from the logo and it indeed does not changed the SR/tabs behaviors.