[Accessibility] Adds built-in support for Screen Reader announcements #51

inkblotty · 2021-11-04T20:34:27Z

Summary

New Features

If data-autoselect is "true" on the auto-complete-element, pressing the "Enter" key will select the first option available, even if the input is focused and not the first option.

Reference Slack thread on this established pattern which describes that Primer React has already established the pattern of using "Enter" to commit the first suggestion in SelectPanel.

Accessibility

If a <listbox_id>-feedback element is detected, the following screen-reader updates are announced:

when the options are loaded, how many are available
what the first option is and that pressing Enter will select it (if data-autoselect is true)
when an option is selected, that the option is selected
when the options are hidden, that they have been hidden

Some set up work was also done for client-side options, but that work will be tackled whenever #52 is prioritized.

cc @github/accessibility

…ions

…d adding autoselect support

…updates

inkblotty · 2021-11-09T21:33:45Z

I see the Action only defines Ubuntu and MacOS -- let me know if I should be adding Windows or if the settings should be updated to not require Windows.

dgreif

Hey @inkblotty, I'm happy to get a chance to see some of your work! I dropped some comments, but overall this seems like it's headed in a good direction. Thanks for making this component more accessible!

package.json

.eslintrc.json

src/autocomplete.ts

dgreif · 2021-11-10T14:24:31Z

src/autocomplete.ts

+        this.feedback.innerHTML = getAnnouncementStringByEvent(input)
+        this.container.dispatchEvent(new CustomEvent('sr-update'))
+      }
+    }, 100)


Would you mind detailing why we need the timeout, and why 100 was chosen? I'm guessing it's an order-of-events issue, but those can usually be solved with 0 timeout.

I suspect this will change after our screenreader auditors interact with it, but it allows time for the announcements of other events to finish. If "polite" is used instead, VoiceOver ignores the announcement half the time.

This actually got me thinking about how we'll test with our auditors. Little change incoming.

dgreif · 2021-11-10T14:34:54Z

src/autocomplete.ts

@@ -101,6 +143,15 @@ export default class Autocomplete {
    }
  }

+  updateFeedbackForScreenReaders(input: ScreenReaderAccouncementConfig): void {


I like the DRY approach here, making it easy to update the sr announcment. I wonder if it would be simpler to just pass a string into here, and remove the ScreenReaderAccouncementConfig input type. That way calling sites could just call the exact function they need to get the string and pass it in, rather than having different event types with various options. WDYT?

I see what you're saying. I opted for this approach because of the "new-options" event having two different types of announcements, depending on if autoselect is enabled or not. It seemed like it would get messy to keep all the different combinations of strings in autocomplete.ts when it could be in its own file.

However, I could rewrite it to be an additional function, remove the events, and call "newOptionsWithAutoselect" or something. WDYT?

I think that would probably be an easier approach to maintain 👍

Ok please let me know what you think of the new approach @dgreif 🙏

src/autocomplete.ts

koddsson

It would be great if we can include these new events and markup in the README.

test/test.js

koddsson · 2021-11-11T10:02:15Z

examples/index.html

+          - Note the ID is the same as the <ul> with "feedback" appended
+          - Also note that aria attributes will be added programmatically if they aren't set correctly  
+        -->
+        <div id="items-popup-feedback" class="sr-only"></div>


What does sr-only do? It seems unused to me.

It doesn't do anything in the example except suggest to use a screen reader only class. In dotcom, this class is sr-only. I could add a note or remove if it's confusing. WDYT?

examples/index.html

src/autocomplete.ts

src/screen-reader-announcements.ts

src/autocomplete.ts

Co-authored-by: Kristján Oddsson <[email protected]>

dgreif

One new comment, but I think you addressed the rest of my feedback. I'll defer to @koddsson for final approval as he knows this repo better than I do 😄

src/screen-reader-announcements.ts

* Add missing `package-lock.json` file * Inline all the screen reader announcements By inlining the screen reader announcement text we remove a layer of indirection. * Replace `sr-update` event dispatch with a MutationObserver The event fired has no effect in production which indicates that it shouldn't be in the code at all. What we want to do in the tests is to wait for the feedback element to have text so we should instead use a MutationObserver to wait for the element to change before running our assertion. * Inline listbox ID in tests We remove a level of indirection by inlining the list box ID. It's more apparent to the reader of the tests what elements are being referred to without having to find the definition of the `listboxId` variable.

koddsson

Looks good to me 👍🏻

adding feedback support for screen readers to summarize options

50006f8

inkblotty marked this pull request as ready for review November 9, 2021 18:20

inkblotty requested a review from a team as a code owner November 9, 2021 18:20

inkblotty requested review from jfuchs, JoseInTheArena, keithamus and koddsson November 9, 2021 18:20

inkblotty marked this pull request as draft November 9, 2021 18:22

inkblotty changed the title ~~[Accessibility] Adds built-in support for Screen Reader feedback~~ [Accessibility] Adds built-in support for Screen Reader announcements Nov 9, 2021

inkblotty marked this pull request as ready for review November 9, 2021 19:07

inkblotty added 9 commits November 9, 2021 21:10

adding example of accessible feedback div

620ea1b

moving screenreader logic to own file for maintainability

cf260bb

first 'ready-to-select' option

d3b2ff2

adding detection for active descendant; remove reference to clientOpt…

f820f80

…ions

updating example, adding way to run it locally even in codespaces, an…

c047005

…d adding autoselect support

assertive

9425223

adding super tiny delay to allow for feedback to be read after other …

e437e7b

…updates

adding support for when suggestions are hidden

af46677

updating test to work with timers

9d1a19d

inkblotty force-pushed the feature/handle-sr-feedback branch from afe1e48 to 9d1a19d Compare November 9, 2021 21:12

version bump

417293d

dgreif reviewed Nov 10, 2021

View reviewed changes

inkblotty added 6 commits November 10, 2021 14:57

clean up

17a65e5

woops linting

dd5aa53

removing activedescendant markup as per @jscholes feedback

aed2844

using event-free model like @dgreif suggested

ba23479

version downgrade

54a9899

linting, cleanup

bc678c0

inkblotty requested a review from dgreif November 10, 2021 17:53

koddsson reviewed Nov 11, 2021

View reviewed changes

inkblotty and others added 6 commits November 11, 2021 09:22

Update package.json

39bd9f4

Co-authored-by: Kristján Oddsson <[email protected]>

lots of tweaks from PR feedback @koddsson

980321f

merge conflict

3d04866

add details to README

e511be1

lint

9fde26f

no karma no

7cac98d

dgreif reviewed Nov 12, 2021

View reviewed changes

src/screen-reader-announcements.ts Outdated Show resolved Hide resolved

inkblotty and others added 4 commits November 12, 2021 15:02

funciton syntax and revert if feedback

8ceaa36

Revert quotes to normal quotes

afa08fa

Don't dispatch sr event

95d38a7

koddsson approved these changes Nov 12, 2021

View reviewed changes

inkblotty merged commit 7ec981d into main Nov 12, 2021

inkblotty deleted the feature/handle-sr-feedback branch November 12, 2021 15:21

inkblotty added a commit that referenced this pull request Nov 12, 2021

set up screenreader logic from PR #51

ff94715

keithamus mentioned this pull request May 31, 2023

use default option in combobox #110

Merged

[Accessibility] Adds built-in support for Screen Reader announcements #51

[Accessibility] Adds built-in support for Screen Reader announcements #51

Uh oh!

Conversation

inkblotty commented Nov 4, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

New Features

Accessibility

Uh oh!

inkblotty commented Nov 9, 2021

Uh oh!

dgreif left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

inkblotty Nov 10, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

koddsson left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

dgreif left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

koddsson left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

inkblotty commented Nov 4, 2021 •

edited

Loading

inkblotty Nov 10, 2021 •

edited

Loading