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: Accessibility bugs - June #991

Merged
merged 5 commits into from
Jun 16, 2021
Merged

Fix: Accessibility bugs - June #991

merged 5 commits into from
Jun 16, 2021

Conversation

ElinorW
Copy link
Contributor

@ElinorW ElinorW commented Jun 14, 2021

Overview

This PR fixes multiple accessibility issues present on GE:

  • Sign in to Graph Explorer button - The aria-label is updated as 'Sign in to Graph explorer' and hence the Narrator announces it as "Sign in to Graph explorer button" whereas before it announced it as 'Sign in to Button Button'.
  • Expand/Collapse group button under the History tab item - Narrator announces as 'Expand today' / 'Collapse Today' as opposed to 'Today expand collapse group button collapsed today'.
  • Access Token tab - Replaced label component with a blocked type messageBar. This ensures the screen reader announces the message to users.
  • Modify Permissions (Preview) ->Admin consent required column - The column heading text is fully visible at 100% zoom. Previously, the text had an overflow.

Testing Instructions

Step 1: Open the above URL in Edge browser.
Step 2: Open Narrator using 'Win + Ctrl+ Enter' key.
Step 3: Navigate to Sign in to graph explorer button using the Tab key.
Step 4: Observe the Fix.
Step 5: Navigate to the History tab item for the page by the Tab and Right Arrow key and activate it.
Step 6: Navigate to the Expand collapse group button by Tab key and activate it.
Step 7: Observe the narration here
Step 8: Navigate to the Modified permission (Preview) button by tab key and activate it by using the Enter key.
Step 9: Observe 'Admin Consent required' column fix

@github-actions
Copy link
Contributor

Azure Static Web Apps: Your stage site is ready! Visit it here: https://jolly-sand-0ac78c710-991.centralus.azurestaticapps.net

@ElinorW ElinorW marked this pull request as draft June 14, 2021 12:56
@ElinorW ElinorW changed the title Fix: Update aria-label for sign in button Fix: Accessibility bugs - June Jun 14, 2021
@github-actions
Copy link
Contributor

Azure Static Web Apps: Your stage site is ready! Visit it here: https://jolly-sand-0ac78c710-991.centralus.azurestaticapps.net

@github-actions
Copy link
Contributor

Azure Static Web Apps: Your stage site is ready! Visit it here: https://jolly-sand-0ac78c710-991.centralus.azurestaticapps.net

@github-actions
Copy link
Contributor

Azure Static Web Apps: Your stage site is ready! Visit it here: https://jolly-sand-0ac78c710-991.centralus.azurestaticapps.net

@github-actions
Copy link
Contributor

Azure Static Web Apps: Your stage site is ready! Visit it here: https://jolly-sand-0ac78c710-991.centralus.azurestaticapps.net

@ElinorW ElinorW marked this pull request as ready for review June 15, 2021 10:06
Comment on lines +47 to +49
return <MessageBar messageBarType={MessageBarType.blocked}>
<FormattedMessage id='Sign In to see your access token.' />
</Label>;
</MessageBar>;
Copy link
Collaborator

Choose a reason for hiding this comment

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

This looks cool!

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Thanks 👍🏾

@ElinorW ElinorW merged commit e2f7c37 into dev Jun 16, 2021
@ElinorW ElinorW deleted the fix/accessibility-bugs branch June 17, 2021 12:37
@ElinorW ElinorW restored the fix/accessibility-bugs branch June 23, 2021 07:35
thewahome added a commit that referenced this pull request Jul 6, 2021
* Fix: Accessibility bugs - June (#991) 

* Fix: Clear the user's profile on sign out (#1000)

* Fix: repopulate modify permissions when panel closed (#999)

* Fix: Accessibility bugs (Jul-Sep) (#1010)

* Task: Collect telemetry data for fetching adaptive card templates (#1004)

* Task: Capture telemetry for response headers copy action (#1003)

* Task: Add telemetry for Report an Issue Link (#1011)

* Fix: url truncation (#1012)
acchiang pushed a commit to LokiLabs/microsoft-graph-explorer-v4 that referenced this pull request Jul 6, 2021
* correct aria-label for sign in button

* Update ariaLabel for Expand/Collapse button

* change from label component to  messageBar

* remove unused styling

* adjust column width
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.

2 participants