Fix: screen reader announces search results status message (#644)

Fix: screen reader announces search results status message
microsoftgraph · Jul 21, 2020 · 012d794 · 012d794
2 parents 6754629 + 1197893
commit 012d794
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 5 deletions.
diff --git a/src/app/views/query-runner/request/permissions/PanelList.tsx b/src/app/views/query-runner/request/permissions/PanelList.tsx
@@ -1,4 +1,12 @@
-import { DetailsList, DetailsListLayoutMode, IColumn, Label, SearchBox, SelectionMode } from 'office-ui-fabric-react';
+import {
+  Announced,
+  DetailsList,
+  DetailsListLayoutMode,
+  IColumn,
+  Label,
+  SearchBox,
+  SelectionMode
+} from 'office-ui-fabric-react';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
@@ -37,6 +45,7 @@ const PanelList = ({ messages, permissions,
           searchValueChanged(event, newValue)}
         styles={{ field: { paddingLeft: 10 } }}
       />
+      <Announced message={`${permissions.length} search results available.`}/>
       <hr />
       <DetailsList
         onShouldVirtualize={() => false}

diff --git a/src/app/views/sidebar/sample-queries/SampleQueries.tsx b/src/app/views/sidebar/sample-queries/SampleQueries.tsx
@@ -1,8 +1,21 @@
 import {
-  DetailsList, DetailsRow, FontSizes,
-  FontWeights, getId, GroupHeader, IColumn, Icon,
-  MessageBar, MessageBarType, SearchBox,
-  SelectionMode, Spinner, SpinnerSize, styled, TooltipHost
+  Announced,
+  DetailsList,
+  DetailsRow,
+  FontSizes,
+  FontWeights,
+  getId,
+  GroupHeader,
+  IColumn,
+  Icon,
+  MessageBar,
+  MessageBarType,
+  SearchBox,
+  SelectionMode,
+  Spinner,
+  SpinnerSize,
+  styled,
+  TooltipHost
 } from 'office-ui-fabric-react';
 import React, { ChangeEvent, Component } from 'react';
 import { FormattedMessage, injectIntl } from 'react-intl';
@@ -333,6 +346,7 @@ export class SampleQueries extends Component<ISampleQueriesProps, any> {
             <FormattedMessage id='Microsoft Graph API Reference docs' />
           </a>
         </MessageBar>
+        <Announced message={`${groupedList.samples.length} search results available.`}/>
         <DetailsList className={classes.queryList}
           cellStyleProps={{
             cellRightPadding: 0,