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.

Sign up for GitHub

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

Jump to bottom

Combobox examples: missing description about the id attribute #785

Closed
spectranaut opened this issue Jul 19, 2018 · 3 comments · Fixed by #1276
Closed

Combobox examples: missing description about the id attribute #785

spectranaut opened this issue Jul 19, 2018 · 3 comments · Fixed by #1276
Assignees
@spectranaut
Labels
bug Code defects; not for inaccurate prose Inaccuracy Incorrect statement in prose (not a code bug) regression-testing Related to AVA regression tests of example pages or AVA framework implementation within repo
Projects
Combobox Patterns and Examples Develo...
Milestone
1.2 Release 1

Comments

@spectranaut
Copy link
Contributor

The description for row id="string" in the textbox Role, Property, State, and Tabindex Attributes table is unclear to me.

It says "Referenced by for attribute of label element to provide an accessible label."

The second two examples do no have a "for" attribute on their "label" elements, they instead have "aria-labelledby" on their textbox.
@spectranaut spectranaut created this issue from a note in Regression Test Development (To do) Jul 19, 2018
@mcking65 mcking65 added bug Code defects; not for inaccurate prose Example Page Related to a page containing an example implementation of a pattern regression-testing Related to AVA regression tests of example pages or AVA framework implementation within repo labels Jul 20, 2018
@mcking65
Copy link
Contributor

Potentially related to issue #542.

@spectranaut spectranaut mentioned this issue Aug 16, 2018
Merged
@mcking65 mcking65 added documentation Inaccuracy Incorrect statement in prose (not a code bug) and removed Example Page Related to a page containing an example implementation of a pattern labels Dec 9, 2019
@mcking65 mcking65 added this to Next Steps in Combobox Patterns and Examples Development Project via automation Dec 9, 2019
@mcking65 mcking65 added this to the 1.2 Release 1 milestone Dec 9, 2019
@carmacleod
Copy link
Contributor

I had a look at this issue, using the preview links from PR #1276:

All 3 examples now use an HTML label with a for attribute, so there's no longer any use or mention of aria-labelledby (which is good).

However, the "Role, Property, State, and Tabindex Attributes" table no longer lists the id for the combobox's text input.

Perhaps it should? Maybe something similar to the id row in the grid-combo example:

Role Attribute Element Usage
combobox id="string" input[type="text"] - Referenced by for attribute of label element to provide an accessible name. - Recommended naming method for HTML input elements because clicking label focuses input.

@spectranaut Would adding that row help clarify the 3 previews from PR #1276?

@carmacleod carmacleod mentioned this issue Feb 5, 2020
Closed
zcorpan added a commit that referenced this issue Feb 13, 2020
@zcorpan
Add information about the id attribute for all combobox examples; fixes
baf2bed 
#785
@zcorpan zcorpan changed the title Bug in examples: textbox "id" test for combobox/aria1.1pattern/listbox-combo.html Combobox examples: missing description about the id attribute Feb 13, 2020
@jongund jongund mentioned this issue Feb 13, 2020
Merged
6 tasks
@zcorpan
Copy link
Member

zcorpan commented Feb 13, 2020

Fixed in #1276

@mcking65 mcking65 linked a pull request Feb 14, 2020 that will close this issue
Combobox Examples with listbox popup: Fix Escape behavior, mouse interaction, visual design, and more #1276
Merged
6 tasks
Combobox Patterns and Examples Development Project automation moved this from Next Steps to Complete Feb 14, 2020
mcking65 added a commit that referenced this issue Feb 14, 2020
@jongund @carmacleod
@mcking65 @spectranaut @zcorpan
Combobox Examples with listbox popup: Fix Escape behavior, mouse inte…
85085b2 
…raction, visual design, and more (pull #1276)

Fixes #785, #982, #983, #988, #1261, #1265, and #1268 with the following changes:
* updated JavaScript to use single prototype
* updated escape key behavior
* removed unused files
* fixed regression issues for escape key
* updated tests for single and double escape key tests
* fixed focus bug on enter and removed use of keycode property
* fixed bug in opening list and improved property names for visual focus flags
* fixed bug in opening list with alt key pressed
* fixed bug with enter key not updating aria-expanded
* fixed bugs with down arrow
* added documentation and tests for ALT Down Arrow
* fixed some styling bugs
* Use only one SVG image to show listbox state
* updated CSS for styling listbox focus
* fixed scrolling issue in listbox
* adjusted position of svg image button
* fixed onclik bug where not selecting options when autocomplete is list or none
* updated test for autocomplete, list and none
* fixed bug with onclick behavior and documented option filtering as users type
* updated documentation about filtering of options
* Typo: character -> characters
* fixed option filter bug with autocomplete=none
* improved description of when listbox opens
* use lowercase "the" in sentence
* Minor editorial revision to alt+down in textbox keyboard table
* udpated test file to check for aria-selected on option when listbox opens
* fixed aria-selected tests
* add tests for aria-selected to key down tests
* Add aria-hidden=false and focusable=false to svg in button
* Use fewer descendant combinators in selectors
* Call function instead of setting a property on elements
* Don't call setValue() when hitting backspace, to avoid moving the cursor to the end
* Remove superfluous isPrintableCharacter() call
* Remove unused variable textContent
* Declare option outside for loop. Also use null instead of false
* Set scrollTop once
* Declare index variable in the if block
* Move isPrintableCharacter to ComboboxAutocomplete.prototype
* Add information about the id attribute for all combobox examples; fixes #785

Co-authored-by: Carolyn MacLeod <Carolyn_MacLeod@ca.ibm.com>
Co-authored-by: Matt King <a11yThinker@Gmail.com>
Co-authored-by: Valerie Young <spectranaut@gmail.com>
Co-authored-by: Simon Pieters <zcorpan@gmail.com>
michael-n-cooper pushed a commit that referenced this issue Feb 14, 2020
@carmacleod @mcking65
@spectranaut @zcorpan
Generated by TRAVIS-CI 85085b2
238537c 
Combobox Examples with listbox popup: Fix Escape behavior, mouse interaction, visual design, and more  (pull #1276)

Fixes #785, #982, #983, #988, #1261, #1265, and #1268 with the following changes:
* updated JavaScript to use single prototype
* updated escape key behavior
* removed unused files
* fixed regression issues for escape key
* updated tests for single and double escape key tests
* fixed focus bug on enter and removed use of keycode property
* fixed bug in opening list and improved property names for visual focus flags
* fixed bug in opening list with alt key pressed
* fixed bug with enter key not updating aria-expanded
* fixed bugs with down arrow
* added documentation and tests for ALT Down Arrow
* fixed some styling bugs
* Use only one SVG image to show listbox state
* updated CSS for styling listbox focus
* fixed scrolling issue in listbox
* adjusted position of svg image button
* fixed onclik bug where not selecting options when autocomplete is list or none
* updated test for autocomplete, list and none
* fixed bug with onclick behavior and documented option filtering as users type
* updated documentation about filtering of options
* Typo: character -> characters
* fixed option filter bug with autocomplete=none
* improved description of when listbox opens
* use lowercase "the" in sentence
* Minor editorial revision to alt+down in textbox keyboard table
* udpated test file to check for aria-selected on option when listbox opens
* fixed aria-selected tests
* add tests for aria-selected to key down tests
* Add aria-hidden=false and focusable=false to svg in button
* Use fewer descendant combinators in selectors
* Call function instead of setting a property on elements
* Don't call setValue() when hitting backspace, to avoid moving the cursor to the end
* Remove superfluous isPrintableCharacter() call
* Remove unused variable textContent
* Declare option outside for loop. Also use null instead of false
* Set scrollTop once
* Declare index variable in the if block
* Move isPrintableCharacter to ComboboxAutocomplete.prototype
* Add information about the id attribute for all combobox examples; fixes #785

Co-authored-by: Carolyn MacLeod <Carolyn_MacLeod@ca.ibm.com>
Co-authored-by: Matt King <a11yThinker@Gmail.com>
Co-authored-by: Valerie Young <spectranaut@gmail.com>
Co-authored-by: Simon Pieters <zcorpan@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@spectranaut spectranaut

Labels
bug Code defects; not for inaccurate prose Inaccuracy Incorrect statement in prose (not a code bug) regression-testing Related to AVA regression tests of example pages or AVA framework implementation within repo
Projects
Combobox Patterns and Examples Develo...
  
Complete
Milestone
1.2 Release 1
4 participants
@zcorpan @spectranaut @carmacleod @mcking65