Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix: screen reader announces search results status message #644

Merged
merged 3 commits into from
Jul 21, 2020

Conversation

ElinorW
Copy link
Collaborator

@ElinorW ElinorW commented Jul 20, 2020

Overview

Added announced component which enables a screen reader to announce the 'Search sample queries' and 'Search permissions' (search result) information.

Testing Instructions

  • Use Microsoft Edge browser
  • Ensure you have a screen reader turned on (e.g Windows Narrator)
  1. Navigate to the 'Sample Queries' button by tab key and select it.
  2. Navigate 'Sample Queries' search edit field and type 'Retrieve'.
  3. Verify the screen reader's behavior. The screen reader announces search results after every letter typed.

@ElinorW ElinorW requested review from ddyett and thewahome July 20, 2020 19:29
@@ -37,6 +40,7 @@ const PanelList = ({ messages, permissions,
searchValueChanged(event, newValue)}
styles={{ field: { paddingLeft: 10 } }}
/>
<Announced message={`${permissions.length} search results available.`}/>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

string localization

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since it's only a message that is being read, I tested this out with a Spanish narrator, and the narrator translates it itself

@ddyett ddyett requested review from ddyett and a team July 20, 2020 23:54
@@ -1,4 +1,7 @@
import { DetailsList, DetailsListLayoutMode, IColumn, Label, SearchBox, SelectionMode } from 'office-ui-fabric-react';
import {
Announced, DetailsList, DetailsListLayoutMode, IColumn,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Place each imported class on a newline.

import {
Announced,
DetailList,
...
} from '..'

@@ -37,6 +40,7 @@ const PanelList = ({ messages, permissions,
searchValueChanged(event, newValue)}
styles={{ field: { paddingLeft: 10 } }}
/>
<Announced message={`${permissions.length} search results available.`}/>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does the announce message get triggered only when a search has happened?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah it does

@ElinorW ElinorW merged commit 012d794 into dev Jul 21, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants