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

Draft combobox design pattern #31

Closed
MichielBijl opened this Issue Apr 29, 2016 · 15 comments

Comments

@MichielBijl
Contributor

MichielBijl commented Apr 29, 2016

Copied from original issue: w3c/aria#349
From @jnurthen on April 25, 2016 17:47

Merge Combo and autocomplete
Rewrite description based on ARIA 1.1 spec definition

When working on this issue, there is some old content that may be useful in the file aria-practices-DeletedSectionsArchive.html.
The relevant sections can be seen here:
https://rawgit.com/w3c/aria-practices/master/aria-practices-DeletedSectionsArchive.html#combobox
And at:
https://rawgit.com/w3c/aria-practices/master/aria-practices-DeletedSectionsArchive.html#autocomplete

@MichielBijl

This comment has been minimized.

Show comment
Hide comment
@MichielBijl

MichielBijl Apr 29, 2016

Contributor

From @jnurthen on April 25, 2016 18:21

Keys:
Space and Alt+Down expand list without changing the value (both optional)
Down (change the selected displayed in the list) and optionally expand the list.

Contributor

MichielBijl commented Apr 29, 2016

From @jnurthen on April 25, 2016 18:21

Keys:
Space and Alt+Down expand list without changing the value (both optional)
Down (change the selected displayed in the list) and optionally expand the list.

@MichielBijl MichielBijl added the APG label Apr 29, 2016

@MichielBijl

This comment has been minimized.

Show comment
Hide comment
@MichielBijl

MichielBijl Apr 29, 2016

Contributor

From @jnurthen on April 25, 2016 18:24

the button needs to be mentioned that it should not be in the tab sequence (probably)

Contributor

MichielBijl commented Apr 29, 2016

From @jnurthen on April 25, 2016 18:24

the button needs to be mentioned that it should not be in the tab sequence (probably)

@MichielBijl

This comment has been minimized.

Show comment
Hide comment
@MichielBijl

MichielBijl Apr 29, 2016

Contributor

From @jnurthen on April 25, 2016 18:27

What does "Provide a label for the combobox by referencing the text field in the combobox. You can use an aria-label to associate this label with the combobox or you may use the HTML element and its for attribute to reference the text field." mean.... needs changing or clarifying.

Contributor

MichielBijl commented Apr 29, 2016

From @jnurthen on April 25, 2016 18:27

What does "Provide a label for the combobox by referencing the text field in the combobox. You can use an aria-label to associate this label with the combobox or you may use the HTML element and its for attribute to reference the text field." mean.... needs changing or clarifying.

@MichielBijl

This comment has been minimized.

Show comment
Hide comment
@MichielBijl

MichielBijl Apr 29, 2016

Contributor

From @carmacleod on April 25, 2016 18:46

Example 5 for combobox in ARIA 1.1 shows the aria-label case, and a similar example with Tag would work for "the HTML element and its for attribute" case.

Contributor

MichielBijl commented Apr 29, 2016

From @carmacleod on April 25, 2016 18:46

Example 5 for combobox in ARIA 1.1 shows the aria-label case, and a similar example with Tag would work for "the HTML element and its for attribute" case.

@MichielBijl MichielBijl removed the APG label Apr 29, 2016

@MichielBijl MichielBijl changed the title from [APG] pattern-combobox to Merge combobox and autocomplete Apr 29, 2016

@mcking65 mcking65 changed the title from Merge combobox and autocomplete to Draft combobox design pattern Aug 13, 2016

@mcking65 mcking65 added this to the 1.1 PR milestone Aug 13, 2016

mcking65 added a commit that referenced this issue Aug 14, 2016

Removed sections that require major rework to fix incorrect guidance.
In addition to the below, This commit also moves the landmark section after the example section.

Moved each of the following sections from aria-practices.html to aria-practices-DeletedSectionsArchive.html
and created associated issues for drafting new versions.
1. Section "General Steps for Building an Accessible Widget with WAI-ARIA" and created issue #73.
2. Section "Other Widget Authoring Practices"., primarily about aria-valuenow, there is no specific need to raise an issue for this section.
3. Section "Relationships" and raised issues #74, #75, #76, and #77.
4. Section "Managing Dynamic Changes" and created issue #78.
5. Section "Presentation Role" and created issue #79.
6. Section "Form Properties" and created issue #80.
7. Section "Drag-and-Drop Support" and created issue #81
8. Section "Math" and created issue #82.
9. Section "Reusable Component Libraries" and created issue #83.
10. The following 4 Appendix sections related to background on ARIA and created issue #84
A. Background on WAI-ARIA
B. Filling the Gaps for Content Delivered to Desktop Browsers
c. Building Accessible Applications with WAI-ARIA
D. Reasons for Adopting WAI-ARIA
11. The following design patterns:
A. Accordion and updated issue #53.
B. Autocomplete and updated issue #31.
C. Combobox and updated issue #31.
D. Datepicker and updated issue #57
E. Dialog (Non-Modal) and updated issue 59.
F. Dialog (Tooltip) and added issue #85.
G. Landmarks and added issue #86.
H. Popup Help (aka Bubble Help) and added issue #87.
I. Rich Text Editor and added issue #88.
j. Site Navigator - General and added issue #89.
K. Site Navigator - Tree and added it to issue #89.
L. Site Navigator - Tabbed Style and added it to issue #89.
M. Tree Grid and added issue #91.
N. Wizard and added issue #92.

This was referenced Aug 15, 2016

tatermelon added a commit to tatermelon/aria-practices that referenced this issue Aug 19, 2016

Removed sections that require major rework to fix incorrect guidance.
In addition to the below, This commit also moves the landmark section after the example section.

Moved each of the following sections from aria-practices.html to aria-practices-DeletedSectionsArchive.html
and created associated issues for drafting new versions.
1. Section "General Steps for Building an Accessible Widget with WAI-ARIA" and created issue #73.
2. Section "Other Widget Authoring Practices"., primarily about aria-valuenow, there is no specific need to raise an issue for this section.
3. Section "Relationships" and raised issues #74, #75, #76, and #77.
4. Section "Managing Dynamic Changes" and created issue #78.
5. Section "Presentation Role" and created issue #79.
6. Section "Form Properties" and created issue #80.
7. Section "Drag-and-Drop Support" and created issue #81
8. Section "Math" and created issue #82.
9. Section "Reusable Component Libraries" and created issue #83.
10. The following 4 Appendix sections related to background on ARIA and created issue #84
A. Background on WAI-ARIA
B. Filling the Gaps for Content Delivered to Desktop Browsers
c. Building Accessible Applications with WAI-ARIA
D. Reasons for Adopting WAI-ARIA
11. The following design patterns:
A. Accordion and updated issue #53.
B. Autocomplete and updated issue #31.
C. Combobox and updated issue #31.
D. Datepicker and updated issue #57
E. Dialog (Non-Modal) and updated issue 59.
F. Dialog (Tooltip) and added issue #85.
G. Landmarks and added issue #86.
H. Popup Help (aka Bubble Help) and added issue #87.
I. Rich Text Editor and added issue #88.
j. Site Navigator - General and added issue #89.
K. Site Navigator - Tree and added it to issue #89.
L. Site Navigator - Tabbed Style and added it to issue #89.
M. Tree Grid and added issue #91.
N. Wizard and added issue #92.
@carmacleod

This comment has been minimized.

Show comment
Hide comment
@carmacleod

carmacleod Dec 8, 2016

Contributor

Please also flesh out the case of a read-only combo box. There's several things to consider:

  • the textbox needs to have aria-readonly="true"
  • the textbox needs to actually be readonly (i.e. if using input type=text, it needs the readonly attribute)
    ... except that it should handle selecting text, or typing text into the textbox as follows:
    "Typing a letter (printable character) key moves focus to the next instance of a visible node whose title begins with that printable letter."

Also please think about about readonly combo boxes that look like/use a button instead of a textbox.
For example I have attached a screen snap of some Windows native readonly comboboxes. The "Theme:" combo does not have focus. The "Color and Font Theme:" combo has focus and is dropped down. Both look and behave like a button with a drop-down arrow (aka "split button"). They do not look like read-only textboxes. The text content cannot be selected.

image

Contributor

carmacleod commented Dec 8, 2016

Please also flesh out the case of a read-only combo box. There's several things to consider:

  • the textbox needs to have aria-readonly="true"
  • the textbox needs to actually be readonly (i.e. if using input type=text, it needs the readonly attribute)
    ... except that it should handle selecting text, or typing text into the textbox as follows:
    "Typing a letter (printable character) key moves focus to the next instance of a visible node whose title begins with that printable letter."

Also please think about about readonly combo boxes that look like/use a button instead of a textbox.
For example I have attached a screen snap of some Windows native readonly comboboxes. The "Theme:" combo does not have focus. The "Color and Font Theme:" combo has focus and is dropped down. Both look and behave like a button with a drop-down arrow (aka "split button"). They do not look like read-only textboxes. The text content cannot be selected.

image

@carmacleod

This comment has been minimized.

Show comment
Hide comment
@carmacleod

carmacleod Dec 8, 2016

Contributor

Example of native readonly comboboxes on Mac (in Settings). These also look and feel more like drop-down (popup) buttons than readonly textboxes.

screenshot 2016-12-08 18 39 35

Contributor

carmacleod commented Dec 8, 2016

Example of native readonly comboboxes on Mac (in Settings). These also look and feel more like drop-down (popup) buttons than readonly textboxes.

screenshot 2016-12-08 18 39 35

@carmacleod

This comment has been minimized.

Show comment
Hide comment
@carmacleod

carmacleod Dec 8, 2016

Contributor

Hmmm... VoiceOver actually calls these "pop up button". So perhaps they are not readonly combos at all... I may have to rethink this.

Although for the native readonly combo Windows example, JAWS says:
"Theme colon combo box, Windows, 3 of 6, to change the selection use the arrow keys".

Anyhow, I think some fleshing out of readonly combobox is needed.

Contributor

carmacleod commented Dec 8, 2016

Hmmm... VoiceOver actually calls these "pop up button". So perhaps they are not readonly combos at all... I may have to rethink this.

Although for the native readonly combo Windows example, JAWS says:
"Theme colon combo box, Windows, 3 of 6, to change the selection use the arrow keys".

Anyhow, I think some fleshing out of readonly combobox is needed.

@cyberseraphic

This comment has been minimized.

Show comment
Hide comment
@cyberseraphic

cyberseraphic Mar 2, 2017

Under "keyboard interaction" can I please request an addition to include what happens when shifting focus away using the Tab key mid-selection - i.e. the combo box retain the currently highlighted selection and the focus shifts to the next focusable element (unlike Enter, where focus is retained on the same element). I understand this to be the standard native behaviour.

Under "keyboard interaction" can I please request an addition to include what happens when shifting focus away using the Tab key mid-selection - i.e. the combo box retain the currently highlighted selection and the focus shifts to the next focusable element (unlike Enter, where focus is retained on the same element). I understand this to be the standard native behaviour.

@MichielBijl

This comment has been minimized.

Show comment
Hide comment
@MichielBijl

MichielBijl Mar 2, 2017

Contributor

@cyberseraphic on macOS tab doesn’t do anything when a popup button is open (like a preventDefault()). Haven’t tested on other platform yet.

Ah, this is combobox, sorry, got confused. @carmacleod those are indeed popup buttons. This would be a native combobox (go to folder in Finder):

Go to folder dialog in macOS’s finder shows a list of options

Contributor

MichielBijl commented Mar 2, 2017

@cyberseraphic on macOS tab doesn’t do anything when a popup button is open (like a preventDefault()). Haven’t tested on other platform yet.

Ah, this is combobox, sorry, got confused. @carmacleod those are indeed popup buttons. This would be a native combobox (go to folder in Finder):

Go to folder dialog in macOS’s finder shows a list of options

@carmacleod

This comment has been minimized.

Show comment
Hide comment
@carmacleod

carmacleod Apr 4, 2017

Contributor

@MichielBijl I guess Mac doesn't exactly have a native read-only combo.

The "read-only combo box" pattern I am trying to describe is like an HTML select element.
Here's an example: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select

If you give focus to an html select, you can:

  • drop down the list with alt+up/down (or space),
  • then select an option with up/down (or first letter),
  • then close the list with alt+up/down (or enter or tab or esc).

But the default ARIA role for an HTML select element is (oddly enough?) "listbox", which doesn't have pop-up behavior.

Sorry, I'm not being very helpful here (just pointing out inconsistencies with no real answers), but I do think it would be useful to add some more thoughts/words to the readonly combobox pattern.

Contributor

carmacleod commented Apr 4, 2017

@MichielBijl I guess Mac doesn't exactly have a native read-only combo.

The "read-only combo box" pattern I am trying to describe is like an HTML select element.
Here's an example: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select

If you give focus to an html select, you can:

  • drop down the list with alt+up/down (or space),
  • then select an option with up/down (or first letter),
  • then close the list with alt+up/down (or enter or tab or esc).

But the default ARIA role for an HTML select element is (oddly enough?) "listbox", which doesn't have pop-up behavior.

Sorry, I'm not being very helpful here (just pointing out inconsistencies with no real answers), but I do think it would be useful to add some more thoughts/words to the readonly combobox pattern.

@stowball

This comment has been minimized.

Show comment
Hide comment
@stowball

stowball Aug 1, 2017

Redesigning the <select> is one of the most common thing that designers do, so having an actual definitive answer of how we should reproduce these in a completely custom style while maintaining full accessibility would be really beneficial. I'm currently struggling with this right now in a project 😞

stowball commented Aug 1, 2017

Redesigning the <select> is one of the most common thing that designers do, so having an actual definitive answer of how we should reproduce these in a completely custom style while maintaining full accessibility would be really beneficial. I'm currently struggling with this right now in a project 😞

@weboverhauls

This comment has been minimized.

Show comment
Hide comment
@weboverhauls

weboverhauls Aug 4, 2017

FYI: This blog post contains a short list of examples of listbox/combobox implementations:
http://www.webaxe.org/accessible-custom-select-dropdowns/

FYI: This blog post contains a short list of examples of listbox/combobox implementations:
http://www.webaxe.org/accessible-custom-select-dropdowns/

@accdc

This comment has been minimized.

Show comment
Hide comment
@accdc

accdc Sep 21, 2017

Matt, I read through the Combobox design pattern intro text as you asked and it all looks good to me as is. I can't think of anything that is missing.

accdc commented Sep 21, 2017

Matt, I read through the Combobox design pattern intro text as you asked and it all looks good to me as is. I can't think of anything that is missing.

mcking65 added a commit that referenced this issue Sep 21, 2017

ARIA 1.1 Combobox Pattern: First Draft with Two Examples (pull #463)
* For issue #31, first draft of the combobox design pattern.
* For issue #100,  first cut of code for ARIA 1.1 style combobox examples with listbox and grid popups. The example pages do not yet include any documentation; example code only.

@mcking65 mcking65 moved this from In Progress to Complete in Combobox Patterns and Examples Development Project Sep 21, 2017

@mcking65

This comment has been minimized.

Show comment
Hide comment
@mcking65

mcking65 Sep 21, 2017

Contributor

Closed with commit a2af4b3. Will now open a new issue for the task force review.

Contributor

mcking65 commented Sep 21, 2017

Closed with commit a2af4b3. Will now open a new issue for the task force review.

@mcking65 mcking65 closed this Sep 21, 2017

@mcking65 mcking65 referenced this issue Sep 22, 2017

Closed

Review combobox design pattern (initial draft) #464

5 of 5 tasks complete
@mcking65

This comment has been minimized.

Show comment
Hide comment
@mcking65

mcking65 Sep 22, 2017

Contributor

Locking comments on this issue; please provide feedback on the current draft in issue #464 or raise a new issue.

Contributor

mcking65 commented Sep 22, 2017

Locking comments on this issue; please provide feedback on the current draft in issue #464 or raise a new issue.

@w3c w3c locked and limited conversation to collaborators Sep 22, 2017

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.