From 6f626b678d93b42d12e144c8574d4ea2cf6b6eb2 Mon Sep 17 00:00:00 2001 From: "Alex Kiselev (Akvelon INC)" Date: Tue, 2 Oct 2018 14:59:54 -0700 Subject: [PATCH 1/5] added aria attributes to dummy input --- src/Select.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/Select.js b/src/Select.js index aa88076e47..a6cb46e549 100644 --- a/src/Select.js +++ b/src/Select.js @@ -1339,6 +1339,7 @@ export default class Select extends Component { readOnly tabIndex={tabIndex} value="" + {...ariaAttributes} /> ); } From c42acabead29ae32f23837f268800df8e2b5a486 Mon Sep 17 00:00:00 2001 From: "Alex Kiselev (Akvelon INC)" Date: Tue, 2 Oct 2018 15:30:03 -0700 Subject: [PATCH 2/5] moved aria attributes --- src/Select.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/Select.js b/src/Select.js index a6cb46e549..bcaa5545d4 100644 --- a/src/Select.js +++ b/src/Select.js @@ -1327,6 +1327,13 @@ export default class Select extends Component { const id = inputId || this.getElementId('input'); + // aria attributes makes the JSX "noisy", separated for clarity + const ariaAttributes = { + 'aria-autocomplete': 'list', + 'aria-label': this.props['aria-label'], + 'aria-labelledby': this.props['aria-labelledby'], + }; + if (!isSearchable) { // use a dummy input to maintain focus/blur functionality return ( @@ -1344,13 +1351,6 @@ export default class Select extends Component { ); } - // aria attributes makes the JSX "noisy", separated for clarity - const ariaAttributes = { - 'aria-autocomplete': 'list', - 'aria-label': this.props['aria-label'], - 'aria-labelledby': this.props['aria-labelledby'], - }; - const { cx, theme } = this.commonProps; return ( From 9e2b7594e9ee49430dc87f0b3b162d5c955b273e Mon Sep 17 00:00:00 2001 From: Mitchell Hamilton Date: Sat, 5 Oct 2019 09:34:24 +1000 Subject: [PATCH 3/5] Update real-suns-rescue.md --- .changeset/real-suns-rescue.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/real-suns-rescue.md diff --git a/.changeset/real-suns-rescue.md b/.changeset/real-suns-rescue.md new file mode 100644 index 0000000000..123f906beb --- /dev/null +++ b/.changeset/real-suns-rescue.md @@ -0,0 +1,5 @@ +--- +'react-select': patch +--- + +Add aria attributes to dummy input From bad894231dccf6b9b04cf96e9a0e014d52c72b21 Mon Sep 17 00:00:00 2001 From: mitchellhamilton Date: Sat, 5 Oct 2019 09:36:49 +1000 Subject: [PATCH 4/5] Prettier --- packages/react-select/src/Select.js | 60 ++++++++++++++++------------- 1 file changed, 33 insertions(+), 27 deletions(-) diff --git a/packages/react-select/src/Select.js b/packages/react-select/src/Select.js index fb227d8fbc..1b01a5cd90 100644 --- a/packages/react-select/src/Select.js +++ b/packages/react-select/src/Select.js @@ -51,17 +51,17 @@ import { defaultTheme, type ThemeConfig } from './theme'; import type { ActionMeta, - ActionTypes, - FocusDirection, - FocusEventHandler, - GroupType, - InputActionMeta, - KeyboardEventHandler, - MenuPlacement, - MenuPosition, - OptionsType, - OptionType, - ValueType, + ActionTypes, + FocusDirection, + FocusEventHandler, + GroupType, + InputActionMeta, + KeyboardEventHandler, + MenuPlacement, + MenuPosition, + OptionsType, + OptionType, + ValueType, } from './types'; type MouseOrTouchEvent = @@ -128,8 +128,8 @@ export type Props = { escapeClearsValue: boolean, /* Custom method to filter whether an option should be displayed in the menu */ filterOption: - | (({ label: string, value: string, data: OptionType }, string) => boolean) - | null, + | (({ label: string, value: string, data: OptionType }, string) => boolean) + | null, /* Formats group labels in the menu as React components @@ -919,12 +919,18 @@ export default class Select extends Component { } } else { //$FlowFixMe - if (event.target.tagName !== 'INPUT' && event.target.tagName !== 'TEXTAREA') { + if ( + event.target.tagName !== 'INPUT' && + event.target.tagName !== 'TEXTAREA' + ) { this.onMenuClose(); } } //$FlowFixMe - if (event.target.tagName !== 'INPUT' && event.target.tagName !== 'TEXTAREA') { + if ( + event.target.tagName !== 'INPUT' && + event.target.tagName !== 'TEXTAREA' + ) { event.preventDefault(); } }; @@ -1361,19 +1367,19 @@ export default class Select extends Component { // An aria live message representing the currently focused value in the select. const focusedValueMsg = focusedValue ? valueFocusAriaMessage({ - focusedValue, - getOptionLabel: this.getOptionLabel, - selectValue, - }) + focusedValue, + getOptionLabel: this.getOptionLabel, + selectValue, + }) : ''; // An aria live message representing the currently focused option in the select. const focusedOptionMsg = focusedOption && menuIsOpen ? optionFocusAriaMessage({ - focusedOption, - getOptionLabel: this.getOptionLabel, - options, - }) + focusedOption, + getOptionLabel: this.getOptionLabel, + options, + }) : ''; // An aria live message representing the set of focusable results and current searchterm/inputvalue. const resultsMsg = resultsAriaMessage({ @@ -1750,8 +1756,8 @@ export default class Select extends Component { {menuElement} ) : ( - menuElement - ); + menuElement + ); } renderFormField() { const { delimiter, isDisabled, isMulti, name } = this.props; @@ -1777,8 +1783,8 @@ export default class Select extends Component { /> )) ) : ( - - ); + + ); return
{input}
; } From 910b9440b477a3afbd8f59c5a112d0ffc3c5264f Mon Sep 17 00:00:00 2001 From: mitchellhamilton Date: Sat, 5 Oct 2019 09:41:28 +1000 Subject: [PATCH 5/5] Fix flow --- packages/react-select/src/Select.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-select/src/Select.js b/packages/react-select/src/Select.js index 1b01a5cd90..c8d59039d0 100644 --- a/packages/react-select/src/Select.js +++ b/packages/react-select/src/Select.js @@ -918,16 +918,16 @@ export default class Select extends Component { this.openMenu('first'); } } else { - //$FlowFixMe if ( + // $FlowFixMe event.target.tagName !== 'INPUT' && event.target.tagName !== 'TEXTAREA' ) { this.onMenuClose(); } } - //$FlowFixMe if ( + // $FlowFixMe event.target.tagName !== 'INPUT' && event.target.tagName !== 'TEXTAREA' ) {