Skip to content

Commit

Permalink
Add button role to select trigger (#309)
Browse files Browse the repository at this point in the history
This results in a few a11y improvements:
* Screen readers will better announce the menu button as actionable
* Screen reader focus is correctly returned back to the menu button -- Select was
  already returning focus to the menu button programatically, but
  because the menu button only had tabindex it wasn't seen by screen
  readers as an interactive element. Screen reader focus would be stuck
  on the selected menu item instead of being returned to the button.
  • Loading branch information
wfro authored Feb 5, 2019
1 parent 96d9cda commit ba011fc
Show file tree
Hide file tree
Showing 2 changed files with 13 additions and 7 deletions.
5 changes: 3 additions & 2 deletions src/components/Forms/Select.js
Original file line number Diff line number Diff line change
Expand Up @@ -269,6 +269,9 @@ class Select extends React.PureComponent {
<div
onFocus={this.handleFocus}
onBlur={this.handleBlur}
tabIndex={0}
role="button"
ref={ (node) => this.trigger = node }
>
<div
style={[
Expand All @@ -279,8 +282,6 @@ class Select extends React.PureComponent {
]}
aria-required={required}
aria-invalid={hasError}
tabIndex={0}
ref={ (node) => this.trigger = node }
>
<FloatingLabel
text={floatingLabelText}
Expand Down
15 changes: 10 additions & 5 deletions src/components/Forms/__tests__/__snapshots__/Select.spec.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,8 @@ exports[`renders Select correctly 1`] = `
onBlur={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
role="button"
tabIndex={0}
>
<div
aria-invalid={false}
Expand Down Expand Up @@ -76,7 +78,6 @@ exports[`renders Select correctly 1`] = `
"position": "relative",
}
}
tabIndex={0}
>
<label
data-radium={true}
Expand Down Expand Up @@ -422,6 +423,8 @@ exports[`renders Select w/ server error correctly 1`] = `
onBlur={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
role="button"
tabIndex={0}
>
<div
aria-invalid={false}
Expand Down Expand Up @@ -452,7 +455,6 @@ exports[`renders Select w/ server error correctly 1`] = `
"position": "relative",
}
}
tabIndex={0}
>
<label
data-radium={true}
Expand Down Expand Up @@ -800,6 +802,8 @@ exports[`renders disabled Select correctly 1`] = `
onBlur={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
role="button"
tabIndex={0}
>
<div
aria-invalid={false}
Expand Down Expand Up @@ -830,7 +834,6 @@ exports[`renders disabled Select correctly 1`] = `
"position": "relative",
}
}
tabIndex={0}
>
<label
data-radium={true}
Expand Down Expand Up @@ -1176,6 +1179,8 @@ exports[`renders invalid Select correctly 1`] = `
onBlur={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
role="button"
tabIndex={0}
>
<div
aria-invalid={false}
Expand Down Expand Up @@ -1206,7 +1211,6 @@ exports[`renders invalid Select correctly 1`] = `
"position": "relative",
}
}
tabIndex={0}
>
<label
data-radium={true}
Expand Down Expand Up @@ -1551,6 +1555,8 @@ exports[`uses a custom theme for all child components if one is provided 1`] = `
onBlur={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
role="button"
tabIndex={0}
>
<div
aria-invalid={false}
Expand Down Expand Up @@ -1581,7 +1587,6 @@ exports[`uses a custom theme for all child components if one is provided 1`] = `
"position": "relative",
}
}
tabIndex={0}
>
<label
data-radium={true}
Expand Down

0 comments on commit ba011fc

Please sign in to comment.