aria-practices icon indicating copy to clipboard operation
aria-practices copied to clipboard

Select-Only Combobox Example: Add click handler to focus combobox when label is clicked

Open jongund opened this issue 2 years ago • 2 comments

Fix issue #2859 by focusing the combobox input when the label is clicked.

Preview Updated Select-only Combobox example

Review checklist

Reviewers: To learn what needs to be covered by each review, Follow the link for the type of review to which you are assigned.



WAI Preview Link (Last built on Tue, 19 Dec 2023 20:30:05 GMT).

jongund avatar Dec 19 '23 20:12 jongund

The ARIA Authoring Practices (APG) Task Force just discussed Fix to make combobox labels clickable.

The full IRC log of that discussion <jugglinmike> Topic: Fix to make combobox labels clickable
<jugglinmike> github: https://github.com/w3c/aria-practices/pull/2889
<jugglinmike> Jem: We need a code reviewer and a functional reviewer
<jugglinmike> Matt_King: It could be the same person
<jugglinmike> Matt_King: This is a very small pull request!
<jugglinmike> Matt_King: I posted a question to the patch
<jugglinmike> Matt_King: I don't know why it changes the "label" element to a "div" element. I don't think it has any practical effect either way, but the "label" element seems more semantically accurate
<jugglinmike> Jem: Hearing no volunteers for review, we'll leave this on the agenda for next week

css-meeting-bot avatar Feb 20 '24 19:02 css-meeting-bot

The ARIA Authoring Practices (APG) Task Force just discussed Fix to make combobox labels clickable.

The full IRC log of that discussion <jugglinmike> Topic: Fix to make combobox labels clickable
<jugglinmike> github: https://github.com/w3c/aria-practices/pull/2889
<jugglinmike> Matt_King: I put this back on the agenda because we were trying to get people to review it last week
<jugglinmike> Matt_King: I also had a question for jongund
<jugglinmike> Matt_King: Previously, the label was in a "<label>" element, and now, the label is in a "<div>" element
<jugglinmike> Matt_King: My question for jongund is: was that change intentional?
<jugglinmike> jongund: It was. To me, the "<label>" element wasn't doing anything. I thought a "<label>" element with an associated event handler might be misleading for folks reading to code
<jugglinmike> Matt_King: In the past, we've advocated for using semantic HTML even in the presense of ARIA because the semantic HTML could act as a sort of fallback for browsers/ATs that don't recognize the ARIA
<jugglinmike> Matt_King: But your thinking is kind of the opposite of that
<jugglinmike> Matt_King: It's a more pedagogical case
<jugglinmike> Matt_King: I could see it either way
<jugglinmike> Jem: As a developer, I'm accustomed to using the semantic elements whenever possible
<jugglinmike> Matt_King: Right, but jongund's point is that the "<label>" doesn't do anything in this case. The "click" handler could be confusing to readers. This is example code that we're considering, after all
<jugglinmike> howard-e: From what I've seen, there are more instances of "<div>" elements being modified to support "click" handlers
<jugglinmike> Jem: I typically write code from a "semantics-first" mindset
<jugglinmike> jugglinmike: I'm thinking about graceful degradation. Are there any implications to this distinction in cases where there is no event handler (because the JavaScript has not executed, for whatever reason)
<jugglinmike> dmontalvo: I'm not convinced that this should be changed from "<label>" to "<div>"
<jugglinmike> jongund: "<label>" is a special thing--it does something when used correctly
<jugglinmike> jongund: In the ARIA spec, the group decided not to have a role named "label" because it wouldn't do anything.
<jugglinmike> jongund: If we say that you should use the "<label>" element here, then all our examples that used "aria-labeledby" had better point to an HTML "<label>" element
<dmontalvo> q+
<jugglinmike> Matt_King: I'll have to do some analysis, but I think jongund's making a pretty solid argument (because I don't think a change like the one he's just described would be an improvement)
<jugglinmike> dmontalvo: Thanks jongund, I wasn't seeing the "aria-labeledby" attribute on the "<div>" element. That's an important aspect!
<jugglinmike> dmontalvo: I withdraw my earlier comment
<jugglinmike> s/labeledby/labelledby/g
<jugglinmike> Jem: Since we're using "aria-labelledby", using a "<label>" element doesn't add any value
<jugglinmike> Jem: Could we maybe add a note as a comment?
<jugglinmike> Matt_King: This is covered by the ARIA documentation
<jugglinmike> Matt_King: So I think jongund is helping us to be more consistent with what's already been done in other examples
<jugglinmike> Matt_King: It sounds like we have consensus
<jugglinmike> Matt_King: We need reviewers on this patch
<jugglinmike> Matt_King: We want a code reviewer and a functional review, and that's it
<jugglinmike> Matt_King: We don't need a test reviewer because this doesn't impact the tests
<jugglinmike> siri: I can perform a functional review with Android
<jugglinmike> Matt_King: Great!
<jugglinmike> Matt_King: And I will re-review based on this conversation today
<jugglinmike> Matt_King: I guess that's enough

css-meeting-bot avatar Feb 27 '24 19:02 css-meeting-bot

The ARIA Authoring Practices (APG) Task Force just discussed Fix to make combobox labels clickable.

The full IRC log of that discussion <jugglinmike> Topic: Fix to make combobox labels clickable
<jugglinmike> github: https://github.com/w3c/aria-practices/pull/2889
<jugglinmike> Matt_King: This is basically ready to ship
<jugglinmike> Matt_King: We're waiting on one more review--Siri was going to test it on mobile
<jugglinmike> Matt_King: Since Siri isn't here, I may send her an e-mail about this

css-meeting-bot avatar Mar 12 '24 18:03 css-meeting-bot

This is working as expected.

shirsha avatar Apr 04 '24 11:04 shirsha