Kashkovsky intl a11y, attempt 2 #4161

radegran · 2020-08-13T12:22:37Z

Fixed conflicts and added test for PR #3550 that has come to a halt.

…e messages contains wrong statement

… the one supplied in props

changeset-bot · 2020-08-13T12:22:40Z

💥 No Changeset

Latest commit: 24d1e60

Merging this PR will not cause any packages to be released. If these changes should not cause updates to packages in this repo, this is fine 🙂

If these changes should be published to npm, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

codesandbox-ci · 2020-08-13T12:23:44Z

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 24d1e60:

Sandbox	Source
react-codesandboxer-example	Configuration

TheHollidayInn · 2020-09-08T22:48:14Z

packages/react-select/src/Select.js

@@ -73,8 +75,41 @@ type FormatOptionLabelMeta = {
  inputValue: string,
  selectValue: ValueType,
 };
+export type AccessibilityProp = {


What do you think about moving these to a separate file?

I think you are right! I'll try to find a good place for them.

TheHollidayInn · 2020-09-08T22:48:49Z

packages/react-select/src/Select.js

@@ -1815,10 +1868,14 @@ export default class Select extends Component<Props, State> {
  renderLiveRegion() {


It might be good to abstract this to a separate component at this time. What do you think?

Thanks for your feedback!
I am not sure. Looking at other render helpers, renderLiveRegion seems to line up pretty well? On the other hand one could argue for a decoupling exercise of the whole Select class, being ~1600 lines tall. But perhaps that work should be logged in a separate work package. What are you thoughts?

I agree! You are following the convent. Also agree that this is 1600 lines. So maybe another PR would be good to refactor some of the render* function into separate components.

TheHollidayInn

Testing manually seems to work!! Good job :D

horrigan · 2020-11-20T03:17:39Z

Hi guys, the example looks great! Btw Is anyone working on merging this PR? Do you guys need any help? It seems @TheHollidayInn has done all the job.

ebonow

@TheHollidayInn @radegran Would you mind taking a look at the comments regarding the propName? accessibility as a prop name simply would not be descriptive enough. Recommendation would be ariaLiveConfig or something of a similar nature.

ebonow · 2020-12-12T05:56:47Z

packages/react-select/src/Select.js

@@ -75,6 +79,8 @@ type FormatOptionLabelMeta = {
 };

 export type Props = {
+  /* Custom ARIA message functions */
+  accessibility?: AccessibilityProp,


Maybe this is a bit of semantics, but I believe accessibility is a bit vague for a prop.

Would you be willing to consider something more along the lines of ariaLiveConfig? I think it better encapsulates the functionality.

Additionally, this would provide more clarity and avoids confusion with perhaps other things aria/accessibility related.

ebonow · 2020-12-15T15:11:18Z

Overview

This proposed PR adds the ability for users to configure the ariaLive messaging configuration to allow custom messages.

Problem

This addresses two gaps:

The hardcoded aria live message templates are written in English and therefore do not support localization.
The templates are not configurable and therefore custom user messages are not possible especially when additional data can be presented in a custom Option component such as when formatOptionLabel returns a JSX component instead of a string

Solution

The internal instructionsAriaMessage class should be exposed so that a developer can override any of the default aria-live event messages.

Related Issues solved by this

#3352 Aria messages cannot be localized
#3685 aria-live region gives incorrect instructions in one use case
#3691 Customize messages for accessibility
#4001 Screen reader support for only English text
#4134 (comment) Pass something besided string to getOptionLabel()?

ebonow · 2020-12-15T15:13:17Z

@kylemh regarding your comments from here, perhaps you were mistaking this with another PR because of the accessibility prop which would likely be better named as something like ariaLiveConfig based on the scope of the changes.

I also agree that having an "accessibility catch-all prop" that includes all things aria would not be a good idea.

kylemh · 2020-12-15T17:41:09Z

💯 thank you for helping me read correctly

The name change would help for sure.

ebonow · 2020-12-22T02:22:06Z

Note to future self, pull this PR with documentation PR and rename prop name

ebonow · 2021-01-21T02:38:28Z

Please note that there has been no response to requests for updates. I have began creating a new PR inspired by this and hope to address several other gaps in the aria live messaging. I will close this once I have a submission ready.

ebonow · 2021-01-21T06:37:26Z

Greetings @radegran ,

Thank you for your efforts resurrecting this PR. Your efforts are much appreciated. There were some issues with merging and code review suggestions that were not addressed so I have taken these efforts as a starting point to create #4390 . I will be closing this issue so we can continue on with attempt 3.

radegran · 2021-01-21T19:40:38Z

Greetings @radegran ,

Thank you for your efforts resurrecting this PR. Your efforts are much appreciated. There were some issues with merging and code review suggestions that were not addressed so I have taken these efforts as a starting point to create #4390 . I will be closing this issue so we can continue on with attempt 3.

@ebonow, I have not been keeping track of this PR for some time. Glad to see you moving forward with it, best of luck!

Kashkovsky and others added 8 commits May 7, 2019 15:31

Issue JedWatson#3352: Aria messages cannot be localized and one of th…

5b1aa6c

…e messages contains wrong statement

flow type fixes

92cdf4c

minor fixes to original PR to merge default accessibility config with…

c51766d

… the one supplied in props

fix tests

8879025

Merge branch 'master' into Kashkovsky-intl-a11y

9bb54f8

Added test for accessibility prop

f8c7f01

Flow fix

fd42751

Dropped dead code example

0b51368

radegran mentioned this pull request Aug 14, 2020

Kashkovsky intl a11y #3550

Closed

bladey added pr/bug-fix PRs that are specifically addressing a bug pr/needs-review PRs that need to be reviewed to determine outcome labels Aug 24, 2020

TheHollidayInn reviewed Sep 8, 2020

View reviewed changes

Extracted accessibility related types

24d1e60

TheHollidayInn added a commit to KoalaTeaCode/react-select that referenced this pull request Sep 9, 2020

PR JedWatson#4161: Added example for new accessibility prop.

ba2fc6f

TheHollidayInn mentioned this pull request Sep 9, 2020

Access updates #4203

Closed

This was referenced Dec 12, 2020

aria-live region gives incorrect instructions in one use case #3685

Closed

customize messages for accessibility #3691

Closed

Screen reader support for only english text #4001

Closed

Fixes for aria-live region #3781

Open

ebonow requested changes Dec 14, 2020

View reviewed changes

ebonow mentioned this pull request Dec 15, 2020

React-select v4.2.1 and beyond... #4293

Closed

ebonow added this to the 3.2 milestone Dec 15, 2020

Methuselah96 added pr/enhancement PRs that are specifically enhancing the project and removed pr/bug-fix PRs that are specifically addressing a bug labels Dec 18, 2020

ebonow self-assigned this Dec 22, 2020

JedWatson modified the milestones: 3.2, 3.3 Jan 13, 2021

ebonow mentioned this pull request Jan 21, 2021

Aria Live Configuration #4390

Closed

ebonow closed this Jan 21, 2021

ebonow removed this from the 4.1 milestone Jan 22, 2021

ebonow mentioned this pull request Feb 1, 2021

Aria Live Configuration #4414

Merged

14 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Kashkovsky intl a11y, attempt 2 #4161

Kashkovsky intl a11y, attempt 2 #4161

radegran commented Aug 13, 2020 •

edited

Loading

changeset-bot bot commented Aug 13, 2020 •

edited

Loading

codesandbox-ci bot commented Aug 13, 2020 •

edited

Loading

TheHollidayInn Sep 8, 2020

radegran Sep 9, 2020

TheHollidayInn Sep 8, 2020

radegran Sep 9, 2020

TheHollidayInn Sep 9, 2020

TheHollidayInn left a comment •

edited

Loading

horrigan commented Nov 20, 2020

ebonow left a comment •

edited

Loading

ebonow Dec 12, 2020

ebonow commented Dec 15, 2020 •

edited

Loading

ebonow commented Dec 15, 2020 •

edited

Loading

kylemh commented Dec 15, 2020

ebonow commented Dec 22, 2020

ebonow commented Jan 21, 2021

ebonow commented Jan 21, 2021

radegran commented Jan 21, 2021

		@@ -1815,10 +1868,14 @@ export default class Select extends Component<Props, State> {
		renderLiveRegion() {

Kashkovsky intl a11y, attempt 2 #4161

Kashkovsky intl a11y, attempt 2 #4161

Conversation

radegran commented Aug 13, 2020 • edited Loading

changeset-bot bot commented Aug 13, 2020 • edited Loading

💥 No Changeset

codesandbox-ci bot commented Aug 13, 2020 • edited Loading

TheHollidayInn Sep 8, 2020

Choose a reason for hiding this comment

radegran Sep 9, 2020

Choose a reason for hiding this comment

TheHollidayInn Sep 8, 2020

Choose a reason for hiding this comment

radegran Sep 9, 2020

Choose a reason for hiding this comment

TheHollidayInn Sep 9, 2020

Choose a reason for hiding this comment

TheHollidayInn left a comment • edited Loading

Choose a reason for hiding this comment

horrigan commented Nov 20, 2020

ebonow left a comment • edited Loading

Choose a reason for hiding this comment

ebonow Dec 12, 2020

Choose a reason for hiding this comment

ebonow commented Dec 15, 2020 • edited Loading

Overview

Problem

Solution

Related Issues solved by this

ebonow commented Dec 15, 2020 • edited Loading

kylemh commented Dec 15, 2020

ebonow commented Dec 22, 2020

ebonow commented Jan 21, 2021

ebonow commented Jan 21, 2021

radegran commented Jan 21, 2021

radegran commented Aug 13, 2020 •

edited

Loading

changeset-bot bot commented Aug 13, 2020 •

edited

Loading

codesandbox-ci bot commented Aug 13, 2020 •

edited

Loading

TheHollidayInn left a comment •

edited

Loading

ebonow left a comment •

edited

Loading

ebonow commented Dec 15, 2020 •

edited

Loading

ebonow commented Dec 15, 2020 •

edited

Loading