[MM-22161] - Improve accessibility of channel switcher (#6199)

* [MM-22161] - Improve accessibility of channel switcher * Fix voice over for channels list * update snaps * bring back handleClick * PR comments Co-authored-by: Nevyana Angelova <[email protected]> Co-authored-by: Nevyana Angelova <[email protected]>
mattermost · Oct 6, 2020 · d5ed931 · d5ed931
1 parent 425cc09
commit d5ed931
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 3 deletions.
diff --git a/components/quick_switch_modal/__snapshots__/quick_switch_modal.test.jsx.snap b/components/quick_switch_modal/__snapshots__/quick_switch_modal.test.jsx.snap
@@ -3,6 +3,7 @@
 exports[`components/QuickSwitchModal should match snapshot 1`] = `
 <Modal
  animation={false}
+ aria-describedby="quickSwitchHint"
  aria-labelledby="quickSwitchModalLabel"
  autoFocus={true}
  backdrop={true}
@@ -53,7 +54,7 @@ exports[`components/QuickSwitchModal should match snapshot 1`] = `
  id="quickSwitchHint"
  >
  <injectIntl(FormattedMarkdownMessage)
- defaultMessage="Type to find a channel. Use **▲/▼** to browse, **ENTER** to select, **ESC** to dismiss."
+ defaultMessage="Type to find a channel. Use **UP/DOWN** to browse, **ENTER** to select, **ESC** to dismiss."
  id="quick_switch_modal.help_no_team"
  />
  </div>

diff --git a/components/quick_switch_modal/quick_switch_modal.jsx b/components/quick_switch_modal/quick_switch_modal.jsx
@@ -270,7 +270,7 @@ export default class QuickSwitchModal extends React.PureComponent {
  help = (
  <FormattedMarkdownMessage
  id='quick_switch_modal.help_no_team'
- defaultMessage='Type to find a channel. Use **▲/▼** to browse, **ENTER** to select, **ESC** to dismiss.'
+ defaultMessage='Type to find a channel. Use **UP/DOWN** to browse, **ENTER** to select, **ESC** to dismiss.'
  />
  );
  }
@@ -285,6 +285,7 @@ export default class QuickSwitchModal extends React.PureComponent {
  restoreFocus={false}
  role='dialog'
  aria-labelledby='quickSwitchModalLabel'
+ aria-describedby='quickSwitchHint'
  animation={false}
  >
  <Modal.Header

diff --git a/components/suggestion/suggestion_list.jsx b/components/suggestion/suggestion_list.jsx
@@ -227,6 +227,7 @@ export default class SuggestionList extends React.PureComponent {
  return (<div className={mainClass}>
  <div
  id='suggestionList'
+ role='list'
  ref={this.contentRef}
  style={{...contentStyle}}
  className={contentClass}

diff --git a/components/suggestion/switch_channel_provider.jsx b/components/suggestion/switch_channel_provider.jsx
@@ -142,11 +142,13 @@ class SwitchChannelSuggestion extends Suggestion {
  onClick={this.handleClick}
  onMouseMove={this.handleMouseMove}
  className={className}
+ role='listitem'
  ref={(node) => {
  this.node = node;
  }}
  id={`switchChannel_${channel.name}`}
  data-testid={channel.name}
+ aria-label={displayName || channel.name}
  {...Suggestion.baseProps}
  >
  {icon}

diff --git a/i18n/en.json b/i18n/en.json
@@ -3340,7 +3340,7 @@
  "quick_switch_modal.channelsShortcut.windows": "- CTRL+K",
  "quick_switch_modal.help": "Start typing then use TAB to toggle channels/teams, **▲▼** to browse, **ENTER** to select, **ESC** to dismiss.",
  "quick_switch_modal.help_mobile": "Type to find a channel.",
- "quick_switch_modal.help_no_team": "Type to find a channel. Use **▲▼** to browse, **ENTER** to select, **ESC** to dismiss.",
+ "quick_switch_modal.help_no_team": "Type to find a channel. Use **UP/DOWN** to browse, **ENTER** to select, **ESC** to dismiss.",
  "quick_switch_modal.switchChannels": "Switch Channels",
  "quick_switch_modal.teams": "Teams",
  "quick_switch_modal.teamsShortcut.mac": "- ⌘⌥K",