-
Notifications
You must be signed in to change notification settings - Fork 344
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
Select-only combobox #1396
Conversation
@mcking65 @charmarkk @carmacleod @zcorpan |
There was a problem hiding this 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).
This is really nice! 🚀
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. |
We need to confirm about 'active decendant' would work in VO and Google Chrome Canary. |
The ARIA Authoring Practices (APG) Task Force just discussed 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. |
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)
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
Reply from: @mcking65 in #1255 (comment)
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.
This is almost certainly because of the inline selection.
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. Here a couple of ARIA 1.2 comboboxes (i.e. aria-controls points to listbox; aria-owns is not used): Does anything stand out to you? |
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")
NVDA reads the listbox labelSearch 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 labelSearch 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
|
@carmacleod
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. |
b6c52aa
to
4bd2b90
Compare
@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! |
Opens the listbox and moves visual focus to the last option. | ||
</td> | ||
</tr> | ||
<tr data-test-id="standard-single-line-editing-keys"> |
There was a problem hiding this comment.
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?
<tr data-test-id="standard-single-line-editing-keys"> | |
<tr data-test-id="printable-characters"> |
There was a problem hiding this comment.
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?
@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: |
4bd2b90
to
47fd12b
Compare
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. |
@smhigley I noticed one more functional issue. (sorry!) Steps:
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?!). |
@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 |
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. |
@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 :) |
Heh heh - yep. Our old "IDE in the Cloud" would've fixed that problem, but it was before its time. ;) |
There was a problem hiding this 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 !
There was a problem hiding this 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!
Opens the listbox and moves visual focus to the last option. | ||
</td> | ||
</tr> | ||
<tr data-test-id="standard-single-line-editing-keys"> |
There was a problem hiding this comment.
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?
cabdfee
to
59dfe64
Compare
There was a problem hiding this 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>
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 |
@JAWS-test wrote:
Correct, this is a browser issue.
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.
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. |
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> |
@mcking65 Sorry, I forgot ARIA PR 1225 |
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>
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