Listbox Examples: Update scrolling of listbox item with focus into view when page is magnified #2622

jongund · 2023-02-17T03:29:38Z

In the listbox examples, fixes #2545 with the following changes:

Updated code to scroll the element referenced by @aria-activedescendant@ into view when view is magnified
Updated accessibility features documentation in support of this change.

While fixing this bug, the following additional changes were also made to improve code quality and implement the latest APG code guide practices:

Use event.key instead of event.keyCode for identifying keyboard commands.
Use class constructors instead of prototype.
Changed mousedown event to pointerdown event to support mobile devices.
Provide high contrast focus ring around option referenced by aria-activedescendant.
Fix bugs in keyboard support for the toolbar
Update documentation to improve consistency with current editorial practices

Preview Updated Listbox Examples

Review checklist

Editorial review by @mcking65
Visual design review by @ariellalgilmore
Accessibility review by @ariellalgilmore?
Test review by @jugglinmike
[Code review] by @jugglinmike
[ ]

WAI Preview Link failed to build on 'Update site files' step. (Last tried on Mon, 18 Sep 2023 23:53:05 GMT).

…ing practices and documentation

css-meeting-bot · 2023-02-21T19:31:19Z

The ARIA Authoring Practices (APG) Task Force just discussed Listbox Examples: Update scrolling of listbox item with focus into view when page is magnified by jongund · Pull Request #2622 · w3c/aria-practices.

The full IRC log of that discussion

<jugglinmike> subtopic: Listbox Examples: Update scrolling of listbox item with focus into view when page is magnified by jongund · Pull Request #2622 · w3c/aria-practices
<jugglinmike> github: https://github.com//pull/2622
<jugglinmike> Matt_King: The fact that we have multiple list boxes on one page is a problem, but we don't have to address that here
<jugglinmike> Jem: I'm adding a reviewer list to the pull request description, now
<jugglinmike> Matt_King: these examples were never reviewed on a mobile device as far as I know
<jugglinmike> Matt_King: I don't want to expand the scope of this pull request to include mobile bugs

ariellalgilmore · 2023-02-26T19:42:36Z

For visual testing:
I am not able to rearrange any of the items in the listbox rearrangeable deploy preview: https://deploy-preview-197--aria-practices.netlify.app/aria/apg/patterns/listbox/examples/listbox-rearrangeable/. A weird effect also happens when using arrow keys it skips some of the list options (chrome on mac)

css-meeting-bot · 2023-02-28T19:30:09Z

The ARIA Authoring Practices (APG) Task Force just discussed Listbox Examples: Update scrolling of listbox item with focus into view when page is magnified by jongund · Pull Request #2622 · w3c/aria-practices.

The full IRC log of that discussion

<jugglinmike> Subtopic: Listbox Examples: Update scrolling of listbox item with focus into view when page is magnified by jongund · Pull Request #2622 · w3c/aria-practices
<jugglinmike> github: https://github.com//pull/2622
<jugglinmike> arigilmore: I've commented with notes on my initial review
<jugglinmike> Matt_King: the test failures are blocking the review failures
<jugglinmike> jongund: I haven't had an opportunity to look into those test failures, yet

jongund · 2023-03-02T21:34:11Z

@mcking65
Not sure how to fix the eslinting issues of "Listbox" not defined and "Listbox" not defined.
I guess the previous code using the "aria" object to define Listbox and Toolbar widgets, but it seems that eslint wants the classes all defined in the same file, not in a shared separate "listbox.js" or "toolbar.js" file.
Is there something in the eslint configuration to ignore these issues or is their a coding pattern that would fix this issue?

a11ydoer · 2023-03-07T19:50:32Z

Mike Pennisi will look into the issue.

css-meeting-bot · 2023-03-07T19:52:49Z

The ARIA Authoring Practices (APG) Task Force just discussed Listbox Examples: Update scrolling of listbox item with focus into view when page is magnified by jongund · Pull Request #2622 · w3c/aria-practices.

The full IRC log of that discussion

<jugglinmike> Subtopic: Listbox Examples: Update scrolling of listbox item with focus into view when page is magnified by jongund · Pull Request #2622 · w3c/aria-practices
<jugglinmike> github: https://github.com//pull/2622
<jugglinmike> Matt_King: This had a bunch of changes and it needed a bunch of review
<jugglinmike> jongund: the ESLint linter is complaining about a coding pattern we're using in listbox.js
<jugglinmike> jongund: I tried using modules, but the linter doesn't like that, either
<jugglinmike> howard-e: I have no suggestion right now, but I can take a look
<jugglinmike> Matt_King: is the linter forcing a good practice? That's something I can't answer--it seems like a code style and engineering thing.
<jugglinmike> jongund: A simple fix would be to define the listbox class in each of the four examples that use it, but then you'd have code duplicated.
<jugglinmike> I'll take a look and give jongund some advice

jugglinmike · 2023-03-07T23:37:42Z

Here's an idea for how to fix those linting errors.

mcking65 · 2023-07-24T21:55:38Z

I don't understand why 3 of the regression tests are failing. It is also odd that a link that was testing fine earlier today is now failing:

https://accessibility-bookmarklets.org/

css-meeting-bot · 2023-07-25T18:18:23Z

The ARIA Authoring Practices (APG) Task Force just discussed Listbox Examples: Update scrolling of listbox item with focus into view when page is magnified.

The full IRC log of that discussion

<jugglinmike> Subtopic: Listbox Examples: Update scrolling of listbox item with focus into view when page is magnified
<jugglinmike> github: https://github.com//pull/2622
<jugglinmike> s/John/Jon/g
<jugglinmike> Matt_King: This was authored by Jon. He said he's running late and may not make it to this meeting at all.
<jugglinmike> Matt_King: The regression workflows are failing. I've tried to re-run them, but they continue to fail.
<jugglinmike> Matt_King: And they're failing in places that are not related to this pull request.
<jugglinmike> howard-e: I can take a look at what's going wrong. It looks like numbers 1, 2, and 4 are giving us trouble
<Jem> https://accessibility-bookmarklets.org/
<jugglinmike> Matt_King: It's not a truly necessary link, and we can probably remove it. We'll definitely have to remove it if the site doesn't exist anymore!
<jugglinmike> Jem: The site is responding for me right now
<jugglinmike> Matt_King: Okay, so the link checker should probably pass, now. Maybe that was just a temporary anomaly with that website.

mcking65 · 2023-07-25T21:01:36Z

@howard-e

regression 2 is still failing after merging in #2749

howard-e · 2023-07-25T21:30:59Z

@mcking65 the single error that's reported here is:

not ok - listbox_rearrangeable › content/patterns/listbox/examples/listbox-rearrangeable.html [data-test-id="span-aria-hidden"]: aria-hidden="true" on span[class=icon] elements; 'Element query returned no results: #ex1 span.icon'; more in details

not ok 65 - listbox_rearrangeable › content/patterns/listbox/examples/listbox-rearrangeable.html [data-test-id="span-aria-hidden"]: aria-hidden="true" on span[class=icon] elements
  ---
    name: AssertionError
    message: 'Element query returned no results: #ex1 span.icon'
    assertion: fail
    at: |-
      Object.queryElements (test/util/queryElements.js:16:7)
      async assertAttributeValues (test/util/assertAttributeValues.js:17:18)
      async test/tests/listbox_rearrangeable.js:132:5
  ...

This isn't related to what #2749 was solving, otherwise all the regression tests would time out instead. The error does reference content/patterns/listbox/examples/listbox-rearrangeable.html however, which this PR modifies so my initial guess is that something has changed to affect the test.

I can take a deeper look tomorrow to help track down the actual cause of the failed test.

cc @jongund

howard-e · 2023-07-25T21:35:41Z

Matt_King: The regression workflows are failing. I've tried to re-run them, but they continue to fail.
Matt_King: And they're failing in places that are not related to this pull request.
howard-e: I can take a look at what's going wrong. It looks like numbers 1, 2, and 4 are giving us trouble

I had re-ran 1 & 4 during the meeting too and they passed before the merge. Seems those were flaky.

https://accessibility-bookmarklets.org/
Matt_King: It's not a truly necessary link, and we can probably remove it. We'll definitely have to remove it if the site doesn't exist anymore!
Jem: The site is responding for me right now
Matt_King: Okay, so the link checker should probably pass, now. Maybe that was just a temporary anomaly with that website.

This must have been the case, it's good now!

howard-e

Following the changes in 38323e3, span.icon no longer exists which is why an error was flagged. The references in test/tests/listbox_rearrangeable should be updated to span.checkmark instead.

test/tests/listbox_rearrangeable.js

…o bugfix/issue-2545

Requested changes are addressed and reviewed by others

mcking65 · 2023-08-07T23:04:32Z

@andreancardona gentle reminder for review of latest code

andreancardona

a few minor minor grammatical fixes but all code looks good

andreancardona · 2023-08-15T17:50:39Z

content/patterns/listbox/examples/listbox-collapsible.html

+              <td>
+                <ul>
+                  <li>Moves focus into and out of the listbox.</li>
+                  <li>If the listbox is expanded, selects the focused option, collapses the listbox, and moves focus out of the listbox.</li>


Suggested change

<li>If the listbox is expanded, selects the focused option, collapses the listbox, and moves focus out of the listbox.</li>

<li>If the listbox is expanded, it selects the focused option, collapses the listbox, and moves focus out of the listbox.</li>

For brevity, we don't write complete sentences in the description column of the keyboard tables unless a supplementary note is required, which is very rare. The description is a phrase that assumes an implicit subject of the key command.

andreancardona · 2023-08-15T17:51:44Z

content/patterns/listbox/examples/listbox-collapsible.html

              <td><code>ul</code></td>
              <td>
                <ul>
-                  <li>Set by the JavaScript when it displays and sets focus on the listbox; otherwise is not present.</li>
-                  <li>Refers to the option in the listbox that is visually indicated as having keyboard focus.</li>
+                  <li>When an option in the listbox is visually indicated as having keyboard focus, refers to that option.</li>


Suggested change

<li>When an option in the listbox is visually indicated as having keyboard focus, refers to that option.</li>

<li>When an option in the listbox is visually indicated as having keyboard focus, it refers to that option.</li>

Same as with keyboard commands, for brevity, we avoid repetitiousness by leaving the subject out of the description.

andreancardona · 2023-08-15T17:52:13Z

content/patterns/listbox/examples/listbox-collapsible.html

-                  <li>Set by the JavaScript when it displays and sets focus on the listbox; otherwise is not present.</li>
-                  <li>Refers to the option in the listbox that is visually indicated as having keyboard focus.</li>
+                  <li>When an option in the listbox is visually indicated as having keyboard focus, refers to that option.</li>
+                  <li>Enables assistive technologies to know which element the application regards as focused while DOM focus remains on the listbox element.</li>


Suggested change

<li>Enables assistive technologies to know which element the application regards as focused while DOM focus remains on the listbox element.</li>

<li>Enables assistive technologies to know which element the application regards to as focused while the DOM focus remains on the listbox element.</li>

Adding 'to' would change the meaning. Perhaps we could have used "is identifying" or "is indicating" instead of "regards". As I rethink the wording, it seems that use of "regards" is somewhat anthropomorphizing the web page by implying that the web page can hold something in regard. I don't want to change the wording in this one case, however, because we use identical wording on several example pages. We could consider a PR that revises all instances of this phrase if this is a problematic wording. I'm not convinced that it is.

andreancardona · 2023-08-15T17:56:05Z

@andreancardona gentle reminder for review of latest code

I'm so sorry for the delay on this @mcking65 I've just submitted my review

andreancardona

Very small changes

css-meeting-bot · 2023-08-22T18:13:38Z

The ARIA Authoring Practices (APG) Task Force just discussed Listbox Examples: Update scrolling of listbox item with focus into view when page is magnified.

The full IRC log of that discussion

<jugglinmike> Subtopic: Listbox Examples: Update scrolling of listbox item with focus into view when page is magnified
<jugglinmike> github: https://github.com//pull/2622
<jugglinmike> Matt_King: I believe we were waiting on one last code review from andrea
<jugglinmike> andrea: I made some very small requests
<jugglinmike> Matt_King: jongund is out right now. Since andrea wrote these using GitHub's "suggestion" feature, I can apply the changes on jongund's behalf. I'll follow up with that after this meeting
<Jem> https://github.com//pull/2775

mcking65 · 2023-09-19T00:40:57Z

Opened #2802 to track resolution of the gap in regression testing identified by @jugglinmike.

All feedback has been addressed now.

jongund added 2 commits February 16, 2023 20:43

updated listbox example to fix focus visibility issues and update cod…

a713420

…ing practices and documentation

fixed spelling errors

f0b72f4

jongund requested review from mcking65 and jnurthen February 17, 2023 03:29

michael-n-cooper-bot mentioned this pull request Feb 17, 2023

apg/bugfix/issue-2545 generated by aria-practices w3c/wai-aria-practices#197

Closed

udpate

0c60ea7

jongund changed the title ~~Bugfix/issue 2545~~ Update scrolling of listbox item with focus into view when page is magnified Feb 17, 2023

jongund changed the title ~~Update scrolling of listbox item with focus into view when page is magnified~~ Listbox Examples: Update scrolling of listbox item with focus into view when page is magnified Feb 17, 2023

a11ydoer requested review from ariellalgilmore and alflennik and removed request for jnurthen February 21, 2023 20:02

updated documentation of keyup and keydown commands

ee6be16

jongund added 5 commits February 28, 2023 19:14

fixed bug in rearrangable listbox

5b2831d

Merge branch 'main' into bugfix/issue-2545

e17add6

restored fiel that should not have been changed

fb4bfa8

restored file that should not have been changed

45dcfb6

updated code to remove uneeded code

ba970a3

jongund and others added 3 commits March 7, 2023 13:58

added global listbox to eslint config

de0a3d0

Merge remote-tracking branch 'origin/main' into bugfix/issue-2545

80b4b36

Satisfy linter

ec4dd4e

jugglinmike mentioned this pull request Mar 7, 2023

Satisfy linter for gh-2622 #2642

Merged

jongund added 2 commits March 7, 2023 20:53

added ignore use before define

ab6c110

added ignore use before define

e97a6b9

jongund requested a review from jugglinmike July 11, 2023 18:44

Merge remote-tracking branch 'origin/main' into bugfix/issue-2545

a53878e

Merge remote-tracking branch 'origin/main' into bugfix/issue-2545

60f3d6d

howard-e requested changes Jul 26, 2023

View reviewed changes

test/tests/listbox_rearrangeable.js Outdated Show resolved Hide resolved

test/tests/listbox_rearrangeable.js Outdated Show resolved Hide resolved

test/tests/listbox_rearrangeable.js Outdated Show resolved Hide resolved

jongund added 3 commits July 26, 2023 16:01

fixed regression bug

9452228

Merge branch 'bugfix/issue-2545' of github.com:w3c/aria-practices int…

7e78c2c

…o bugfix/issue-2545

fixed regression bug

d113845

jongund requested a review from howard-e July 26, 2023 22:58

howard-e approved these changes Jul 31, 2023

View reviewed changes

jongund requested a review from andreancardona August 1, 2023 18:14

mcking65 removed the request for review from jugglinmike August 7, 2023 23:03

andreancardona requested changes Aug 15, 2023

View reviewed changes

andreancardona reviewed Aug 22, 2023

View reviewed changes

remove superfluous default from switch per suggestion from Mike

31759c2

mcking65 mentioned this pull request Sep 19, 2023

Add aria-activedescendant regression tests that ensure the element referenced by aria-activedescendant is visible when it is changed via keyboard commands #2802

Open

mcking65 merged commit eed124a into main Sep 19, 2023
21 checks passed

mcking65 deleted the bugfix/issue-2545 branch September 19, 2023 00:43

howard-e mentioned this pull request Oct 2, 2023

For publication / deploy on Tuesday October 2, 2023 w3c/wai-aria-practices#268

Merged

mcking65 added the enhancement Any addition or improvement that doesn't fix a code bug or prose inaccuracy label Jan 7, 2024

mcking65 added this to the 2023-10-02 Publication Pull Requests milestone Apr 14, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Listbox Examples: Update scrolling of listbox item with focus into view when page is magnified #2622

Listbox Examples: Update scrolling of listbox item with focus into view when page is magnified #2622

jongund commented Feb 17, 2023 •

edited by michael-n-cooper-bot

css-meeting-bot commented Feb 21, 2023

ariellalgilmore commented Feb 26, 2023 •

edited

css-meeting-bot commented Feb 28, 2023

jongund commented Mar 2, 2023

a11ydoer commented Mar 7, 2023

css-meeting-bot commented Mar 7, 2023

jugglinmike commented Mar 7, 2023

mcking65 commented Jul 24, 2023

css-meeting-bot commented Jul 25, 2023

mcking65 commented Jul 25, 2023

howard-e commented Jul 25, 2023

howard-e commented Jul 25, 2023

howard-e left a comment •

edited

mcking65 commented Aug 7, 2023

andreancardona left a comment

andreancardona Aug 15, 2023

mcking65 Sep 18, 2023

andreancardona Aug 15, 2023

mcking65 Sep 18, 2023

andreancardona Aug 15, 2023

mcking65 Sep 19, 2023

andreancardona commented Aug 15, 2023

andreancardona left a comment

css-meeting-bot commented Aug 22, 2023

mcking65 commented Sep 19, 2023

	<li>If the listbox is expanded, selects the focused option, collapses the listbox, and moves focus out of the listbox.</li>
	<li>If the listbox is expanded, it selects the focused option, collapses the listbox, and moves focus out of the listbox.</li>

	<li>When an option in the listbox is visually indicated as having keyboard focus, refers to that option.</li>
	<li>When an option in the listbox is visually indicated as having keyboard focus, it refers to that option.</li>

	<li>Enables assistive technologies to know which element the application regards as focused while DOM focus remains on the listbox element.</li>
	<li>Enables assistive technologies to know which element the application regards to as focused while the DOM focus remains on the listbox element.</li>

Listbox Examples: Update scrolling of listbox item with focus into view when page is magnified #2622

Listbox Examples: Update scrolling of listbox item with focus into view when page is magnified #2622

Conversation

jongund commented Feb 17, 2023 • edited by michael-n-cooper-bot

Preview Updated Listbox Examples

Review checklist

css-meeting-bot commented Feb 21, 2023

ariellalgilmore commented Feb 26, 2023 • edited

css-meeting-bot commented Feb 28, 2023

jongund commented Mar 2, 2023

a11ydoer commented Mar 7, 2023

css-meeting-bot commented Mar 7, 2023

jugglinmike commented Mar 7, 2023

mcking65 commented Jul 24, 2023

css-meeting-bot commented Jul 25, 2023

mcking65 commented Jul 25, 2023

howard-e commented Jul 25, 2023

howard-e commented Jul 25, 2023

howard-e left a comment • edited

Choose a reason for hiding this comment

mcking65 commented Aug 7, 2023

andreancardona left a comment

Choose a reason for hiding this comment

andreancardona Aug 15, 2023

Choose a reason for hiding this comment

mcking65 Sep 18, 2023

Choose a reason for hiding this comment

andreancardona Aug 15, 2023

Choose a reason for hiding this comment

mcking65 Sep 18, 2023

Choose a reason for hiding this comment

andreancardona Aug 15, 2023

Choose a reason for hiding this comment

mcking65 Sep 19, 2023

Choose a reason for hiding this comment

andreancardona commented Aug 15, 2023

andreancardona left a comment

Choose a reason for hiding this comment

css-meeting-bot commented Aug 22, 2023

mcking65 commented Sep 19, 2023

jongund commented Feb 17, 2023 •

edited by michael-n-cooper-bot

ariellalgilmore commented Feb 26, 2023 •

edited

howard-e left a comment •

edited