website icon indicating copy to clipboard operation
website copied to clipboard

Published 20 hours ago • verified publisher icon flutter

Emphasize current OS card on install page

Open parlough opened this issue 1 year ago • 4 comments

I'm not sure we want to pre-navigate to the target page, as then there's the question of how to get back if that's not what they want. What this PR does instead is highlight the current OS's card and auto focuses it on site load. So attention is drawn to the likely correct card and keyboard users can just click enter. I also added some aria labels to make it more clear what the cards are navigating to.

Closes https://github.com/flutter/website/issues/4446

parlough avatar Feb 20 '24 12:02 parlough

Visit the preview URL for this PR (updated for commit 00cfab7fdef3e741d2e8dc4623ef5a50ef22eb1e):

https://flutter-docs-prod--pr10171-feat-emphasize-current-os-o-96yltsd3.web.app

flutter-website-bot avatar Feb 20 '24 12:02 flutter-website-bot

Could this be done without moving focus, perhaps through just styling? Moving the initial focus can be confusing when using a screen reader, even with the added labels.

loic-sharma avatar Feb 20 '24 17:02 loic-sharma

@parlough : This is a nice add, but the issue asks to steer the reader directly to the necessary page. A macOS user would be redirected to https://docs.flutter.dev/get-started/install/macos for example.

If that's not possible, I would agree with @loic-sharma : Maybe just change the style to the aligned OS rather than the focus because that does alter the a11y of the page.

atsansone avatar Feb 20 '24 18:02 atsansone

The issue asks to steer the reader directly to the necessary page. A macOS user would be redirected to https://docs.flutter.dev/get-started/install/macos for example.

This is possible, but then some UI element or text would need to be added near the top of that page to help misdirected users back. The extra clutter doesn't seem worth it to me, but I'd be happy to explore ideas people have.

Moving the initial focus can be confusing when using a screen reader, even with the added labels.

Yeah I was worried about this. Thanks for pushing me away from it. I'll remove the autofocus, which can likely be better handled by a standardized, hidden "Jump to main content" button anyway.

parlough avatar Feb 20 '24 22:02 parlough

Closing this for now. I’ll revisit this with a less intrusive experience soon. Thanks for the feedback!

parlough avatar May 03 '24 14:05 parlough