w3c / w3c/csswg-drafts

[css-nav-1] Searching within element can cause unintuitive behavior.

Open
#3,989 3 comments 0 reactions 1 assignee View on GitHub

@jihyerish is already working on this.

Since May 30, 2019.

css-spatial-nav-1
Dominant language
Bikeshed
Stars
4.9k
Forks
816
PR merge metrics
PR metrics pending

Description

Sorry, I can't find where in the spec is responsible but this pertains to changes landed in Chrome in https://chromium-review.googlesource.com/c/chromium/src/+/1587559

(This change JunHo mentioned on the review this change conforms to the spec)

However, this can lead to issues when clickable items are contained inside other clickable items. For example, it's a common pattern to do something like this:

<a>
<button>Menu Item</button>
</a>

Both the and the are considered for Spat Nav but they're the same size. The practical effect is that it requires multiple navigations to move between menu items. e.g. See https://m.youtube.com/watch?v=eKhv9CnA6A0 using mobile emulation.

Another pattern I'm told is common is to wrap a common action in an ancestor click handler:

<a onclick="dismissPopup();">
<button>Confirm</button>
<button>Cancel</button>
</a>

This leads navigation to select an invisible wrapper around both buttons which looks awkward.

Not sure how much we can do about the latter in particular but we may want to investigate some heuristics to prevent, e.g. selecting multiple candidates that overlap almost exactly.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.