Accessibility fixes for react-docsite-components (#18928)

microsoft · Jul 14, 2021 · 5bf5b8e · 5bf5b8e
1 parent 57b43a4
commit 5bf5b8e
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 26 deletions.
diff --git a/change/@fluentui-react-docsite-components-29e0e38f-097a-4cbf-bf10-85b2eb331511.json b/change/@fluentui-react-docsite-components-29e0e38f-097a-4cbf-bf10-85b2eb331511.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Accessibility fixes for nav, feedback list, header, properties table",
+  "packageName": "@fluentui/react-docsite-components",
+  "email": "elcraig@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-docsite-components/src/components/App/App.tsx b/packages/react-docsite-components/src/components/App/App.tsx
@@ -14,13 +14,15 @@ import { getQueryParam } from '../../utilities/index2';
 
 export interface IAppState {
   isMenuVisible: boolean;
+  /** Menu (nav) panel is in the process of closing and should not be re-opened */
+  isMenuClosing: boolean;
 }
 
 const getClassNames = classNamesFunction<IAppStyleProps, IAppStyles>();
 
 @withResponsiveMode
 export class AppBase extends React.Component<IAppProps, IAppState> {
-  public state: IAppState = { isMenuVisible: false };
+  public state: IAppState = { isMenuVisible: false, isMenuClosing: false };
   private _classNames: IProcessedStyleSet<IAppStyles>;
   private _showOnlyExamples: boolean;
   private _isStrict: boolean;
@@ -54,7 +56,7 @@ export class AppBase extends React.Component<IAppProps, IAppState> {
     const nav = (
       <Nav
         groups={appDefinition.examplePages}
-        onLinkClick={this._onLinkClick}
+        onLinkClick={this._onMenuDismiss}
         onRenderLink={this._onRenderLink}
         styles={classNames.subComponentStyles.nav}
       />
@@ -86,12 +88,10 @@ export class AppBase extends React.Component<IAppProps, IAppState> {
             isOpen={isMenuVisible}
             isLightDismiss={true}
             type={PanelType.smallFixedNear}
-            // Close by tapping outside the panel
+            // Close by tapping outside the panel or pressing escape
             hasCloseButton={false}
-            // Use onDismissed (not onDismiss) to prevent _onIsMenuVisibleChanged being called twice
-            // (once by the panel and once by the header button)
-            // eslint-disable-next-line react/jsx-no-bind
-            onDismissed={this._onIsMenuVisibleChanged.bind(this, false)}
+            onDismiss={this._onMenuDismiss}
+            onDismissed={this._onMenuDismissed}
             styles={classNames.subComponentStyles.navPanel}
           >
             {nav}
@@ -118,12 +118,20 @@ export class AppBase extends React.Component<IAppProps, IAppState> {
     return app;
   }
 
-  private _onIsMenuVisibleChanged = (isMenuVisible: boolean): void => {
-    this.setState({ isMenuVisible });
+  private _onMenuDismiss = () => {
+    // If the user clicks the hamburger to dismiss, by default it would trigger the click handler
+    // and immediately reopen the menu panel. Set a flag while the menu is closing to prevent this.
+    this.setState({ isMenuVisible: false, isMenuClosing: true });
+  };
+
+  private _onMenuDismissed = () => {
+    // Menu panel is finished dismissing, so re-activate the hamburger button
+    this.setState({ isMenuClosing: false });
   };
 
-  private _onLinkClick = (): void => {
-    this.setState({ isMenuVisible: false });
+  private _onIsMenuVisibleChanged = (isMenuVisible: boolean): void => {
+    // Toggle visibility only if the menu panel is not in the process of closing
+    this.setState(prevState => (prevState.isMenuClosing ? null : { isMenuVisible }));
   };
 
   private _onRenderLink = (link: INavLink): JSX.Element => {

diff --git a/packages/react-docsite-components/src/components/FeedbackList/FeedbackList.styles.ts b/packages/react-docsite-components/src/components/FeedbackList/FeedbackList.styles.ts
@@ -49,14 +49,7 @@ export const getStyles: IStyleFunction<IFeedbackListStyleProps, IFeedbackListSty
         },
       },
     ],
-    itemName: [
-      theme.fonts.mediumPlus,
-      {
-        whiteSpace: 'nowrap',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-      },
-    ],
+    itemName: theme.fonts.mediumPlus,
     itemLabel: [
       {
         fontSize: theme.fonts.small.fontSize,

diff --git a/packages/react-docsite-components/src/components/Header/Header.tsx b/packages/react-docsite-components/src/components/Header/Header.tsx
@@ -36,7 +36,7 @@ export class HeaderBase extends React.Component<IHeaderProps, IHeaderState> {
     // For screen sizes large down, hide the side links.
     const sideLinks = isLargeDown ? [] : this.props.sideLinks;
 
-    const classNames = getClassNames(styles, { theme });
+    const classNames = getClassNames(styles, { theme, isLargeDown });
     const { subComponentStyles } = classNames;
 
     return (
@@ -62,6 +62,7 @@ export class HeaderBase extends React.Component<IHeaderProps, IHeaderState> {
                     className={classNames.button}
                     onClick={this._onGearClick}
                     aria-label="Settings"
+                    aria-expanded={!!contextMenu}
                   >
                     <Icon iconName="Settings" styles={subComponentStyles.icons} />
                   </button>,

diff --git a/packages/react-docsite-components/src/components/PropertiesTable/PropertiesTable.tsx b/packages/react-docsite-components/src/components/PropertiesTable/PropertiesTable.tsx
@@ -1,5 +1,12 @@
 import * as React from 'react';
-import { DetailsList, DetailsListLayoutMode, IColumn, IGroup } from '@fluentui/react/lib/DetailsList';
+import {
+  DetailsHeader,
+  DetailsList,
+  DetailsListLayoutMode,
+  IColumn,
+  IDetailsListProps,
+  IGroup,
+} from '@fluentui/react/lib/DetailsList';
 import { SelectionMode } from '@fluentui/react/lib/Selection';
 import { ITheme } from '@fluentui/react/lib/Styling';
 import { styled, classNamesFunction, IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';
@@ -92,6 +99,17 @@ const ENUM_COLUMNS: IColumn[] = getColumns([
   { key: 'description', name: 'Description', minWidth: 300, maxWidth: 400 },
 ]);
 
+const onShouldVirtualize = () => false;
+
+const onRenderHeader: IDetailsListProps['onRenderDetailsHeader'] = props => {
+  return (
+    <DetailsHeader
+      {...props!}
+      ariaLabelForToggleAllGroupsButton={props!.isAllCollapsed ? 'Expand all groups' : 'Collapse all groups'}
+    />
+  );
+};
+
 class PropertiesTableBase extends React.PureComponent<IPropertiesTableProps> {
   public static defaultProps: Partial<IPropertiesTableProps> = {
     title: 'Properties',
@@ -139,16 +157,13 @@ class PropertiesTableBase extends React.PureComponent<IPropertiesTableProps> {
           groups={this._groups}
           columns={renderAsEnum ? ENUM_COLUMNS : DEFAULT_COLUMNS}
           styles={classNames.subComponentStyles.list}
-          onShouldVirtualize={this._onShouldVirtualize}
+          onShouldVirtualize={onShouldVirtualize}
+          onRenderDetailsHeader={onRenderHeader}
         />
       </div>
     );
   }
 
-  private _onShouldVirtualize = (): boolean => {
-    return false;
-  };
-
   private _getGroups(): IGroup[] {
     const groups: IGroup[] = [];
     let index = 0;