Skip to content

Commit

Permalink
Issue JedWatson#3352: Aria messages cannot be localized and one of th…
Browse files Browse the repository at this point in the history 
…e messages contains wrong statement
  • Loading branch information
@Kashkovsky
Kashkovsky committed Jan 16, 2019
1 parent 5094666 commit a8953c1
Show file tree
Hide file tree
Showing 6 changed files with 232 additions and 13 deletions.
48 changes: 36 additions & 12 deletions src/Select.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,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 @@ -244,7 +259,9 @@ export type Props = {
/* The value of the select; reflected by the selected option */
value: ValueType,
/* A CSP Nonce which will be used in injected style sheets */
nonce?: string
nonce?: string,
/* Custom ARIA message functions */
accessibility?: Accessibility
};

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

type MenuOptions = {
Expand Down Expand Up @@ -798,7 +822,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 @@ -809,10 +833,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 @@ -1337,30 +1361,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 @@ -1390,7 +1414,7 @@ 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
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 @@ -413,6 +422,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 @@ -847,6 +863,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 @@ -1273,6 +1296,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 @@ -1699,6 +1729,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 @@ -2129,6 +2166,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 @@ -2641,6 +2685,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 @@ -3066,6 +3117,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 @@ -3499,6 +3557,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
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 @@ -440,6 +449,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 @@ -879,6 +895,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 @@ -1310,6 +1333,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 @@ -1741,6 +1771,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 @@ -2176,6 +2213,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 @@ -2693,6 +2737,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 @@ -3123,6 +3174,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 @@ -3561,6 +3619,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

0 comments on commit a8953c1

Please sign in to comment.