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.

Sign up for GitHub

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

Jump to bottom

[PWA Builder]: No discernible texts are defined for the next and previous buttons. #4233

Closed
Anshi0420 opened this issue Aug 7, 2023 · 7 comments
Closed

[PWA Builder]: No discernible texts are defined for the next and previous buttons. #4233

Anshi0420 opened this issue Aug 7, 2023 · 7 comments
Assignees
@Jaylyn-Barbee
Labels
a11y Accessibility-related bugs A11yAuto Issues found using Accessibility Insights Tool by E+D Accessibility Team A11ySev2 Accessibility Team tag - P2 items A11yTTValidated Accessibility team tag for closed bugs A11yWCAG Accessibility Team tag - Web Content Accessibility Guidelines Accessibility [E+D] Issues found by the accessibility E+D Team at Microsoft bug 🐛 CT-July23 HCL-E+D needs attention 👋 needs triage 🔍 Product-PWABuilder For Tracking PWABuilder bugs by Accessibility E+D team PWABuilder_Web

Comments

@Anshi0420
Copy link
Collaborator

Anshi0420 commented Aug 7, 2023 •
edited
Loading

What happened?

No discernible texts are defined for the next and previous buttons, narrator announces it as button only.

How do we reproduce the behavior?

Repro Steps:

  1. Open the PWA Builder URL in Anaheim dev browser.
  2. PWA Builder page will appear.
  3. Now Run the Fast Pass from AI4W.
  4. Observe the issue.

What do you expect to happen?

Proper discernible texts must be defined as next page and previous page for the buttons.

What environment were you using?

Test Environment:
OS Build: Windows 11 Enterprise Insider Preview 22H2 (23493.1000)
Edge Browser: Version 115.0.1880.3 (Official build) dev (64-bit)
URL: https://www.pwabuilder.com/reportcard?site=https://webboard.app
User ID: V-
Screen Reader: Narrator
Tool: AI4W

Additional context

Element path:
app-index,app-report,.pagination-buttons[type="button"]:nth-child(3)

Snippet:

How to fix:
Fix any of the following:
Element does not have inner text that is visible to screen readers
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute
Element's default semantics were not overridden with role="none" or role="presentation"

Observation:
Issue is also repro with NVDA.

User Experience:
If no discernible texts will be defined for the buttons, then the screen reader dependent users will not get the information of the purpose of the buttons, and they may get confused in accessing the UI properly.

WCAG Reference:
https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html

Attachments:

MAS4.1.2.mp4

AI4W

Code_Snip

image
@Anshi0420 Anshi0420 added bug 🐛 needs triage 🔍 a11y Accessibility-related bugs A11yWCAG Accessibility Team tag - Web Content Accessibility Guidelines Accessibility [E+D] Issues found by the accessibility E+D Team at Microsoft A11ySev2 Accessibility Team tag - P2 items Product-PWABuilder For Tracking PWABuilder bugs by Accessibility E+D team A11yAuto Issues found using Accessibility Insights Tool by E+D Accessibility Team HCL-E+D CT-July23 labels Aug 7, 2023
@Suriya617 Suriya617 mentioned this issue Aug 17, 2023
Closed
@microsoft-github-policy-service
Copy link
Contributor

This issue has been marked as "needs attention 👋" since it has not been triaged for 7 days. Please triage the issue .

@microsoft-github-policy-service
Copy link
Contributor

This issue has been marked as "needs attention 👋" since it has not been triaged for 7 days. Please triage the issue .

1 similar comment
@microsoft-github-policy-service
Copy link
Contributor

This issue has been marked as "needs attention 👋" since it has not been triaged for 7 days. Please triage the issue .

@Jaylyn-Barbee Jaylyn-Barbee changed the title [PWA Builder-Blog]: No discernible texts are defined for the next and previous buttons. [PWA Builder]: No discernible texts are defined for the next and previous buttons. Aug 28, 2023
@Jaylyn-Barbee Jaylyn-Barbee self-assigned this Aug 29, 2023
@Jaylyn-Barbee Jaylyn-Barbee mentioned this issue Aug 30, 2023
Merged
3 tasks
@Jaylyn-Barbee Jaylyn-Barbee moved this to In Review 🤔 in PWABuilder Aug 30, 2023
github-merge-queue bot pushed a commit that referenced this issue Aug 30, 2023
@Jaylyn-Barbee
[Accessibility] Updates to the action items prev and next buttons (#4334
a0496cc 
)

fixes #4254 and #4233
<!-- Link to relevant issue (for ex: "fixes #1234") which will
automatically close the issue once the PR is merged -->

## PR Type
<!-- Please uncomment one ore more that apply to this PR -->

Bugfix 
<!-- - Feature -->
<!-- - Code style update (formatting) -->
<!-- - Refactoring (no functional changes, no api changes) -->
<!-- - Build or CI related changes -->
<!-- - Documentation content changes -->
<!-- - Sample app changes -->
<!-- - Other... Please describe: -->


## Describe the current behavior?
<!-- Please describe the current behavior that is being modified or link
to a relevant issue. -->
1. Buttons didn't have a name or label
2. Buttons didn't have audio feedback when clicked and using narrator

## Describe the new behavior?
1. Buttons named 
2. Buttons announce the page number when clicked in narrator.

## PR Checklist
- [x] Test: run `npm run test` and ensure that all tests pass
- [x] Target main branch (or an appropriate release branch if
appropriate for a bug fix)
- [x] Ensure that your contribution follows [standard accessibility
guidelines](https://docs.microsoft.com/en-us/microsoft-edge/accessibility/design).
Use tools like https://webhint.io/ to validate your changes.

## Additional Information
@microsoft-github-policy-service
Copy link
Contributor

This issue has been marked as "needs attention 👋" since it has not been triaged for 7 days. Please triage the issue .

1 similar comment
@microsoft-github-policy-service
Copy link
Contributor

This issue has been marked as "needs attention 👋" since it has not been triaged for 7 days. Please triage the issue .

@maraah1
Copy link
Collaborator

maraah1 commented Sep 21, 2023

Changes merged

@maraah1 maraah1 closed this as completed Sep 21, 2023
@github-project-automation github-project-automation bot moved this from In Review 🤔 to Done ✔️ in PWABuilder Sep 21, 2023
@Suriya617
Copy link
Collaborator

Closing this issue as fixed

@Suriya617 Suriya617 added the A11yTTValidated Accessibility team tag for closed bugs label Jun 20, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@Jaylyn-Barbee Jaylyn-Barbee

Labels
a11y Accessibility-related bugs A11yAuto Issues found using Accessibility Insights Tool by E+D Accessibility Team A11ySev2 Accessibility Team tag - P2 items A11yTTValidated Accessibility team tag for closed bugs A11yWCAG Accessibility Team tag - Web Content Accessibility Guidelines Accessibility [E+D] Issues found by the accessibility E+D Team at Microsoft bug 🐛 CT-July23 HCL-E+D needs attention 👋 needs triage 🔍 Product-PWABuilder For Tracking PWABuilder bugs by Accessibility E+D team PWABuilder_Web
Projects
PWABuilder
Status: Done ✔️
Milestone
No milestone
Development

No branches or pull requests
4 participants
@maraah1 @Jaylyn-Barbee @Suriya617 @Anshi0420