[csswg-drafts] [css-pseudo] Please change the behavior of :focus-within (#5654)

jolleekin has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-pseudo] Please change the behavior of :focus-within ==
## Current behavior

Matches an element that has user focus or contains an element that has user focus

## Expected behavior

Matches an element that contains an element that has user focus

## Reasons

1. The current behavior overlaps with that of `:focus` (non-orthogonal)
2. Consider this nested UI scenario: list view items containing nested buttons. The list view items and the nested buttons are clickable.
    ![](https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/images/nested-ui-navigation.png)

    - When user presses a list view item, the `:active` state should be applied to it
    - When user presses a nested button, the button should be styled as `:active`, but the list view item should not be. With the current behavior of `:focus-within`, this is impossible to achieve. However, if the behavior of `:focus-within` is changed to the expected behavior above, this can be achieved as follows

    ```css
    /* User presses the list view item, not the buttons */
    list-view-item:active:not(:focus-within) {
      background-color: #0006;
    }

    /* User presses a nested button */
    button:active {
      background-color: #0006;
    }
    ```
3. The current behavior can be achieved by combining `:focus` and `:focus-within`

## Refercences

https://drafts.csswg.org/selectors-4/#the-focus-within-pseudo

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5654 using your GitHub account


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

Received on Friday, 23 October 2020 16:45:22 UTC