diff --git a/packages/app/client/src/ui/shell/mdi/tab/tab.scss b/packages/app/client/src/ui/shell/mdi/tab/tab.scss index 7fde9be51..d805ea5e3 100644 --- a/packages/app/client/src/ui/shell/mdi/tab/tab.scss +++ b/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; +} diff --git a/packages/app/client/src/ui/shell/mdi/tab/tab.scss.d.ts b/packages/app/client/src/ui/shell/mdi/tab/tab.scss.d.ts index 77a68dfed..fd1f46ef9 100644 --- a/packages/app/client/src/ui/shell/mdi/tab/tab.scss.d.ts +++ b/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; diff --git a/packages/app/client/src/ui/shell/mdi/tab/tab.tsx b/packages/app/client/src/ui/shell/mdi/tab/tab.tsx index a285f8fb8..e9254fbd3 100644 --- a/packages/app/client/src/ui/shell/mdi/tab/tab.tsx +++ b/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 { const iconClass = this.iconClass; return ( -
- {this.props.children} - {!this.props.hideIcon && } - {label} - {this.props.dirty ? * : null} -
+ <>
-   + {this.props.children} + {!this.props.hideIcon && } + {label} + {this.props.dirty ? * : null} +
+
+   +
+
- -
+ {isLinux() ? this.announceTabState : null} + ); } @@ -189,4 +193,13 @@ export class Tab extends React.Component { private setTabRef = (ref: HTMLButtonElement): void => { this.tabRef = ref; }; + + private get announceTabState(): React.ReactNode { + const { active, label } = this.props; + return ( + + {active ? `${label} tab selected` : ''} + + ); + } }