Skip to content

fix(a11y): wrong result count spoken when items change#1058

Closed
ghost wants to merge 4 commits intomasterfrom
unknown repository
Closed

fix(a11y): wrong result count spoken when items change#1058
ghost wants to merge 4 commits intomasterfrom
unknown repository

Conversation

@ghost
Copy link
Copy Markdown

@ghost ghost commented May 20, 2020

What:

Added items and getA11yStatusMessage to the useEffect hook inside useSelect and useCombobox that updates the a11y status.

Why:

Screen readers don't read the a11y status that should be read, as far as I can tell. This happens because the itemCount and previousItemCount are always the same, due to the missing dependencies in the useEffect hook, which means the right text is never returned.

Reproducing:

Go to this sandbox link and open the console pane. Start typing into the input. You'll notice that it outputs what the screen reader would say, and that the item counts are actually wrong on each call, and that the itemCount and previousItemCount are identical on every call.

Checklist:

  • Documentation N/A
  • Tests N/A
  • TypeScript Types N/A
  • Flow Types N/A
  • Ready to be merged

@codecov-commenter
Copy link
Copy Markdown

codecov-commenter commented May 20, 2020

Codecov Report

Merging #1058 into master will not change coverage.
The diff coverage is n/a.

Impacted file tree graph

@@            Coverage Diff            @@
##            master     #1058   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files           17        17           
  Lines         1319      1319           
  Branches       241       241           
=========================================
  Hits          1319      1319           
Impacted Files Coverage Δ
src/hooks/useCombobox/index.js 100.00% <ø> (ø)
src/hooks/useSelect/index.js 100.00% <ø> (ø)

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update f35252a...011c39f. Read the comment docs.

@silviuaavram
Copy link
Copy Markdown
Collaborator

silviuaavram commented May 20, 2020

Hi! I need a repro case / sandbox with the issue in order to move forward with this.

@ghost
Copy link
Copy Markdown
Author

ghost commented May 20, 2020

Hi! I need a repro case / sandbox with the issue in order to move forward with this.

Sorry @silviuaavram, I've added a reduced test case to the PR.

@ghost
Copy link
Copy Markdown
Author

ghost commented May 21, 2020

I've also now added the getA11yStatusMessage prop to the dependency list, to handle cases where the actual method changes between renders

@silviuaavram
Copy link
Copy Markdown
Collaborator

silviuaavram commented May 22, 2020

Tracked the bug, it makes sense to have these changes. However I don't think we should update the status just because of the getter function being changed. It's not something that's user facing.

I don't like not to put the exhaustive depends in the useEffect but for me it makes sense to update the a11y status only when state changes or the number of items change. So I would leave it with only the items.

Please add some tests as well. Check if, on rerender with a different items prop, it will show a new message if the new items length is different.

@ghost
Copy link
Copy Markdown
Author

ghost commented May 22, 2020

I don't like not to put the exhaustive depends in the useEffect but for me it makes sense to update the a11y status only when state changes or the number of items change. So I would leave it with only the items.

This would be fine, except for the fact it makes updating the getA11yStatusMessage prop impossible later since you can't be quaranteed the latest prop value will be used. getA11yStatusMessage is user facing, so this would be very counter intuitive from a users perspective.

If we truly only want the status to be updated on certain events, would it not be better to simply call it within the handlers for those events? Perhaps after the stateReducer? Using useEffect like this and purposefully omitting dependencies has always struck me as a potential source of bugs.

I'll add the tests cases for items, though, as suggested.

@ghost
Copy link
Copy Markdown
Author

ghost commented Jun 12, 2020

Closing this as it's fixed by #1076

@ghost ghost closed this Jun 12, 2020
This pull request was closed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants