Added selected tab announcement for Linux OS

packages/app/client/src/ui/shell/mdi/tab/tab.scss

@@ -126,3 +126,9 @@
   right: 0;
   background-color: var(--tab-separator-bg);
 }
+
+.aria-live-region {
+  position: absolute;
+  top: -9999px;
+  overflow: hidden;
+}

packages/app/client/src/ui/shell/mdi/tab/tab.scss.d.ts

@@ -10,3 +10,4 @@ export const draggedOverEditorTab: string;
 export const activeEditorTab: string;
 export const tabFocusTarget: string;
 export const tabSeparator: string;
+export const ariaLiveRegion: string;

packages/app/client/src/ui/shell/mdi/tab/tab.tsx

@@ -34,6 +34,7 @@
 import { TruncateText } from '@bfemulator/ui-react';
 import * as React from 'react';
 import { DragEvent, KeyboardEvent, SyntheticEvent } from 'react';
+import { isLinux } from '@bfemulator/app-shared';
 
 import { getTabGroupForDocument } from '../../../../state/helpers/editorHelpers';
 import { DOCUMENT_ID_APP_SETTINGS, DOCUMENT_ID_MARKDOWN_PAGE, DOCUMENT_ID_WELCOME_PAGE } from '../../../../constants';
@@ -80,42 +81,45 @@ export class Tab extends React.Component<TabProps, TabState> {
     const iconClass = this.iconClass;
 
     return (
-      <div
-        className={`${styles.tab} ${activeClassName} ${draggedOverClassName}`}
-        draggable={true}
-        onDragOver={this.onDragOver}
-        onDragEnter={this.onDragEnter}
-        onDragStart={this.onDragStart}
-        onDrop={this.onDrop}
-        onDragLeave={this.onDragLeave}
-        onDragEnd={this.onDragEnd}
-        role="presentation"
-      >
-        {this.props.children}
-        {!this.props.hideIcon && <span className={`${styles.editorTabIcon} ${iconClass}`} role="presentation" />}
-        <TruncateText className={styles.truncatedTabText}>{label}</TruncateText>
-        {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}
-          ref={this.setTabRef}
+          className={`${styles.tab} ${activeClassName} ${draggedOverClassName}`}
+          draggable={true}
+          onDragOver={this.onDragOver}
+          onDragEnter={this.onDragEnter}
+          onDragStart={this.onDragStart}
+          onDrop={this.onDrop}
+          onDragLeave={this.onDragLeave}
+          onDragEnd={this.onDragEnd}
+          role="presentation"
         >
-          &nbsp;
+          {this.props.children}
+          {!this.props.hideIcon && <span className={`${styles.editorTabIcon} ${iconClass}`} role="presentation" />}
+          <TruncateText className={styles.truncatedTabText}>{label}</TruncateText>
+          {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}
+            ref={this.setTabRef}
+          >
+            &nbsp;
+          </div>
+          <button
+            type="button"
+            title={`Close ${label} tab`}
+            className={styles.editorTabClose}
+            onKeyPress={this.onCloseButtonKeyPress}
+            onClick={this.onCloseClick}
+          >
+            <span />
+          </button>
         </div>
-        <button
-          type="button"
-          title={`Close ${label} tab`}
-          className={styles.editorTabClose}
-          onKeyPress={this.onCloseButtonKeyPress}
-          onClick={this.onCloseClick}
-        >
-          <span />
-        </button>
-      </div>
+        {isLinux() ? this.announceTabState : null}
+      </>
     );
   }
 
@@ -189,4 +193,13 @@ export class Tab extends React.Component<TabProps, TabState> {
   private setTabRef = (ref: HTMLButtonElement): void => {
     this.tabRef = ref;
   };
+
+  private get announceTabState(): React.ReactNode {
+    const { active, label } = this.props;
+    return (
+      <span id="tabState" aria-live={'polite'} className={styles.ariaLiveRegion}>
+        {active ? `${label} tab selected` : ''}
+      </span>
+    );
+  }
 }