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]: Radio buttons are not associated with their labels 'Background color'. #4231

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

[PWA Builder]: Radio buttons are not associated with their labels 'Background color'. #4231

Anshi0420 opened this issue Aug 7, 2023 · 13 comments
Assignees
@Jaylyn-Barbee
Labels
a11y Accessibility-related bugs A11ySev3 Accessibility Team tag - P3 items A11yWCAG Accessibility Team tag - Web Content Accessibility Guidelines Accessibility [E+D] Issues found by the accessibility E+D Team at Microsoft bug 🐛 CT-July23 CT-June24 HCL-E+D needs author feedback 📝 no-recent-activity 📉 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?

Radio buttons are not associated with their labels 'Background color', narrator only announces the information of the radio button as Best Guess radio button 1 of 3 selected.

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 Turn on Narrator using Win + Ctrl + enter.
  4. Navigate to the radio button Best Guess present under Background color label.
  5. Observe the narrator's announcement.

What do you expect to happen?

Radio buttons present under labels 'Background color' must be associated with their labels, also Checkboxes must also be associated with their visible label 'Platforms'.

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/imageGenerator
Screen Reader: Narrator

Additional context

Note:

  1. Issue is also repro for the checkboxes present under Platforms label.
  2. Generate package button is not associate with platform heading at https://www.pwabuilder.com/portals?site=https://webboard.app

Observation:
Issue is also repro with NVDA.

User Experience:
If the radio buttons and checkboxes will not be associated with their visible labels, then the screen reader dependent users will not get the information of the purpose of the radio buttons and checkboxes and they may get confused in accessing the UI properly.

WCAG Reference:
https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html

Attachments:

Code_Snip

Radio.buttons.are.not.associated.with.their.labels.mp4
Note_Generate.packages.button.are.not.associated.with.their.labels.mp4
@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 HCL-E+D CT-July23 labels Aug 7, 2023
@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 .

2 similar comments
@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 .

@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 .

@Jaylyn-Barbee Jaylyn-Barbee changed the title [PWA Builder-Blog]: Radio buttons are not associated with their labels 'Background color'. [PWA Builder]: Radio buttons are not associated with their labels 'Background color'. Aug 28, 2023
@Jaylyn-Barbee Jaylyn-Barbee self-assigned this Aug 28, 2023
@Jaylyn-Barbee Jaylyn-Barbee mentioned this issue Aug 28, 2023
Merged
3 tasks
@Jaylyn-Barbee Jaylyn-Barbee moved this to In Review 🤔 in PWABuilder Aug 28, 2023
Jaylyn-Barbee added a commit that referenced this issue Aug 29, 2023
@Jaylyn-Barbee
[Accessibility] Fix to radios and checkboxes not being associated wit…
3b42d07 
…h their labels (#4328)

fixes #4231
<!-- 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. -->
Radios and Checkboxes not associated with their labels

## Describe the new behavior?
Radios and Checkboxes explicitly link to the labels.

## 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
Need to double check that I interpreted and resolved the issue
correctly.
@Jaylyn-Barbee
Copy link
Contributor

Hello @Anshi0420,

Do you mind double checking that I fixed this properly. You can test this on our preview link at https://preview.pwabuilder.com/imageGenerator

@microsoft-github-policy-service
Copy link
Contributor

This issue has been automatically marked as "no-recent-activity" because it requires author feedback but has not had any activity for 7 days. It will be closed if no further activity occurs within 7 days of this comment.

@microsoft-github-policy-service
Copy link
Contributor

This issue has been automatically closed because it was marked as requiring author feedback but has not had any activity for 7 days.

@github-project-automation github-project-automation bot moved this from In Review 🤔 to Done ✔️ in PWABuilder Sep 14, 2023
@Jaylyn-Barbee Jaylyn-Barbee reopened this Sep 14, 2023
@github-project-automation github-project-automation bot moved this from Done ✔️ to Todo 📃 in PWABuilder Sep 14, 2023
@microsoft-github-policy-service
Copy link
Contributor

This issue has been automatically closed because it was marked as requiring author feedback but has not had any activity for 7 days.

2 similar comments
@microsoft-github-policy-service
Copy link
Contributor

This issue has been automatically closed because it was marked as requiring author feedback but has not had any activity for 7 days.

@microsoft-github-policy-service
Copy link
Contributor

This issue has been automatically closed because it was marked as requiring author feedback but has not had any activity for 7 days.

@github-project-automation github-project-automation bot moved this from Todo 📃 to Done ✔️ in PWABuilder Sep 22, 2023
@Suriya617 Suriya617 added A11ySev3 Accessibility Team tag - P3 items and removed A11ySev2 Accessibility Team tag - P2 items labels Jun 20, 2024
@Suriya617
Copy link
Collaborator

Verified this issue is still repro on the latest environment:
image

@Suriya617 Suriya617 reopened this Jun 20, 2024
@github-project-automation github-project-automation bot moved this from Done ✔️ to Todo 📃 in PWABuilder Jun 20, 2024
@Suriya617 Suriya617 mentioned this issue Jun 27, 2024
Closed
@microsoft-github-policy-service Microsoft GitHub Policy Service
Copy link
Contributor

This issue has been automatically marked as "no-recent-activity" because it requires author feedback but has not had any activity for 7 days. It will be closed if no further activity occurs within 7 days of this comment.

@microsoft-github-policy-service Microsoft GitHub Policy Service
Copy link
Contributor

This issue has been automatically closed because it was marked as requiring author feedback but has not had any activity for 7 days.

@github-project-automation github-project-automation bot moved this from Todo 📃 to Done ✔️ in PWABuilder Jul 11, 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 A11ySev3 Accessibility Team tag - P3 items A11yWCAG Accessibility Team tag - Web Content Accessibility Guidelines Accessibility [E+D] Issues found by the accessibility E+D Team at Microsoft bug 🐛 CT-July23 CT-June24 HCL-E+D needs author feedback 📝 no-recent-activity 📉 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
3 participants
@Jaylyn-Barbee @Suriya617 @Anshi0420