Re: [csswg-drafts] [selectors] :focus-visible matches on initial programmatic focus (#5885)

As a UI developer, I like the current heuristic on paper. It’s simple enough that it can be explained, which helps to a) use it right and b) work around it in edge cases.

But if I understand it right, the specifics of “no focus for clicked buttons” on macOS (WebKit and Firefox) make things much less straightforward when clicking a button then moving the focus programmatically.

Is it correct that it makes it impossible, on macOS, to programmatically move focus to a target element — e.g. the first focusable element in a modal — after a click on a button and have `:focus-visible` NOT apply to that target element?

This could mean that we will have to avoid using `:focus-visible` styles as product owners and QA report bugs with steps-to-reproduce such as:

> 1. Click the button to open a modal.
> 2. The modal shows up on the screen. In the modal, the first button [or link] has a big blue border.
>
> Remove that border.

The only workarounds I can think of all damage accessibility, e.g.:
- do not move focus programmatically (okay in some cases, but it can be required for some tabs or modal patterns);
- or, when moving focus to a target container, remove the focus outline on that target (for all users, including keyboard users);
- or make the focus outline visually subtler (probably making it hard to notice, or using contrast below 3:1).


-- 
GitHub Notification of comment by fvsch
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5885#issuecomment-769988872 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 29 January 2021 19:01:02 UTC