Fixed issue with tab state a11y.

microsoft · Aug 26, 2019 · 40b9060 · 40b9060
1 parent 55f9db9
commit 40b9060
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 8 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -15,7 +15,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## Fixed
 - [main] Fixed bug where opening a chat via URL was sending two conversation updates in PR [1735](https://github.com/microsoft/BotFramework-Emulator/pull/1735)
 - [main] Fixed an issue where the Emulator was incorrectly sending the conversation id instead of an emulated OAuth token in PR [1738](https://github.com/microsoft/BotFramework-Emulator/pull/1738)
-- [client] Fixed various accessibility issues in PR [1775](https://github.com/microsoft/BotFramework-Emulator/pull/1775), [1776](https://github.com/microsoft/BotFramework-Emulator/pull/1776)
+- [client] Fixed various accessibility issues in PRs:
+  - [1775](https://github.com/microsoft/BotFramework-Emulator/pull/1775)
+  - [1776](https://github.com/microsoft/BotFramework-Emulator/pull/1776)
+  - [1781](https://github.com/microsoft/BotFramework-Emulator/pull/1781)
 
 ## v4.5.2 - 2019 - 07 - 17
 ## Fixed

diff --git a/packages/app/client/src/ui/shell/mdi/tab/tab.tsx b/packages/app/client/src/ui/shell/mdi/tab/tab.tsx
@@ -66,9 +66,9 @@ export class Tab extends React.Component<TabProps, TabState> {
   }
 
   public render() {
-    const activeClassName = this.props.active ? styles.activeEditorTab : '';
+    const { active, label } = this.props;
+    const activeClassName = active ? styles.activeEditorTab : '';
     const draggedOverClassName = this.state.draggedOver ? styles.draggedOverEditorTab : '';
-    const { label } = this.props;
     const iconClass = this.iconClass;
 
     return (
@@ -81,12 +81,13 @@ export class Tab extends React.Component<TabProps, TabState> {
         onDrop={this.onDrop}
         onDragLeave={this.onDragLeave}
         onDragEnd={this.onDragEnd}
+        role="presentation"
       >
-        <span className={`${styles.editorTabIcon} ${iconClass}`} />
+        <span className={`${styles.editorTabIcon} ${iconClass}`} role="presentation" />
         <TruncateText className={styles.truncatedTabText}>{label}</TruncateText>
-        {this.props.dirty ? <span>*</span> : null}
-        <div className={styles.tabSeparator} />
-        <div className={styles.tabFocusTarget} role="button" tabIndex={0} aria-label={`${label}, tab`}>
+        {this.props.dirty ? <span role="presentation">*</span> : null}
+        <div className={styles.tabSeparator} role="presentation" />
+        <div className={styles.tabFocusTarget} role="tab" tabIndex={0} aria-label={`${label}`} aria-selected={active}>
           &nbsp;
         </div>
         <button

diff --git a/packages/app/client/src/ui/shell/mdi/tabBar/tabBar.tsx b/packages/app/client/src/ui/shell/mdi/tabBar/tabBar.tsx
@@ -123,7 +123,7 @@ export class TabBar extends React.Component<TabBarProps, TabBarState> {
         onDragLeave={this.onDragLeave}
         onDrop={this.onDrop}
       >
-        <div className={styles.tabBarTabs} ref={this.saveScrollable}>
+        <div className={styles.tabBarTabs} ref={this.saveScrollable} role="tablist">
           {this.tabs}
         </div>
         <div className={styles.tabBarWidgets}>{this.widgets}</div>