Fix: Narrator announces more information about a sample query header (#…

…1583)
microsoftgraph · Mar 31, 2022 · a2db247 · a2db247
1 parent 59fe54d
commit a2db247
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 7 deletions.
diff --git a/src/app/utils/generate-groups.ts b/src/app/utils/generate-groups.ts
@@ -7,6 +7,7 @@ export function generateGroupsFromList(list: any[], property: string) {
  let isCollapsed = false;
  let previousCount = 0;
  let count = 0;
+ const toggleCollapse: string = isCollapsed ? 'collapsed ': 'expanded '
 
  if (!list || list.length === 0 || list.some(e => !e[property])) {
  return groups;
@@ -16,21 +17,25 @@ export function generateGroupsFromList(list: any[], property: string) {
  if (!map.has(listItem[property])) {
  map.set(listItem[property], true);
  count = list.filter(item => item[property] === listItem[property]).length;
+ const ariaLabel: string = listItem[property] + ' has ' + count + ' results ' + toggleCollapse;
  if (groups.length > 0) {
  isCollapsed = true;
  }
  groups.push({
- ...listItem,
  name: listItem[property],
  key: listItem[property],
  startIndex: previousCount,
  isCollapsed,
  count,
- ariaLabel: listItem[property] + ' has ' + count + ' results'
+ ariaLabel
  });
  previousCount += count;
  }
  }
-
+ let i = 1;
+ groups.forEach(function (group){
+ group.ariaLabel += `${i} of ${groups.length}`;
+ i++;
+ });
  return groups;
 }
diff --git a/src/app/views/sidebar/sample-queries/SampleQueries.tsx b/src/app/views/sidebar/sample-queries/SampleQueries.tsx
@@ -90,7 +90,7 @@ export class SampleQueries extends Component<ISampleQueriesProps, any> {
  }
 
  public renderItemColumn = (
- item: any,
+ item: ISampleQuery,
  index: number | undefined,
  column: IColumn | undefined
  ) => {
@@ -101,7 +101,7 @@ export class SampleQueries extends Component<ISampleQueriesProps, any> {
  }: any = this.props;
 
  if (column) {
- const queryContent = item[column.fieldName as keyof any] as string;
+ const queryContent = item[column.fieldName as keyof ISampleQuery] as string;
  const signInText = messages['Sign In to try this sample'];
 
  switch (column.key) {
@@ -143,7 +143,10 @@ export class SampleQueries extends Component<ISampleQueriesProps, any> {
  <TooltipHost
  tooltipProps={{
  onRenderContent: () => (
- <div style={{ paddingBottom: 3 }}>{item.docLink}</div>
+ <div
+ style={{ paddingBottom: 3 }}>
+ {item.docLink}
+ </div>
  )
  }}
  id={getId()}
@@ -373,7 +376,7 @@ export class SampleQueries extends Component<ISampleQueriesProps, any> {
  }
  };
 
- const columns = [
+ const columns: IColumn[] = [
  {
  key: 'button',
  name: '',