Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Select-only combobox #1396

Merged
merged 12 commits into from
Jul 1, 2020
Merged

Select-only combobox #1396

merged 12 commits into from
Jul 1, 2020

Conversation

smhigley
Copy link
Contributor

@smhigley smhigley commented May 4, 2020

Resolves #1026 by adding a new select-only combobox example.

NOTE: The build is currently expected to fail; this depends on the es6 PR (#1395) for linting to pass.

Preview link

Review checklist


Preview | Diff

@a11ydoer
Copy link
Contributor

@mcking65 @charmarkk @carmacleod @zcorpan
I apprecite your review by Tuesday morning so that we can merge this soon.

Copy link
Contributor

@charmarkk charmarkk left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A11y Review

Environments:

  • Windows 10 1809, Edge 81.0.416.72, Firefox 76.0.1, Chrome 81.0.4044.138 using NVDA 2020.1 and JAWS 2019.1912.1
    - MacOS Mojave 10.14.6, Safari 13.1 using VoiceOver 9
    @carmacleod is going to check with a more up to date version of MacOS and Safari - it could be because my test machine is out of date (against my will).

In all Windows environments it seemed that screen readers behaved as expected and according to the provided documentation with the example! 🎉 Functionally speaking, I think there are some issues with the Up Arrow and Alt + Down Arrow combinations working with regard to the closed combobox. They don't seem to behave any differently for me than the Down Arrow on its own. Unless I'm misreading or misunderstanding something. That said, I am able to use Home and End appropriately, type characters in quick succession (B O) to skip past items (blueberry, in this case), and Escape out all as expected.

VoiceOver did not want to seem to use Ctrl-Option Space to open the combobox, nor would it announce entries inside the listbox dropdown no matter what I did. It does seem to work as detailed in documentation otherwise, with the same caveat of the Windows side - Up Arrow and Alt + Down Arrow didn't seem to do anything different for me (again, I may be misunderstanding).

@carmacleod
Copy link
Contributor

This is really nice! 🚀
I would be happy for it to go in as-is.
I do have a few notes and questions, but they don't need to hold up merging this PR.

  • should we just delete aria-autocomplete="none" from the code? The property doesn't make sense on a select-only combobox. (and it's not listed in the example's attributes table)
  • should the listbox have a label? (i.e. we use aria-label[ledby] on all of the other combobox examples)
  • should the listbox use ul/li instead of divs? (I think the "progressive enhancement" folks would say yes, but I actually like divs here, because it feels like it's acknowledging that the popup could have been a tree, grid, or dialog instead...)
  • should we mention the places where this diverges from html select behavior? Perhaps in an Accessibility Features section? Yes, the first paragraph does say, "functionally similar to an HTML select element" so we never said it was exactly the same, but maybe we want to explain/justify some of the choices? i.e.
    • select doesn't open the listbox when the user types characters
    • select selects immediately when using arrow keys in listbox, but this only selects on space, enter, or loss of focus, and can therefore be cancelled with esc if someone is just using arrow keys to look at possible values (whereas select value cannot be reverted to previous)
    • select closes the listbox if the combobox is clicked with a mouse (should we do this? i.e. behaves as if listbox lost focus. It feels a bit weird to mouse click on the dropdown arrow twice and have the listbox stay open)
  • down arrow and alt+down arrow seem to work exactly the same, but the keyboard support notes for them are different?
  • maybe the listbox needs to be a couple of pixels longer to accommodate the bottom of the focus indicator when the last item has visual focus. (only tried in Chrome)
  • a couple of sentences in the attributes table mention input:
    • "Identifies the input as a combobox" --> maybe change input to element?
    • "Enables assistive technologies to know which element the application regards as focused while DOM focus remains on the input element." --> maybe change input to combobox?
  • there are 4 instances of the word "textbox" - should they be changed to "combobox"?

Note: I have only tested in Windows/Chrome so far. I plan to finish testing on other browsers later today, but as I am out of time for now, I thought I'd better get these comments out sooner rather than later.

@a11ydoer
Copy link
Contributor

a11ydoer commented May 12, 2020

We need to confirm about 'active decendant' would work in VO and Google Chrome Canary.
@carmacleod will check with VO and Safari in recent MacOS version.

@css-meeting-bot
Copy link
Member

The ARIA Authoring Practices (APG) Task Force just discussed Select-only combobox example.

The full IRC log of that discussion <Jemma> Topic:Select-only combobox example
<MarkMccarthy> https://github.com//pull/1396
<Jemma> https://raw.githack.com/w3c/aria-practices/select-only-combo/examples/combobox/combobox-select-only.html
<jamesn> regrets+
<carmacleod> mck: nothing starts with "be" so if I type "be", it just goes to "banana"
<carmacleod> mck: so this is feeling really nice now
<carmacleod> carmacleod: it feels good to me also
<carmacleod> carmacleod: MarkMccarthy reviewed screen readers and says it doesn't work with VO
<Jemma> brian:there was a report regarding VO that active descendant does not work well.
<MarkMccarthy> github: https://github.com//pull/1396
<carmacleod> MarkMccarthy: right, the "control+option" keys don't work
<Jemma> s/well/reliably
<carmacleod> bryan_garaventa: that may be aria-activedescendant?
<carmacleod> mck: it's working great with JAWS and NVDA
<carmacleod> mck: need to also try aaron's change in canary to see if acc_value support works
<carmacleod> curt: click to open and click again should close
<carmacleod> mck: yes, we should support that because it's expected behavior
<Jemma> https://github.com//pull/1396#issuecomment-627433935
<Jemma> car: autocomplete discussion
<Jemma> do we need autocomplete for select only example?
<Jemma> it is not editable
<Jemma> mck: we can consider that autocomplete= none can type the letter but it does not change nor add things
<Jemma> mck: let's remove autocomplete=none from the example
<Jemma> car: should the listbox have a label? (i.e. we use aria-label[ledby] on all of the other combobox examples)?
<Jemma> group agreed to add the label.
<Jemma> like "fruit"
<Jemma> car:should the listbox use ul/li instead of divs? (I think the "progressive enhancement" folks would say yes, but I actually like divs here, because it feels like it's acknowledging that the popup could have been a tree, grid, or dialog instead...)
<Jemma> car: I am asking making list box dive as ul/li
<Jemma> mck: in case of grid, there is inheritance for ul/li under div or there is difference between using tr/td
<carmacleod> mck: leaning towards leaving this as divs
<Jemma> car:should we mention the places where this diverges from html select behavior? Perhaps in an Accessibility Features section? Yes, the first paragraph does say, "functionally similar to an HTML select element" so we never said it was exactly the same, but maybe we want to explain/justify some of the choices? i.e.
<Jemma> mck: adding accessibility feature sounds like a good idea.
<MarkMccarthy> s/box dive /box div /
<Jemma> mck: I like the feature that it keeps the value evn when it is closed.
<Jemma> s/evn/even
<Jemma> car: we can document at alt up arrow
<Jemma> at design pattern
<Jemma> mck: we also add those to change request in the example as part of accessiblity feature
<Jemma> car:down arrow and alt+down arrow seem to work exactly the same, but the keyboard support notes for them are different?
<Jemma> brian: in my example, I made down arror and alt down works the same way.
<Jemma> it is kind of fall back feature.
<Jemma> mck: down arrow goes back to last selection when it closes and it opens, not first option.
<Jemma> s/opens/opens again
<Jemma> brian: alt down arrow tend to shows all the list items.
<Jemma> the rest of comments from Car was agreed on.
<Jemma> car will request changes in pr.

@carmacleod
Copy link
Contributor

Tested in VoiceOver on macOS Catalina 10.15.4 (latest) in Safari 13.1.

I agree with @charmarkk that the combobox is not very usable in VO/Safari. It doesn't open with VO+Space, and the items are not read on up or down arrow.

I can force it to work if I open the combobox with down arrow (or alt+down arrow), then use VO+right arrow to navigate to the listbox and VO+Shift+down arrow to go into the listbox; then I can use VO+right/left to go through the combobox items, and select an item with VO+Space. But I doubt many VO users would fight with it that long, particularly as it is silent when the listbox is first opened.

Looking back at the testing notes for the editable combobox examples, I see the following:

From @smhigley in #1255 (review)

  • macOS + VoiceOver: the suggested "open" keyboard command does not work (Caps + Space), though Option + down arrow does
  • macOS + VoiceOver: although everything but Caps+ Space worked for me in 10.14, @jnurthen reported that 10.15 did not work; someone else with Catalina should probably officially test this.

Reply from @mcking65 in #1255 (comment)

My system is still 10.4.6, and it works for me too. We will need to continue this testing prior to APG 1.2 R1.

From @carmacleod in #1255 (comment)

VoiceOver+Safari on macOS Catalina 10.15.1

  • VO does not read the list items in the autocomplete=list or autocomplete=none or grid examples in Safari. These 3 examples are completely unusable in VO+Safari on Catalina.
  • However, VO does read list items in the autocomplete=both example
  • VO+space does not open the list in Safari (for any example)

Reply from: @mcking65 in #1255 (comment)

  • VO does not read the list items in the autocomplete=list or autocomplete=none or grid examples in Safari. These 3 examples are completely unusable in VO+Safari on Catalina.

The fact that they do work in 10.14.6 does not necessarily implicate Safari, but kind of points in that direction. @accdc has some different implementations of the same pattern we could test with 10.15. Apple may have implemented overly restrictive processing of aria-activedescendant, overlooking the fact that the ARIA spec supports activedescendant on a text input or combobox that controls an element that also supports activedescendant.

  • However, VO does read list items in the autocomplete=both example

This is almost certainly because of the inline selection.

  • VO+space does not open the list in Safari (for any example)

VO-space is supposed to be equivalent to a mouse click on the element in the VO cursor. Given that, does VO announcing that VO-space should open the popup make sense?

Reply from @carmacleod (today):

I don't know whether VO announcing that VO+Space opens an editable combobox popup makes sense or not, but note that VO+Space doesn't open the select-only combobox either, and mouse click does.

Aside: We should also test select-only combobox with iOS VoiceOver, because I notice that we opened #1267 for the editable comboboxes.


@cookiecrook We seem to be having trouble getting our ARIA 1.2 comboboxes to work well in macOS Catalina VoiceOver in Safari. They work well in the usual Windows pairings, and in VO/Chrome, so Safari would seem to be the most likely suspect... :)

There's a possibly-relevant webkit bug for the option items not being read.
There's also an ancient but possibly-relevant webkit bug about VO+Space not working in select.

Here a couple of ARIA 1.2 comboboxes (i.e. aria-controls points to listbox; aria-owns is not used):

  1. editable combobox with autocomplete=list
  2. select-only combobox

Does anything stand out to you?

@carmacleod
Copy link
Contributor

carmacleod commented May 13, 2020

Notes from today's call:

(I won't commit anything, because @smhigley has uncommitted changes and I don't want to create conflicts... so I'll create a "to do list")

  • delete aria-autocomplete="none" from the code

    • the definition of aria-autocomplete="none" in the spec doesn't really fit (i.e. we'd need a new value token or something):

      When a user is providing input, an automatic suggestion that attempts to predict how the user intends to complete the input is not displayed.

  • Add aria-label="Fruits" to the listbox

    • also add to attributes table
    • the other combobox examples all have aria-label[ledby]
    • example: in the case of the autocomplete none example, the combobox label is "Search", and the listbox label is "Previous Searches".
NVDA reads the listbox label
Search combo box collapsed editable
blank
[down arrow]
expanded
Previous Searches list
weather 1 of 11
[down arrow]
salsa recipes 2 of 11
JAWS reads the listbox label
Search edit combo collapsed
To set the value use the Arrow keys or type the value.
[down arrow]
Previous Searches List box
weather
1 of 11
To move to an item press the Arrow keys.
[down arrow]
salsa recipes
2 of 11
  • should the listbox use ul/li instead of divs?

    • no, don't bother... we have a philosophy of "use native semantics that most closely matches", but there's no real advantage here.
  • mention the places where this diverges from html select behavior in an Accessibility Features section:

    • select doesn't open the listbox when the user types characters
      • beneficial to see what is in list box
    • select selects immediately when using arrow keys in listbox, but this only selects on space, enter, or loss of focus, and can therefore be cancelled with esc if someone is just using arrow keys to look at possible values (whereas select value cannot be reverted to previous)
      • the ability to cancel is a great accessibility feature
  • close the listbox if it is open and the combobox is clicked with a mouse (i.e. clicking twice on combobox opens and then closes. This is what select does, and it is expected behavior).

  • down arrow and alt+down arrow work exactly the same, but the keyboard support notes for them are different

    • update notes so that both go to current value, not first value
  • listbox needs to be a couple of pixels longer to accommodate the bottom of the focus indicator when the last item has visual focus. (only seen in Chrome)

  • "Identifies the input as a combobox" --> change "input" to "element"

  • "Enables assistive technologies to know which element the application regards as focused while DOM focus remains on the input element." --> change "input" to "combobox"

  • change 4 instances of the word "textbox" to "combobox"

  • document that alt+up arrow works like enter - saves value

  • document pageup and pagedown

@a11ydoer
Copy link
Contributor

a11ydoer commented May 13, 2020

@carmacleod
Your thorough research on previous comments and issues are awesome!
Also thanks so much for the notes from yesterday's meeting. To be somewhat helpful to all your great work, I added a minor info.

update notes so that both go to current value, not first value

This refer to the case when a user closes select and reopen it. The focus goes back to last selected value, not the first item in the list.

@smhigley
Copy link
Contributor Author

@carmacleod thanks for the thorough notes! My latest update added tests and fixed a few of the items you had listed.

I can't repro the Chrome outline/pixel thing you mentioned, so may need to ask you about that separately. I also did some digging on listbox labeling that I'll bring to the next meeting :)

I added some keyboard docs so I could target them with tests, but they likely still need wordsmithing. I'm taking off the "WIP" designation though.

Thanks again!

@smhigley smhigley changed the title Select-only combobox (WIP) Select-only combobox May 21, 2020
Opens the listbox and moves visual focus to the last option.
</td>
</tr>
<tr data-test-id="standard-single-line-editing-keys">
Copy link
Contributor

@carmacleod carmacleod May 21, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

might want to change this test id to "printable-characters" because it looks like the test was re-purposed but not renamed?

Suggested change
<tr data-test-id="standard-single-line-editing-keys">
<tr data-test-id="printable-characters">

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

actually it looks like this keyboard interaction is covered by tests with the data-test-id="listbox-key-char". Right now, the regression report says there are no tests for this data-test-id but there are. @smhigley, maybe you should give both of these the same data-test-id, such as printable-characters, and update the test reference as well?

@carmacleod
Copy link
Contributor

@smhigley In case it's helpful, here's a screen snap showing what I mean about the focus indicator being clipped on the bottom. I can get this just typing down arrows until the list scrolls. Chrome 83.0.4103.61:

side-by-side screen snaps showing both complete and clipped focus indicator

@cookiecrook
Copy link

cookiecrook commented Jun 2, 2020

@cookiecrook We seem to be having trouble getting our ARIA 1.2 comboboxes to work well in macOS Catalina VoiceOver in Safari. They work well in the usual Windows pairings, and in VO/Chrome, so Safari would seem to be the most likely suspect... :)

There's a possibly-relevant webkit bug for the option items not being read.

Those examples work most of the time for me... I was able to find a timing edge case that might be causing the trouble you're experiencing. I linked it to the first bug report you mentioned. I don't think the second bug report is related.

The gist of the remaining bug is that is you arrow down right as a different speech announcement is being spoken (e.g. verbose hints or word echo, which most VO users turn off), the combobox selection change announcement is getting trampled. I'll escalate that one. Thanks!

Update: It turned out to be two bugs: Radar 63849438 for the editable example above, and Radar 63990772 for the select-only example.

@carmacleod
Copy link
Contributor

@smhigley I noticed one more functional issue. (sorry!)

Steps:

  • Windows Chrome, Windows FF or macOS FF (issue does not occur in other browsers)
  • go to the select-only combobox preview
  • tab to the combo
  • drop down the combo
  • type tab again
  • combo closes (good) but focus (document.activeElement) goes to body (not good)
  • issue: from here, you can't drop down the combo again

I think this should be fixed, because I'm guessing that some users will try using the tab key to navigate to options in the dropdown, and those users would trip over this issue, and get confused when they can't reopen the combobox.

I believe the desired behavior is to focus the combo after closing the dropdown (because that's what most selects do), however, I suppose it would be ok to focus the next element in the tab order.

Note that shift+tab in the example focuses the previous element in the tab order after closing, whereas selects focus the select after closing (i.e. consistent with their forward tab behavior).

The native select behavior mentioned above (i.e. tab closes and then refocuses select) was observed in Windows Chrome, Edge, and Windows & macOS Firefox.

Safari and macOS Chrome do nothing when the user types tab (or shift+tab) in an open select (which feels a bit "trappy", but I guess the user can type enter or escape to close, or even... space?!).

@smhigley
Copy link
Contributor Author

smhigley commented Jun 8, 2020

@carmacleod never apologize for finding a functional bug! 😄

I had actually thought I'd already included a fix for that one, but it looks like I forgot to commit & push 🤦‍♀️.

The root cause is Firefox puts any region with scroll overflow into the tab order, so tabbing sends you into the listbox immediately before it is hidden. The fix I did was to simply make the listbox un-tabbable (since it seems like it really shouldn't be), which means that tab would take you to the next item in the focus order after the combobox.

Are you OK with that solution? It seems kinda more intuitive to me, even though the native Windows select keeps you on the <select>. Keeping focus on the same element after a tab just feels kinda weird to me somehow 🤷‍♀️

@carmacleod
Copy link
Contributor

tab would take you to the next item in the focus order after the combobox. ... Keeping focus on the same element after a tab just feels kinda weird to me somehow

I think that would be ok... but we have to wonder why the native controls have the "stay in place" behavior. Maybe some users got confused about whether or not the current item in the list (i.e. at the time they typed tab) became the select's value? i.e. Keeping them on the select would allow them to review the select's value?

Just bouncing thoughts around, I'm guessing that staying on the combo could be important in a multi-select combobox if the user wants to review the chosen values after closing the popup?

Yet another subtle behavior where real user data would be so valuable. :)

Anyhow, the current behavior is broken, so yes, please push the fix to go to the next (previous) item in the tab order on tab (shift+tab), and we can discuss with the group whether we want to keep the "traverse onward" behavior or change it to "stay in place" behavior.

@smhigley
Copy link
Contributor Author

smhigley commented Jun 9, 2020

@carmacleod I figured out what happened with the tabbing thing and tests -- somehow I managed to not push up either commit, which is what I get for working on the same PR across two computers 😆🤦

@mcking65 the note about tabbing has been added to the keyboard behavior section now :)

@carmacleod
Copy link
Contributor

working on the same PR across two computers

Heh heh - yep. Our old "IDE in the Cloud" would've fixed that problem, but it was before its time. ;)

Copy link
Contributor

@carmacleod carmacleod left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Happy with this now! Looks great, @smhigley !

@mcking65 mcking65 requested review from spectranaut and removed request for zcorpan June 25, 2020 08:23
Copy link
Contributor

@spectranaut spectranaut left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is an approval of the tests requesting three changes, left in comments! Two tests are missing and two data-test-ids should be updated.

Otherwise, the tests are incredibly thorough and readable, good work!

examples/combobox/combobox-select-only.html Show resolved Hide resolved
Opens the listbox and moves visual focus to the last option.
</td>
</tr>
<tr data-test-id="standard-single-line-editing-keys">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

actually it looks like this keyboard interaction is covered by tests with the data-test-id="listbox-key-char". Right now, the regression report says there are no tests for this data-test-id but there are. @smhigley, maybe you should give both of these the same data-test-id, such as printable-characters, and update the test reference as well?

examples/combobox/combobox-select-only.html Show resolved Hide resolved
Copy link
Contributor

@mcking65 mcking65 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Approving editorial content.

Other than a couple minor revisions to the intro that I already pushed commits to resolve, everything looks great!

Co-authored-by: Carolyn MacLeod <Carolyn_MacLeod@ca.ibm.com>
@mcking65 mcking65 merged commit 5075025 into master Jul 1, 2020
@mcking65 mcking65 deleted the select-only-combo branch July 1, 2020 00:19
michael-n-cooper pushed a commit that referenced this pull request Jul 1, 2020
Add example of select-only combobox (pull #1396)

Resolves issue #1026 by adding a new select-only combobox example.

Co-authored-by: Valerie Young <valerie@bocoup.com>
Co-authored-by: Matt King <a11yThinker@gmail.com>
Co-authored-by: Carolyn MacLeod <Carolyn_MacLeod@ca.ibm.com>
@JAWS-test
Copy link

JAWS-test commented Jul 2, 2020

https://w3c.github.io/aria-practices/examples/combobox/combobox-select-only.html:

JAWS and NVDA do not output the select-only combobox value in Firefox and Chrome. This is because the value is not passed to the Accessibility API, as shown by inspection with inspect.exe or aViewer. The problem cannot be solved with the current ARIA specification. To do so, we would have to allow aria-valuetext on more elements, as I have been suggesting for a long time (w3c/aria#711). The only solution that is currently possible would not be to use a div, but an input for the select-only combobox.

Further test results with JAWS 2020: FreedomScientific/standards-support#399

@mcking65
Copy link
Contributor

mcking65 commented Jul 2, 2020

@JAWS-test wrote:

https://w3c.github.io/aria-practices/examples/combobox/combobox-select-only.html:

JAWS and NVDA do not output the select-only combobox value in Firefox and Chrome. This is because the value is not passed to the Accessibility API, as shown by inspection with inspect.exe or aViewer.

Correct, this is a browser issue.

The problem cannot be solved with the current ARIA specification. To do so, we would have to allow aria-valuetext on more elements, as I have been suggesting for a long time (w3c/aria#711).

Not correct. The requirement to expose the value is in ARIA 1.2. It is implemented in Chrome Canary. I think the WebKit fix is also in progress. Not sure if Gecko is started yet. See ARIA PR 1225

We opted not to re-write valuetext for now; that is pretty complex, and not as useful from an implementation perspective.

The only solution that is currently possible would not be to use a div, but an input for the select-only combobox.

There is a flavor of select-only that could be implemented that way, but it is much, much more complex because we have to avoid using the readonly attribute.

@mcking65 mcking65 deleted the select-only-combo branch July 2, 2020 14:41
@carmacleod
Copy link
Contributor

@JAWS-test

We need the APG examples to follow the spec. If someone needs this to work in older browsers, they can implement a work-around using aria-labelledby with multiple ids, something like the following (also would need a little bit of tweaking of the javascript to ensure that the value content is being set in the combo1-value element):

<div id="combo1" class="combo-input" tabindex="0"
        role="combobox" aria-haspopup="listbox" aria-controls="listbox1"
        aria-labelledby="combo1-label combo1-value" 
        aria-expanded="false" aria-activedescendant="">
                <div id="combo1-value">Apple</div>
</div>

@JAWS-test
Copy link

@mcking65 Sorry, I forgot ARIA PR 1225
@carmacleod This workaround is already used by many frameworks. Whenever I see it in a WCAG test, I do not accept it and notice a violation of the WCAG. Reason: Label and value are different things and must be perceived individually with AT, because otherwise the AT user cannot know what label and value are

maschad96 pushed a commit to maschad96/aria-practices that referenced this pull request Jul 21, 2020
Resolves issue w3c#1026 by adding a new select-only combobox example.

Co-authored-by: Valerie Young <valerie@bocoup.com>
Co-authored-by: Matt King <a11yThinker@gmail.com>
Co-authored-by: Carolyn MacLeod <Carolyn_MacLeod@ca.ibm.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Develop example of select-only combobox
9 participants