[MM-19587] some WCAG fixes for new channel modal (mattermost#4085)

* [MM-19587] fix ARIA roles used must conform to valid values * [MM-19587] Fix form elements must have labels * fix ARIA roles used must conform to valid values * fix labels * fix group radio buttons * radiogroup attempt * remove incorrect role * update snapshots * address CR comments * fix snapshots * first lowecase * attempt to fix snapshot
outofgamut · Oct 31, 2019 · 2a8c390 · 2a8c390
1 parent 540a281
commit 2a8c390
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 6 deletions.
diff --git a/components/new_channel_modal/__snapshots__/new_channel_modal.test.jsx.snap b/components/new_channel_modal/__snapshots__/new_channel_modal.test.jsx.snap
@@ -77,6 +77,7 @@ exports[`components/NewChannelModal should match snapshot, display only private
  >
  <label
  className="col-sm-3 form__label control-label"
+ id="channelModalTypeLabel"
  >
  <FormattedMessage
  defaultMessage="Type"
@@ -119,6 +120,7 @@ exports[`components/NewChannelModal should match snapshot, display only private
  >
  <label
  className="col-sm-3 form__label control-label"
+ htmlFor="newChannelName"
  >
  <FormattedMessage
  defaultMessage="Name"
@@ -171,6 +173,7 @@ exports[`components/NewChannelModal should match snapshot, display only private
  >
  <label
  className="form__label control-label"
+ htmlFor="newChannelPurpose"
  >
  <FormattedMessage
  defaultMessage="Purpose"
@@ -219,6 +222,7 @@ exports[`components/NewChannelModal should match snapshot, display only private
  >
  <label
  className="form__label control-label"
+ htmlFor="newChannelHeader"
  >
  <FormattedMessage
  defaultMessage="Header"
@@ -372,6 +376,7 @@ exports[`components/NewChannelModal should match snapshot, display only public c
  >
  <label
  className="col-sm-3 form__label control-label"
+ id="channelModalTypeLabel"
  >
  <FormattedMessage
  defaultMessage="Type"
@@ -414,6 +419,7 @@ exports[`components/NewChannelModal should match snapshot, display only public c
  >
  <label
  className="col-sm-3 form__label control-label"
+ htmlFor="newChannelName"
  >
  <FormattedMessage
  defaultMessage="Name"
@@ -466,6 +472,7 @@ exports[`components/NewChannelModal should match snapshot, display only public c
  >
  <label
  className="form__label control-label"
+ htmlFor="newChannelPurpose"
  >
  <FormattedMessage
  defaultMessage="Purpose"
@@ -514,6 +521,7 @@ exports[`components/NewChannelModal should match snapshot, display only public c
  >
  <label
  className="form__label control-label"
+ htmlFor="newChannelHeader"
  >
  <FormattedMessage
  defaultMessage="Header"
@@ -667,6 +675,7 @@ exports[`components/NewChannelModal should match snapshot, modal not showing 1`]
  >
  <label
  className="col-sm-3 form__label control-label"
+ id="channelModalTypeLabel"
  >
  <FormattedMessage
  defaultMessage="Type"
@@ -686,6 +695,7 @@ exports[`components/NewChannelModal should match snapshot, modal not showing 1`]
  >
  <label>
  <input
+ aria-labelledby="channelModalTypeLabel"
  checked={true}
  id="public"
  name="channelType"
@@ -716,6 +726,7 @@ exports[`components/NewChannelModal should match snapshot, modal not showing 1`]
  >
  <label>
  <input
+ aria-labelledby="channelModalTypeLabel"
  checked={false}
  id="private"
  name="channelType"
@@ -749,6 +760,7 @@ exports[`components/NewChannelModal should match snapshot, modal not showing 1`]
  >
  <label
  className="col-sm-3 form__label control-label"
+ htmlFor="newChannelName"
  >
  <FormattedMessage
  defaultMessage="Name"
@@ -801,6 +813,7 @@ exports[`components/NewChannelModal should match snapshot, modal not showing 1`]
  >
  <label
  className="form__label control-label"
+ htmlFor="newChannelPurpose"
  >
  <FormattedMessage
  defaultMessage="Purpose"
@@ -849,6 +862,7 @@ exports[`components/NewChannelModal should match snapshot, modal not showing 1`]
  >
  <label
  className="form__label control-label"
+ htmlFor="newChannelHeader"
  >
  <FormattedMessage
  defaultMessage="Header"
@@ -1002,6 +1016,7 @@ exports[`components/NewChannelModal should match snapshot, modal showing 1`] = `
  >
  <label
  className="col-sm-3 form__label control-label"
+ id="channelModalTypeLabel"
  >
  <FormattedMessage
  defaultMessage="Type"
@@ -1021,6 +1036,7 @@ exports[`components/NewChannelModal should match snapshot, modal showing 1`] = `
  >
  <label>
  <input
+ aria-labelledby="channelModalTypeLabel"
  checked={true}
  id="public"
  name="channelType"
@@ -1051,6 +1067,7 @@ exports[`components/NewChannelModal should match snapshot, modal showing 1`] = `
  >
  <label>
  <input
+ aria-labelledby="channelModalTypeLabel"
  checked={false}
  id="private"
  name="channelType"
@@ -1084,6 +1101,7 @@ exports[`components/NewChannelModal should match snapshot, modal showing 1`] = `
  >
  <label
  className="col-sm-3 form__label control-label"
+ htmlFor="newChannelName"
  >
  <FormattedMessage
  defaultMessage="Name"
@@ -1136,6 +1154,7 @@ exports[`components/NewChannelModal should match snapshot, modal showing 1`] = `
  >
  <label
  className="form__label control-label"
+ htmlFor="newChannelPurpose"
  >
  <FormattedMessage
  defaultMessage="Purpose"
@@ -1184,6 +1203,7 @@ exports[`components/NewChannelModal should match snapshot, modal showing 1`] = `
  >
  <label
  className="form__label control-label"
+ htmlFor="newChannelHeader"
  >
  <FormattedMessage
  defaultMessage="Header"
@@ -1337,6 +1357,7 @@ exports[`components/NewChannelModal should match snapshot, on displayNameError 1
  >
  <label
  className="col-sm-3 form__label control-label"
+ id="channelModalTypeLabel"
  >
  <FormattedMessage
  defaultMessage="Type"
@@ -1356,6 +1377,7 @@ exports[`components/NewChannelModal should match snapshot, on displayNameError 1
  >
  <label>
  <input
+ aria-labelledby="channelModalTypeLabel"
  checked={true}
  id="public"
  name="channelType"
@@ -1386,6 +1408,7 @@ exports[`components/NewChannelModal should match snapshot, on displayNameError 1
  >
  <label>
  <input
+ aria-labelledby="channelModalTypeLabel"
  checked={false}
  id="private"
  name="channelType"
@@ -1419,6 +1442,7 @@ exports[`components/NewChannelModal should match snapshot, on displayNameError 1
  >
  <label
  className="col-sm-3 form__label control-label"
+ htmlFor="newChannelName"
  >
  <FormattedMessage
  defaultMessage="Name"
@@ -1481,6 +1505,7 @@ exports[`components/NewChannelModal should match snapshot, on displayNameError 1
  >
  <label
  className="form__label control-label"
+ htmlFor="newChannelPurpose"
  >
  <FormattedMessage
  defaultMessage="Purpose"
@@ -1529,6 +1554,7 @@ exports[`components/NewChannelModal should match snapshot, on displayNameError 1
  >
  <label
  className="form__label control-label"
+ htmlFor="newChannelHeader"
  >
  <FormattedMessage
  defaultMessage="Header"
@@ -1682,6 +1708,7 @@ exports[`components/NewChannelModal should match snapshot, on serverError 1`] =
  >
  <label
  className="col-sm-3 form__label control-label"
+ id="channelModalTypeLabel"
  >
  <FormattedMessage
  defaultMessage="Type"
@@ -1701,6 +1728,7 @@ exports[`components/NewChannelModal should match snapshot, on serverError 1`] =
  >
  <label>
  <input
+ aria-labelledby="channelModalTypeLabel"
  checked={true}
  id="public"
  name="channelType"
@@ -1731,6 +1759,7 @@ exports[`components/NewChannelModal should match snapshot, on serverError 1`] =
  >
  <label>
  <input
+ aria-labelledby="channelModalTypeLabel"
  checked={false}
  id="private"
  name="channelType"
@@ -1764,6 +1793,7 @@ exports[`components/NewChannelModal should match snapshot, on serverError 1`] =
  >
  <label
  className="col-sm-3 form__label control-label"
+ htmlFor="newChannelName"
  >
  <FormattedMessage
  defaultMessage="Name"
@@ -1816,6 +1846,7 @@ exports[`components/NewChannelModal should match snapshot, on serverError 1`] =
  >
  <label
  className="form__label control-label"
+ htmlFor="newChannelPurpose"
  >
  <FormattedMessage
  defaultMessage="Purpose"
@@ -1864,6 +1895,7 @@ exports[`components/NewChannelModal should match snapshot, on serverError 1`] =
  >
  <label
  className="form__label control-label"
+ htmlFor="newChannelHeader"
  >
  <FormattedMessage
  defaultMessage="Header"
@@ -2031,6 +2063,7 @@ exports[`components/NewChannelModal should match snapshot, private channel fille
  >
  <label
  className="col-sm-3 form__label control-label"
+ id="channelModalTypeLabel"
  >
  <FormattedMessage
  defaultMessage="Type"
@@ -2050,6 +2083,7 @@ exports[`components/NewChannelModal should match snapshot, private channel fille
  >
  <label>
  <input
+ aria-labelledby="channelModalTypeLabel"
  checked={false}
  id="public"
  name="channelType"
@@ -2080,6 +2114,7 @@ exports[`components/NewChannelModal should match snapshot, private channel fille
  >
  <label>
  <input
+ aria-labelledby="channelModalTypeLabel"
  checked={true}
  id="private"
  name="channelType"
@@ -2113,6 +2148,7 @@ exports[`components/NewChannelModal should match snapshot, private channel fille
  >
  <label
  className="col-sm-3 form__label control-label"
+ htmlFor="newChannelName"
  >
  <FormattedMessage
  defaultMessage="Name"
@@ -2165,6 +2201,7 @@ exports[`components/NewChannelModal should match snapshot, private channel fille
  >
  <label
  className="form__label control-label"
+ htmlFor="newChannelPurpose"
  >
  <FormattedMessage
  defaultMessage="Purpose"
@@ -2213,6 +2250,7 @@ exports[`components/NewChannelModal should match snapshot, private channel fille
  >
  <label
  className="form__label control-label"
+ htmlFor="newChannelHeader"
  >
  <FormattedMessage
  defaultMessage="Header"

diff --git a/components/new_channel_modal/new_channel_modal.jsx b/components/new_channel_modal/new_channel_modal.jsx
@@ -241,6 +241,7 @@ export default class NewChannelModal extends React.PureComponent {
  name='channelType'
  checked={this.props.channelType === 'O'}
  onChange={this.handlePublicTypeSelect}
+ aria-labelledby='channelModalTypeLabel'
  />
  {publicChannelDesc}
  </label>
@@ -253,6 +254,7 @@ export default class NewChannelModal extends React.PureComponent {
  name='channelType'
  checked={this.props.channelType === 'P'}
  onChange={this.handlePrivateTypeSelect}
+ aria-labelledby='channelModalTypeLabel'
  />
  {privateChannelDesc}
  </label>
@@ -310,7 +312,10 @@ export default class NewChannelModal extends React.PureComponent {
  >
  <Modal.Body>
  <div className='form-group'>
- <label className='col-sm-3 form__label control-label'>
+ <label
+ className='col-sm-3 form__label control-label'
+ id='channelModalTypeLabel'
+ >
  <FormattedMessage
  id='channel_modal.type'
  defaultMessage='Type'
@@ -321,7 +326,10 @@ export default class NewChannelModal extends React.PureComponent {
  </div>
  </div>
  <div className={displayNameClass}>
- <label className='col-sm-3 form__label control-label'>
+ <label
+ className='col-sm-3 form__label control-label'
+ htmlFor='newChannelName'
+ >
  <FormattedMessage
  id='channel_modal.name'
  defaultMessage='Name'
@@ -358,7 +366,10 @@ export default class NewChannelModal extends React.PureComponent {
  </div>
  <div className='form-group'>
  <div className='col-sm-3'>
- <label className='form__label control-label'>
+ <label
+ className='form__label control-label'
+ htmlFor='newChannelPurpose'
+ >
  <FormattedMessage
  id='channel_modal.purpose'
  defaultMessage='Purpose'
@@ -392,7 +403,10 @@ export default class NewChannelModal extends React.PureComponent {
  </div>
  <div className='form-group less'>
  <div className='col-sm-3'>
- <label className='form__label control-label'>
+ <label
+ className='form__label control-label'
+ htmlFor='newChannelHeader'
+ >
  <FormattedMessage
  id='channel_modal.header'
  defaultMessage='Header'

diff --git a/components/widgets/icons/globe_icon.jsx b/components/widgets/icons/globe_icon.jsx
@@ -17,7 +17,7 @@ export default class GlobeIcon extends React.PureComponent {
  width='13px'
  height='13px'
  viewBox='0 0 14 14'
- role='img'
+ role='presentation'
  aria-label={ariaLabel}
  >
  <g

diff --git a/components/widgets/icons/lock_icon.jsx b/components/widgets/icons/lock_icon.jsx
@@ -18,7 +18,7 @@ export default class LockIcon extends React.PureComponent {
  width='12px'
  height='13px'
  viewBox='0 0 13 15'
- role='img'
+ role='presentation'
  title={title}
  >
  <g