feat: better screen reader text

[virus-rpi]

Changes:

Added a better way for screen readers to interpret the customer logos on the landing page

Screen reader text before:

image
image
image
image
image
image
image
image

Screen reader text after:

list Our Customers: 8 item
Element 1 of 8: Allianz
Element 2 of 8: Rosenbauer
Element 3 of 8: Media Markt
Element 4 of 8: Saturn
Element 5 of 8: Green City
Element 6 of 8: FC Bayern
Element 7 of 8: Zeiss
Element 8 of 8: ADAC

How to verify:

On Mac:

• Activate VoiceOver with ⌘ Command + fn + F5
• Navigate with ⌃ Control + ⌥ Option + Arrow Key

On Windows:

• Activate Windows Narrator with Windows + Control + Enter
• Navigate with the arrow keys

[netlify]

✅ Deploy Preview for satellytes ready!

Name	Link
🔨 Latest commit	a2fe8dc
🔍 Latest deploy log	https://app.netlify.com/sites/satellytes/deploys/65b7cf263397f900083d912c
😎 Deploy Preview	https://deploy-preview-790--satellytes.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 78 (🔴 down 1 from production) Accessibility: 94 (no change from production) Best Practices: 100 (no change from production) SEO: 86 (no change from production) PWA: 80 (no change from production) View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[virus-rpi]

❌ Deploy Preview for satellytes failed.

Name Link
🔨 Latest commit bf40197
🔍 Latest deploy log https://app.netlify.com/sites/satellytes/deploys/65942c04fbaab80008793c12

The error:

error Building static HTML failed for path "/blog/post/writing-and-enforcing-conventional-commit-messages-and-pull-request-titles/"
const shareImagePath = heroImage.shareImage.resize.src;
WebpackError: TypeError: Cannot read properties of null (reading "resize")

But because i didn't modify anything in the file that causes the error I don't think this was caused by my changes

[georgiee]

An ideal solution would use the actual customer logos, have it in a list structure and then use css to spread them into the visual grid layout.

Your solution is much simpler but creates kind of a duplicated content: one part for the visuals and one part for the screen reads. I think that's good enough for now and better than the previous state anyway.

I approve this PR already but there are two comments you could deliver: a comment and something about the DOM

[virus-rpi]

the failing test is:

Run yarn test:format
yarn test:format
shell: /usr/bin/bash -e {0}
env:
CI: true
yarn run v1.22.21
$ prettier "**/*.{tsx,ts,md}" --check
Checking formatting...
[warn] src/components/layout/seo.tsx
[warn] Code style issues found in the above file. Run Prettier to fix.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Error: Process completed with exit code 1.

but I ran prettier before pushing

[maxmarkus]

Please run yarn format once and check in the changed file. Not sure why it wasn't picked up by the pre-commit hook, but that fixes your issue.
Feel free to merge your PR once its green.