Skip to content

Issue #3352: Aria messages cannot be localized and one of the message… #3358

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 4 commits into from
Closed

Issue #3352: Aria messages cannot be localized and one of the message… #3358

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a8953c1
Issue #3352: Aria messages cannot be localized and one of the message…
Kashkovsky Jan 16, 2019
4320bb7
Merge branch 'master' into master
Kashkovsky Jan 16, 2019
e7bcb2e
Remove nonce prop
Kashkovsky Jun 21, 2019
c1ceb14
Update src/Select.js
Kashkovsky Jun 21, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 36 additions & 11 deletions src/Select.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,21 @@ type FormatOptionLabelMeta = {
inputValue: string,
selectValue: ValueType,
};
export type Accessibility = {
valueFocusAriaMessage: (args: {
focusedValue?: OptionType,
getOptionLabel: (data: OptionType) => string,
selectValue: OptionsType | Array<OptionType>
}) => string,
optionFocusAriaMessage: (args: {
focusedOption: OptionType,
getOptionLabel: (data: OptionType) => string,
options: OptionsType
}) => string,
resultsAriaMessage: (args: { inputValue: string, screenReaderMessage: string }) => string,
valueEventAriaMessage: (event: any, context: ValueEventContext) => string,
instructionsAriaMessage: (event: any, context?: InstructionsContext) => string
};

export type Props = {
/* Aria label (for assistive tech) */
Expand Down Expand Up @@ -242,6 +257,8 @@ export type Props = {
tabSelectsValue: boolean,
/* The value of the select; reflected by the selected option */
value: ValueType,
/* Custom ARIA message functions */
accessibility?: Accessibility
};

export const defaultProps = {
Expand Down Expand Up @@ -282,6 +299,13 @@ export const defaultProps = {
styles: {},
tabIndex: '0',
tabSelectsValue: true,
accessibility: {
valueFocusAriaMessage,
optionFocusAriaMessage,
resultsAriaMessage,
valueEventAriaMessage,
instructionsAriaMessage
},
};

type MenuOptions = {
Expand Down Expand Up @@ -789,7 +813,7 @@ export default class Select extends Component<Props, State> {
context: ValueEventContext,
}) => {
this.setState({
ariaLiveSelection: valueEventAriaMessage(event, context),
ariaLiveSelection: this.props.accessibility ? this.props.accessibility.valueEventAriaMessage(event, context) : '',
});
};
announceAriaLiveContext = ({
Expand All @@ -800,10 +824,10 @@ export default class Select extends Component<Props, State> {
context?: InstructionsContext,
}) => {
this.setState({
ariaLiveContext: instructionsAriaMessage(event, {
ariaLiveContext: this.props.accessibility ? this.props.accessibility.instructionsAriaMessage(event, {
...context,
label: this.props['aria-label'],
}),
}) : '',
});
};

Expand Down Expand Up @@ -1328,30 +1352,30 @@ export default class Select extends Component<Props, State> {
focusedValue,
focusedOption,
} = this.state;
const { options, menuIsOpen, inputValue, screenReaderStatus } = this.props;
const { options, menuIsOpen, inputValue, screenReaderStatus, accessibility } = this.props;

// An aria live message representing the currently focused value in the select.
const focusedValueMsg = focusedValue
? valueFocusAriaMessage({
const focusedValueMsg = focusedValue && accessibility
? accessibility.valueFocusAriaMessage({
focusedValue,
getOptionLabel: this.getOptionLabel,
selectValue,
})
: '';
// An aria live message representing the currently focused option in the select.
const focusedOptionMsg =
focusedOption && menuIsOpen
? optionFocusAriaMessage({
focusedOption && menuIsOpen && accessibility
? accessibility.optionFocusAriaMessage({
focusedOption,
getOptionLabel: this.getOptionLabel,
options,
})
: '';
// An aria live message representing the set of focusable results and current searchterm/inputvalue.
const resultsMsg = resultsAriaMessage({
const resultsMsg = accessibility ? accessibility.resultsAriaMessage({
inputValue,
screenReaderMessage: screenReaderStatus({ count: this.countOptions() }),
});
}) : '';

return `${focusedValueMsg} ${focusedOptionMsg} ${resultsMsg} ${ariaLiveContext}`;
}
Expand Down Expand Up @@ -1381,7 +1405,8 @@ export default class Select extends Component<Props, State> {
readOnly
disabled={isDisabled}
tabIndex={tabIndex}
value=""
value=''
emotion={this.emotion}
/>
);
}
Expand Down
65 changes: 65 additions & 0 deletions src/__tests__/__snapshots__/Async.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,15 @@ exports[`defaults - snapshot 1`] = `
options={Array []}
>
<Select
accessibility={
Object {
"instructionsAriaMessage": [Function],
"optionFocusAriaMessage": [Function],
"resultsAriaMessage": [Function],
"valueEventAriaMessage": [Function],
"valueFocusAriaMessage": [Function],
}
}
backspaceRemovesValue={true}
blurInputOnSelect={true}
cacheOptions={false}
Expand Down Expand Up @@ -85,6 +94,13 @@ exports[`defaults - snapshot 1`] = `
selectOption={[Function]}
selectProps={
Object {
"accessibility": Object {
"instructionsAriaMessage": [Function],
"optionFocusAriaMessage": [Function],
"resultsAriaMessage": [Function],
"valueEventAriaMessage": [Function],
"valueFocusAriaMessage": [Function],
},
"backspaceRemovesValue": true,
"blurInputOnSelect": true,
"cacheOptions": false,
Expand Down Expand Up @@ -191,6 +207,13 @@ exports[`defaults - snapshot 1`] = `
selectOption={[Function]}
selectProps={
Object {
"accessibility": Object {
"instructionsAriaMessage": [Function],
"optionFocusAriaMessage": [Function],
"resultsAriaMessage": [Function],
"valueEventAriaMessage": [Function],
"valueFocusAriaMessage": [Function],
},
"backspaceRemovesValue": true,
"blurInputOnSelect": true,
"cacheOptions": false,
Expand Down Expand Up @@ -289,6 +312,13 @@ exports[`defaults - snapshot 1`] = `
selectOption={[Function]}
selectProps={
Object {
"accessibility": Object {
"instructionsAriaMessage": [Function],
"optionFocusAriaMessage": [Function],
"resultsAriaMessage": [Function],
"valueEventAriaMessage": [Function],
"valueFocusAriaMessage": [Function],
},
"backspaceRemovesValue": true,
"blurInputOnSelect": true,
"cacheOptions": false,
Expand Down Expand Up @@ -387,6 +417,13 @@ exports[`defaults - snapshot 1`] = `
selectOption={[Function]}
selectProps={
Object {
"accessibility": Object {
"instructionsAriaMessage": [Function],
"optionFocusAriaMessage": [Function],
"resultsAriaMessage": [Function],
"valueEventAriaMessage": [Function],
"valueFocusAriaMessage": [Function],
},
"backspaceRemovesValue": true,
"blurInputOnSelect": true,
"cacheOptions": false,
Expand Down Expand Up @@ -489,6 +526,13 @@ exports[`defaults - snapshot 1`] = `
onFocus={[Function]}
selectProps={
Object {
"accessibility": Object {
"instructionsAriaMessage": [Function],
"optionFocusAriaMessage": [Function],
"resultsAriaMessage": [Function],
"valueEventAriaMessage": [Function],
"valueFocusAriaMessage": [Function],
},
"backspaceRemovesValue": true,
"blurInputOnSelect": true,
"cacheOptions": false,
Expand Down Expand Up @@ -673,6 +717,13 @@ exports[`defaults - snapshot 1`] = `
selectOption={[Function]}
selectProps={
Object {
"accessibility": Object {
"instructionsAriaMessage": [Function],
"optionFocusAriaMessage": [Function],
"resultsAriaMessage": [Function],
"valueEventAriaMessage": [Function],
"valueFocusAriaMessage": [Function],
},
"backspaceRemovesValue": true,
"blurInputOnSelect": true,
"cacheOptions": false,
Expand Down Expand Up @@ -770,6 +821,13 @@ exports[`defaults - snapshot 1`] = `
selectOption={[Function]}
selectProps={
Object {
"accessibility": Object {
"instructionsAriaMessage": [Function],
"optionFocusAriaMessage": [Function],
"resultsAriaMessage": [Function],
"valueEventAriaMessage": [Function],
"valueFocusAriaMessage": [Function],
},
"backspaceRemovesValue": true,
"blurInputOnSelect": true,
"cacheOptions": false,
Expand Down Expand Up @@ -875,6 +933,13 @@ exports[`defaults - snapshot 1`] = `
selectOption={[Function]}
selectProps={
Object {
"accessibility": Object {
"instructionsAriaMessage": [Function],
"optionFocusAriaMessage": [Function],
"resultsAriaMessage": [Function],
"valueEventAriaMessage": [Function],
"valueFocusAriaMessage": [Function],
},
"backspaceRemovesValue": true,
"blurInputOnSelect": true,
"cacheOptions": false,
Expand Down
65 changes: 65 additions & 0 deletions src/__tests__/__snapshots__/AsyncCreatable.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,15 @@ exports[`defaults - snapshot 1`] = `
value={null}
>
<Select
accessibility={
Object {
"instructionsAriaMessage": [Function],
"optionFocusAriaMessage": [Function],
"resultsAriaMessage": [Function],
"valueEventAriaMessage": [Function],
"valueFocusAriaMessage": [Function],
}
}
allowCreateWhileLoading={false}
backspaceRemovesValue={true}
blurInputOnSelect={true}
Expand Down Expand Up @@ -112,6 +121,13 @@ exports[`defaults - snapshot 1`] = `
selectOption={[Function]}
selectProps={
Object {
"accessibility": Object {
"instructionsAriaMessage": [Function],
"optionFocusAriaMessage": [Function],
"resultsAriaMessage": [Function],
"valueEventAriaMessage": [Function],
"valueFocusAriaMessage": [Function],
},
"allowCreateWhileLoading": false,
"backspaceRemovesValue": true,
"blurInputOnSelect": true,
Expand Down Expand Up @@ -223,6 +239,13 @@ exports[`defaults - snapshot 1`] = `
selectOption={[Function]}
selectProps={
Object {
"accessibility": Object {
"instructionsAriaMessage": [Function],
"optionFocusAriaMessage": [Function],
"resultsAriaMessage": [Function],
"valueEventAriaMessage": [Function],
"valueFocusAriaMessage": [Function],
},
"allowCreateWhileLoading": false,
"backspaceRemovesValue": true,
"blurInputOnSelect": true,
Expand Down Expand Up @@ -326,6 +349,13 @@ exports[`defaults - snapshot 1`] = `
selectOption={[Function]}
selectProps={
Object {
"accessibility": Object {
"instructionsAriaMessage": [Function],
"optionFocusAriaMessage": [Function],
"resultsAriaMessage": [Function],
"valueEventAriaMessage": [Function],
"valueFocusAriaMessage": [Function],
},
"allowCreateWhileLoading": false,
"backspaceRemovesValue": true,
"blurInputOnSelect": true,
Expand Down Expand Up @@ -429,6 +459,13 @@ exports[`defaults - snapshot 1`] = `
selectOption={[Function]}
selectProps={
Object {
"accessibility": Object {
"instructionsAriaMessage": [Function],
"optionFocusAriaMessage": [Function],
"resultsAriaMessage": [Function],
"valueEventAriaMessage": [Function],
"valueFocusAriaMessage": [Function],
},
"allowCreateWhileLoading": false,
"backspaceRemovesValue": true,
"blurInputOnSelect": true,
Expand Down Expand Up @@ -536,6 +573,13 @@ exports[`defaults - snapshot 1`] = `
onFocus={[Function]}
selectProps={
Object {
"accessibility": Object {
"instructionsAriaMessage": [Function],
"optionFocusAriaMessage": [Function],
"resultsAriaMessage": [Function],
"valueEventAriaMessage": [Function],
"valueFocusAriaMessage": [Function],
},
"allowCreateWhileLoading": false,
"backspaceRemovesValue": true,
"blurInputOnSelect": true,
Expand Down Expand Up @@ -725,6 +769,13 @@ exports[`defaults - snapshot 1`] = `
selectOption={[Function]}
selectProps={
Object {
"accessibility": Object {
"instructionsAriaMessage": [Function],
"optionFocusAriaMessage": [Function],
"resultsAriaMessage": [Function],
"valueEventAriaMessage": [Function],
"valueFocusAriaMessage": [Function],
},
"allowCreateWhileLoading": false,
"backspaceRemovesValue": true,
"blurInputOnSelect": true,
Expand Down Expand Up @@ -827,6 +878,13 @@ exports[`defaults - snapshot 1`] = `
selectOption={[Function]}
selectProps={
Object {
"accessibility": Object {
"instructionsAriaMessage": [Function],
"optionFocusAriaMessage": [Function],
"resultsAriaMessage": [Function],
"valueEventAriaMessage": [Function],
"valueFocusAriaMessage": [Function],
},
"allowCreateWhileLoading": false,
"backspaceRemovesValue": true,
"blurInputOnSelect": true,
Expand Down Expand Up @@ -937,6 +995,13 @@ exports[`defaults - snapshot 1`] = `
selectOption={[Function]}
selectProps={
Object {
"accessibility": Object {
"instructionsAriaMessage": [Function],
"optionFocusAriaMessage": [Function],
"resultsAriaMessage": [Function],
"valueEventAriaMessage": [Function],
"valueFocusAriaMessage": [Function],
},
"allowCreateWhileLoading": false,
"backspaceRemovesValue": true,
"blurInputOnSelect": true,
Expand Down
Loading