Fixes for aria-live region

[Malgalad]

A11y implementation fixes based on #3353 (comment).

• aria-live region is rendered in the DOM since the beginning
• aria-live region is not re-rendered, only its content changes
• aria-atomic="true" is required for NVDA+FF so that screen reader reads the whole region and not just changed characters
• aria-relevant="additions text" is, in theory, a default value if not specified, however, it doesn't work unless actually specified
• unique keys for paragraphs are for fixing a bug with screen reader reading updates twice. After looking through the similar issues, I've come to the following possible explanation: browser updates text in 2 nodes, so two "text changed" updates are dispatched and screen-reader announces region text twice; with unique keys React remounts nodes instead of updating text inside, so only one update "two new nodes added" is dispatched (and "two old nodes removed" is ignored due to aria-relevant)

Also may fix #2937, #3675

[forgo]

Looking forward to this fix! =)

[anthonyvialleton]

@Malgalad Any news about this PR?

Actually I also found that renderLiveRegion from :

react-select/packages/react-select/src/Select.js

Lines 1800 to 1803 in 3c7de0d

	<A11yText aria-live="polite">
	<p id="aria-selection-event">&nbsp;{this.state.ariaLiveSelection}</p>
	<p id="aria-context">&nbsp;{this.constructAriaLiveMessage()}</p>
	</A11yText>

is responsible for W3C validation to break because of a span element wrapping the 2 p.

Could we change the p by spans instead?

Edit : I opened a dedicated PR for that case (see: #3964)

[changeset-bot]

🦋 Changeset detected

Latest commit: c144c9e

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[Malgalad]

@anthonyvialleton I'm assuming the ball is in the @JedWatson's court. Updated the PR with your suggestions.

[anthonyvialleton]

@Malgalad It was not needed, as mentioned I already created a PR for that specifically ;)

[AaronV]

Hi @Malgalad, I'm really grateful that you've put this work in on this! I had been trying to wrap custom-components with the necessary pieces to properly support aria and wcag, but no luck so far. Getting proper JAWS support is important to me.

I'd like to try out your PR in my project but am having trouble installing the module and getting it to run.

I've installed the module using yarn, and it appears in my dependencies as "@react-select/monorepo": "https://github.com/Malgalad/react-select.git",.
I'm trying to import the package using import Select, { components } from '@react-select/monorepo/packages/react-select';

But I'm guessing I've missed some sort of build-step. I didn't see, in the docs, how to go about doing that. Can you help point me in the right direction?

[agonzalezcr]

is there another possible solution for this issue besides waiting until this merge?
Thanks

[asharron]

Is there anything I can do to help get this through? 🙂

I think this may include some fixes for some issues I'm seeing with Jaws, so would be happy to help in anyway I can

[Methuselah96]

I've started a fork of react-select. Feel free to resubmit this PR on the fork and we can get it merged and released.

EDIT: 🎉 I've archived the fork now that we've got some momentum in this repo and Jed is involved again. Sorry for the disturbance!

[ebonow]

Greetings,
Thank you for contributing this and your patience. It is on our radar and we're also looking at #4161 for consideration and it appears there may be some merge conflicts.

Does anyone have concerns or an idea about what a proper merge would look like so we can include this in a near future release?

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit c144c9e:

Sandbox	Source
react-codesandboxer-example	Configuration

[Methuselah96]

@Malgalad Thanks for the PR! The unit tests are failing at the moment because they use enzyme which was removed in #3989. Can you update the tests to use @testing-library/react instead of enzyme when you get a chance?

[JedWatson]

Moving this to 3.3 so we can get the tests updated, 3.2 is about to be released

[ebonow]

Greetings @Malgalad ,

I have tested your changes and the proposed aria-relevant and aria-atomic changes suggested here introduces a new behavior in that a selected option is now prepended to every new aria live message.

To replicate the previous behavior, I believe that that aria-atomic should be false. Someone please correct me if this is incorrect, but it seems to work as expected for me with this attribute set to false.

I am working on a new PR that moves all of the aira-live messaging to its own component with the hopes of better customizing the accessibility of this component. For instance, some may want to remove all aria live messaging while others may want to set the aria text to be "assertive" so that the user is not blocked by the default contextual information about "You are currently on a text input..."

I will likely pull in any changes that would be relevant, and welcome any feedback on #4414

[hprobotic]

Hi @Malgalad, I'm really grateful that you've put this work in on this! I had been trying to wrap custom-components with the necessary pieces to properly support aria and wcag, but no luck so far. Getting proper JAWS support is important to me.

I'd like to try out your PR in my project but am having trouble installing the module and getting it to run.

I've installed the module using yarn, and it appears in my dependencies as "@react-select/monorepo": "https://github.com/Malgalad/react-select.git",.
I'm trying to import the package using import Select, { components } from '@react-select/monorepo/packages/react-select';

But I'm guessing I've missed some sort of build-step. I didn't see, in the docs, how to go about doing that. Can you help point me in the right direction?

Hey have you managed to install?