From 9f85a1789bf2c0a3831d2bcfee1353826b9cbc56 Mon Sep 17 00:00:00 2001
From: Ben Yackley <61990921+beyackle@users.noreply.github.com>
Date: Wed, 15 Apr 2020 14:17:08 -0700
Subject: [PATCH] a11y: add announcement region to app and announce
 copy/deletion (#2643)

* add announcements to table view

* linter stuff

* use global context for announcement state

* add announcements to table view

* linter stuff

* use global context for announcement state

* add announcements to table view

* linter stuff

* use global context for announcement state

* Update table-view.tsx

* Update App.tsx
---
 Composer/packages/client/src/App.tsx          | 16 +++++++++++++-
 .../packages/client/src/constants/index.ts    |  2 ++
 .../pages/language-generation/table-view.tsx  | 22 ++++++++++++++-----
 .../packages/client/src/store/action/error.ts |  7 ++++++
 Composer/packages/client/src/store/index.tsx  |  1 +
 .../client/src/store/reducer/index.ts         |  6 +++++
 Composer/packages/client/src/store/types.ts   |  1 +
 7 files changed, 48 insertions(+), 7 deletions(-)

diff --git a/Composer/packages/client/src/App.tsx b/Composer/packages/client/src/App.tsx
index 06c91a1491..019164816a 100644
--- a/Composer/packages/client/src/App.tsx
+++ b/Composer/packages/client/src/App.tsx
@@ -123,13 +123,27 @@ const bottomLinks = [
 export const App: React.FC = () => {
   const { state, actions } = useContext(StoreContext);
   const [sideBarExpand, setSideBarExpand] = useState(false);
-  const { botName, projectId, dialogs, creationFlowStatus, locale, designPageLocation } = state;
+
+  const { botName, projectId, dialogs, creationFlowStatus, locale, designPageLocation, announcement } = state;
   const { setCreationFlowStatus } = actions;
   const mapNavItemTo = x => resolveToBasePath(BASEPATH, x);
 
   const openedDialogId = designPageLocation.dialogId || dialogs.find(({ isRoot }) => isRoot === true)?.id || 'Main';
   return (
     <Fragment>
+      <div
+        role="alert"
+        aria-live="assertive"
+        style={{
+          display: 'block',
+          position: 'absolute',
+          top: '-9999px',
+          height: '1px',
+          width: '1px',
+        }}
+      >
+        {announcement}
+      </div>
       <Header botName={`${botName}(${locale})`} />
       <div css={main}>
         <nav css={sideBar(sideBarExpand)}>
diff --git a/Composer/packages/client/src/constants/index.ts b/Composer/packages/client/src/constants/index.ts
index daa772be55..628c327c96 100644
--- a/Composer/packages/client/src/constants/index.ts
+++ b/Composer/packages/client/src/constants/index.ts
@@ -87,6 +87,8 @@ export enum ActionTypes {
   SET_USER_SETTINGS = 'SET_USER_SETTINGS',
   ADD_SKILL_DIALOG_BEGIN = 'ADD_SKILL_DIALOG_BEGIN',
   ADD_SKILL_DIALOG_END = 'ADD_SKILL_DIALOG_END',
+
+  SET_MESSAGE = 'SET_MESSAGE',
 }
 
 export const Tips = {
diff --git a/Composer/packages/client/src/pages/language-generation/table-view.tsx b/Composer/packages/client/src/pages/language-generation/table-view.tsx
index 932af94a65..3a1345f1a0 100644
--- a/Composer/packages/client/src/pages/language-generation/table-view.tsx
+++ b/Composer/packages/client/src/pages/language-generation/table-view.tsx
@@ -12,16 +12,16 @@ import { IconButton } from 'office-ui-fabric-react/lib/Button';
 import { TooltipHost } from 'office-ui-fabric-react/lib/Tooltip';
 import { ScrollablePane, ScrollbarVisibility } from 'office-ui-fabric-react/lib/ScrollablePane';
 import { Sticky, StickyPositionType } from 'office-ui-fabric-react/lib/Sticky';
-import { FontIcon } from 'office-ui-fabric-react/lib/Icon';
 import formatMessage from 'format-message';
 import { NeutralColors, FontSizes } from '@uifabric/fluent-theme';
 import { RouteComponentProps } from '@reach/router';
 import { LgTemplate } from '@bfc/shared';
+import { Async } from 'office-ui-fabric-react/lib/Utilities';
 
 import { StoreContext } from '../../store';
 import { increaseNameUtilNotExist } from '../../utils/lgUtil';
 import { navigateTo } from '../../utils';
-import { actionButton, formCell, iconClass } from '../language-understanding/styles';
+import { actionButton, formCell } from '../language-understanding/styles';
 
 interface TableViewProps extends RouteComponentProps<{}> {
   dialogId: string;
@@ -35,6 +35,7 @@ const TableView: React.FC<TableViewProps> = props => {
   const createLgTemplate = useRef(debounce(actions.createLgTemplate, 500)).current;
   const copyLgTemplate = useRef(debounce(actions.copyLgTemplate, 500)).current;
   const removeLgTemplate = useRef(debounce(actions.removeLgTemplate, 500)).current;
+  const setMessage = useRef(debounce(actions.setMessage, 500)).current;
   const [templates, setTemplates] = useState<LgTemplate[]>([]);
   const listRef = useRef(null);
 
@@ -42,6 +43,15 @@ const TableView: React.FC<TableViewProps> = props => {
 
   const [focusedIndex, setFocusedIndex] = useState(0);
 
+  const _async = new Async();
+
+  const announce = (message: string) => {
+    setMessage(message);
+    _async.setTimeout(() => {
+      setMessage(undefined);
+    }, 2000);
+  };
+
   useEffect(() => {
     if (!file || isEmpty(file)) return;
 
@@ -112,6 +122,7 @@ const TableView: React.FC<TableViewProps> = props => {
           key: 'delete',
           name: formatMessage('Delete'),
           onClick: () => {
+            announce('item deleted');
             onRemoveTemplate(index);
           },
         },
@@ -119,6 +130,7 @@ const TableView: React.FC<TableViewProps> = props => {
           key: 'copy',
           name: formatMessage('Make a copy'),
           onClick: () => {
+            announce('item copied');
             onCopyTemplate(index);
           },
         },
@@ -191,11 +203,9 @@ const TableView: React.FC<TableViewProps> = props => {
         data: 'string',
         onRender: item => {
           return activeDialog?.lgTemplates.find(({ name }) => name === item.name) ? (
-            <div css={formCell}>
-              <FontIcon iconName="Accept" aria-label={formatMessage('Used')} className={iconClass} />
-            </div>
+            <IconButton iconProps={{ iconName: 'Accept' }} ariaLabel={formatMessage('Used') + ';'} />
           ) : (
-            <div aria-label={formatMessage('Unused')} />
+            <div aria-label={formatMessage('Unused') + ';'} />
           );
         },
       };
diff --git a/Composer/packages/client/src/store/action/error.ts b/Composer/packages/client/src/store/action/error.ts
index 7e09152746..330e05208a 100644
--- a/Composer/packages/client/src/store/action/error.ts
+++ b/Composer/packages/client/src/store/action/error.ts
@@ -11,3 +11,10 @@ export const setError: ActionCreator = ({ dispatch }, error) => {
     payload: error,
   });
 };
+
+export const setMessage: ActionCreator = ({ dispatch }, message) => {
+  dispatch({
+    type: ActionTypes.SET_MESSAGE,
+    payload: message,
+  });
+};
diff --git a/Composer/packages/client/src/store/index.tsx b/Composer/packages/client/src/store/index.tsx
index 0e21ba37b3..639994e4d3 100644
--- a/Composer/packages/client/src/store/index.tsx
+++ b/Composer/packages/client/src/store/index.tsx
@@ -88,6 +88,7 @@ const initialState: State = {
     propertyEditorWidth: 400,
     dialogNavWidth: 180,
   }),
+  announcement: undefined,
 };
 
 interface StoreContextValue {
diff --git a/Composer/packages/client/src/store/reducer/index.ts b/Composer/packages/client/src/store/reducer/index.ts
index 63c78c53d4..e09b05368b 100644
--- a/Composer/packages/client/src/store/reducer/index.ts
+++ b/Composer/packages/client/src/store/reducer/index.ts
@@ -473,6 +473,11 @@ const setCodeEditorSettings: ReducerFunc = (state, settings) => {
   return state;
 };
 
+const setMessage: ReducerFunc = (state, message) => {
+  state.announcement = message;
+  return state;
+};
+
 const noOp: ReducerFunc = state => {
   return state;
 };
@@ -526,4 +531,5 @@ export const reducer = createReducer({
   [ActionTypes.EDITOR_CLIPBOARD]: setClipboardActions,
   [ActionTypes.UPDATE_BOTSTATUS]: setBotStatus,
   [ActionTypes.SET_USER_SETTINGS]: setCodeEditorSettings,
+  [ActionTypes.SET_MESSAGE]: setMessage,
 });
diff --git a/Composer/packages/client/src/store/types.ts b/Composer/packages/client/src/store/types.ts
index 72d4f3ba44..fc92f92ea6 100644
--- a/Composer/packages/client/src/store/types.ts
+++ b/Composer/packages/client/src/store/types.ts
@@ -99,6 +99,7 @@ export interface State {
   publishTypes: string[];
   publishTargets: any[];
   userSettings: UserSettings;
+  announcement: string | undefined;
 }
 
 export type ReducerFunc<T = any> = (state: State, payload: T) => State;