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

[A11Y] Unable to select issue category/browser icon/screenshot upload using “Tab” key #3396

Closed
softvision-oana-arbuzov opened this issue Jul 16, 2020 · 2 comments
Closed

[A11Y] Unable to select issue category/browser icon/screenshot upload using “Tab” key #3396

softvision-oana-arbuzov opened this issue Jul 16, 2020 · 2 comments
Assignees
@miketaylr
Labels
a11y lang: HTML lang: JS

Comments

@softvision-oana-arbuzov
Copy link
Member

softvision-oana-arbuzov commented Jul 16, 2020 •
edited
Loading

Browser / Version: Firefox Nightly 80.0a1 (2020-07-15)
Operating System: Windows 10 Pro

Steps to Reproduce:

  1. Navigate to https://webcompat.com/issues/new
  2. Using "Tab" key, navigate to the URL field and fill it in.
  3. Using "Tab" key, navigate to "Confirm" button.
  4. Using "Enter" key, activate "Confirm" button and move to the next section.
  5. Using "Tab" key, try to select a category.
  6. Observe behavior.

Expected Behavior:
Category is active and can be selected.

Actual Behavior:
Category can't be selected.

Notes:

  1. Screenshot attached.
  2. The issue is also reproducible for browser selection and screenshot selection.
  3. Taking this in consideration a report can't be submitted using keyboard keys.
    download
  4. According to "Inspector>Accessibility" tab, the elements "must be focusable and should have interactive semantics".
    image

Watchers:
@softvision-oana-arbuzov
@cipriansv
@softvision-oana-arbuzov softvision-oana-arbuzov changed the title [A11Y] Unable to select issue category/browser icon/trigger screenshot upload using “Tab” key [A11Y] Unable to select issue category/browser icon/screenshot upload using “Tab” key Jul 16, 2020
This was referenced Jul 21, 2020
Closed
Closed
Closed
@miketaylr miketaylr self-assigned this Aug 19, 2020
@miketaylr
Copy link
Member

Let's maybe handle the screenshot stuff in #3419.

miketaylr pushed a commit that referenced this issue Aug 19, 2020
Issue #3396 - Part 1. Add tabIndex=0 to PrefixedRadioField labels
0a90b81 
If we want to have control over attributes, we have to iterate
over them ourselves, rather than rely on the default serialization.
miketaylr pushed a commit that referenced this issue Aug 20, 2020
Issue #3396 - Part 2. Add keydown listener to label elements.
c95032f
miketaylr pushed a commit that referenced this issue Aug 20, 2020
Issue #3396 - Add :focus styles for .icon-containers
719cad7
miketaylr pushed a commit that referenced this issue Aug 20, 2020
Issue #3396 - Part 4. Add functional tests.
87156fd
miketaylr pushed a commit that referenced this issue Aug 20, 2020
Issue #3396 - Part 1. Add tabIndex=0 to PrefixedRadioField labels
401cbfb 
If we want to have control over attributes, we have to iterate
over them ourselves, rather than rely on the default serialization.
miketaylr pushed a commit that referenced this issue Aug 20, 2020
Issue #3396 - Part 2. Add keydown listener to label elements.
f6b14ab
miketaylr pushed a commit that referenced this issue Aug 20, 2020
Issue #3396 - Part 3. Add :focus styles for .icon-containers
fe8b39e
miketaylr pushed a commit that referenced this issue Aug 20, 2020
Issue #3396 - Part 4. Add functional tests.
ea3b677
miketaylr pushed a commit that referenced this issue Aug 25, 2020
Issue #3396 - Part 1. Add tabIndex=0 to PrefixedRadioField labels
0d7daed 
If we want to have control over attributes, we have to iterate
over them ourselves, rather than rely on the default serialization.
miketaylr pushed a commit that referenced this issue Aug 25, 2020
Issue #3396 - Part 2. Add keydown listener to label elements.
4303f79
miketaylr pushed a commit that referenced this issue Aug 25, 2020
Issue #3396 - Part 3. Add :focus styles for .icon-containers
83393cf
miketaylr pushed a commit that referenced this issue Aug 25, 2020
Issue #3396 - Part 4. Add functional tests.
2de9fe5
miketaylr pushed a commit that referenced this issue Aug 25, 2020
Issue #3396 - Part 2. Add keydown listener to label elements.
289e5ad
miketaylr pushed a commit that referenced this issue Aug 25, 2020
Issue #3396 - Part 3. Add :focus styles for .icon-containers
516a265
miketaylr pushed a commit that referenced this issue Aug 25, 2020
Issue #3396 - Part 4. Add functional tests.
77d319b
miketaylr pushed a commit that referenced this issue Aug 26, 2020
Issue #3396 - Part 2. Add keydown listener to label elements.
495325c
miketaylr pushed a commit that referenced this issue Aug 26, 2020
Issue #3396 - Part 3. Add :focus styles for .icon-containers
5abad7b
miketaylr pushed a commit that referenced this issue Aug 26, 2020
Issue #3396 - Part 4. Add functional tests.
5d6f6db
miketaylr pushed a commit that referenced this issue Aug 26, 2020
Issue #3396 - Part 2. Add keydown listener to label elements.
2813fa2
miketaylr pushed a commit that referenced this issue Aug 26, 2020
Issue #3396 - Part 3. Add :focus styles for .icon-containers
c828ea9
miketaylr pushed a commit that referenced this issue Aug 26, 2020
Issue #3396 - Part 4. Add functional tests.
e63afd2
@softvision-oana-arbuzov
Copy link
Member Author

I can confirm this is fixed.

Tested with:
Browser / Version: Firefox Nightly 82.0a1 (2020-09-16), Chrome 85.0.4183.102
Operating System: Windows 10 Pro

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@miketaylr miketaylr

Labels
a11y lang: HTML lang: JS
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@miketaylr @softvision-oana-arbuzov