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]: Spin button form field does not have label. #4229

Closed
Anshi0420 opened this issue Aug 6, 2023 · 12 comments
Closed

[PWA Builder]: Spin button form field does not have label. #4229

Anshi0420 opened this issue Aug 6, 2023 · 12 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 6, 2023 •
edited
Loading

What happened?

Spin button form field present on the URL does not have label, narrator does not announce the information of the 'Padding' label.

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?

Spin button form field present on the URL must be associated with the label 'Padding'.

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
Tool: AI4W

Additional context

Element path:
app-index,image-generator,sl-input,#input

Snippet:

How to fix:
Fix all of the following:
Form element has explicit that is hidden

User Experience:
If the label of the form element will not be defined then the users depend on screen reader will not get the information of the purpose of the spin button, 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_Spin button form field does not have label
Code_Snip
@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 6, 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 .

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

@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]: Spin button form field does not have label. [PWA Builder]: Spin button form field does not have label. Aug 28, 2023
@Jaylyn-Barbee Jaylyn-Barbee self-assigned this Aug 29, 2023
@Jaylyn-Barbee Jaylyn-Barbee moved this to In Review 🤔 in PWABuilder Aug 30, 2023
@Jaylyn-Barbee Jaylyn-Barbee mentioned this issue Aug 30, 2023
Merged
3 tasks
github-merge-queue bot pushed a commit that referenced this issue Aug 30, 2023
@Jaylyn-Barbee
[Accessibility] Fixed focus no appearing on black buttons and label o…
fbc8643 
…n input box in Image Gen page. (#4335)

fixes [#4229](#4229),
[#4218](#4218) and
[#4228](#4228)
<!-- 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. For the padding input on the image gen page there was no accessible
label
2. For some of our black buttons the focus ring wasn't showing when
tabbed over
3. Incorrect aria roles defined

## Describe the new behavior?
1. Input has a label
2. New visible focus ring.
3. Removed unnecessary definitions of role.

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

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

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

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

@github-project-automation github-project-automation bot moved this from In Review 🤔 to Done ✔️ in PWABuilder Sep 21, 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 .

@Suriya617 Suriya617 added the A11yTTValidated Accessibility team tag for closed bugs label Jun 20, 2024
@Suriya617
Copy link
Collaborator

Closing this issue as fixed.

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
3 participants
@Jaylyn-Barbee @Suriya617 @Anshi0420