fix: accessibility of the mobile nav bar#7427
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Signed-off-by: Antoine du Hamel <duhamelantoine1995@gmail.com>
canerakdas
left a comment
There was a problem hiding this comment.
When I try it on Safari with VoiceOver on my phone, the Node.js logo is not accessible. Applying the SVG pattern 5 found in the following link seems like a more suitable scenario; https://www.deque.com/blog/creating-accessible-svgs/
I've tried with iOS 18.3 and VoiceOver lets me select the logo, and enabling it does bring me back to the home page. Could you share more details please? |
|
Lighthouse Results
|
|
I believe we can proceed with this PR as is, and then iterate over if needed regarding the VoiceOver issue and possible Radix component from the Input element. |
|
As far as I checked, VoiceOver tries to read all the svg's we use because we did not specify the role as image. I will open a PR to fix these 🤔 ScreenRecording_02-01-2025.23-18-25_1.movI learned something new, thank you for your contribution @aduh95 |
Description
Validation
Navigate to the website with VoiceOver (or TalkBack, or another screen reader) enabled, try to use the navigation menu.
Related Issues
Fixes: #7423
Check List
npm run formatto ensure the code follows the style guide.npm run testto check if all tests are passing.npx turbo buildto check if the website builds without errors.