docs: improve a11y and usability for docs homepage - #660
code-sharad wants to merge 3 commits into
Conversation
- add semantic landmarks (header, main, section) for assistive tech - add alt text for Cloudinary App Gallery images - add visible focus-visible styles for keyboard navigation - increase CTA touch targets to 44px - honor prefers-reduced-motion - fix nested anchor in Visit App Gallery button Fixes cloudinary-community#628
|
@code-sharad is attempting to deploy a commit to the Cloudinary DevX Team on Vercel. A member of the Team first needs to authorize it. |
PaulBoye-py
left a comment
PaulBoye-py
left a comment
There was a problem hiding this comment.
hello @code-sharad, the alt text fixes, focus styles, touch targets, reduced-motion support, and nested anchor fix are all good improvements.
One issue: the PR adds a <header> in both _app.mdx (changelog banner) and index.mdx (hero section), resulting in two <header> landmarks on the same page. Consider changing the hero wrapper in index.mdx to <section> instead as the changelog banner <header> in _app.mdx is the more appropriate use of the landmark.
|
@PaulBoye-py Updated — the hero in index.mdx now uses |
This branch has not been deployed
2 participants
Fixes #628
Implemented all acceptance criteria from the issue:
<header>,<main>,<section>) for assistive tech:focus-visiblestyles for keyboard navigationprefers-reduced-motionsupport<a>inside<Button>(invalid HTML on the App Gallery CTA)Files changed:
docs/pages/index.mdxdocs/pages/_app.mdxdocs/styles/global.scssdocs/components/Button/Button.jsVerified locally with
pnpm dev— Tab focus, landmarks, and Lighthouse a11y all check out.