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
microsoft · Apr 15, 2020 · 9f85a17 · 9f85a17
1 parent e628eea
commit 9f85a17
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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,13 +35,23 @@ 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);
 
   const activeDialog = dialogs.find(({ id }) => id === dialogId);
 
   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,13 +122,15 @@ const TableView: React.FC<TableViewProps> = props => {
           key: 'delete',
           name: formatMessage('Delete'),
           onClick: () => {
+            announce('item deleted');
             onRemoveTemplate(index);
           },
         },
         {
           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
@@ -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
@@ -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
@@ -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
@@ -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;