Skip to content
This repository has been archived by the owner on Jun 29, 2023. It is now read-only.

A11y: BlockSection toggle-display="switch". Can't use keyboard. #801

Closed
asangma opened this issue Feb 3, 2020 · 7 comments
Closed

A11y: BlockSection toggle-display="switch". Can't use keyboard. #801

asangma opened this issue Feb 3, 2020 · 7 comments
Assignees
@asangma
Labels
4 - verified a11y bug Something isn't working p - high
Milestone
Hot Dog Princess

Comments

@asangma
Copy link
Contributor

asangma commented Feb 3, 2020

Summary

When a block-section has toggle-display="switch", the label, which triggers showing/hiding of the content, can't be focused. The switch can be focused, but keyboard commands don't toggle the content.

Actual Behavior

block-section-focus2

Expected Behavior

  • ability to focus the label node
  • keyboard accessibility to toggle section content when toggle-display="switch"

Reproduction Steps

  1. See block demo
  2. Add toggle-display="switch" to one of the sections.

Relevant Info

Mentioned in #527.

cc @kat10140
@asangma asangma added bug Something isn't working 0 - new a11y p - high labels Feb 3, 2020
@asangma asangma added this to the Hot Dog Princess milestone Feb 3, 2020
@asangma
Copy link
Contributor Author

asangma commented Feb 3, 2020

That cat is all like, SUCH A11Y. MUCH INTRIGUE.

jcfranco added a commit that referenced this issue Feb 4, 2020
@jcfranco
Issue #801: Toggle section (with switch) when the header receives Ent…
8db77d9 
…er/Space keys.
jcfranco added a commit that referenced this issue Feb 5, 2020
@jcfranco
Issue #801: Fix test.
c8b7f89
jcfranco added a commit that referenced this issue Feb 5, 2020
@jcfranco
Issue #801: Prevent switch interaction.
0365058
@jcfranco jcfranco mentioned this issue Feb 5, 2020
Merged
jcfranco added a commit that referenced this issue Feb 5, 2020
@jcfranco
fix(block-section): toggle section (with toggleDisplay=switch) when E…
5fa12ec 
…nter or Space key is pressed (#809)

#801
@jcfranco
Copy link
Member

jcfranco commented Feb 5, 2020

Installed.

Note: The switch will still be keyboard-focusable until we update calcite-components to v1.0.0-beta.19 (Esri/calcite-design-system#317)

@jcfranco jcfranco assigned asangma and unassigned jcfranco Feb 5, 2020
@asangma
Copy link
Contributor Author

asangma commented Feb 5, 2020

Très bon!

@asangma asangma closed this as completed Feb 5, 2020
@asangma
Copy link
Contributor Author

asangma commented Feb 6, 2020

@AdelheidF Forgot to tag you on this. The block-section switch mode should be fixed.

@AdelheidF
Copy link

AdelheidF commented Feb 21, 2020 •
edited
Loading

The toggle itself can no longer get the focus. I assume this is the fix. So all good now.

image

@jcfranco
Copy link
Member

@AdelheidF Correct. 😄

@AdelheidF
Copy link

AdelheidF commented Feb 24, 2020 •
edited
Loading

Just as an FYI, this makes it weird in certain cases.
E.g. here the first and third toggle buttons are part of sections, the middle one is just a toggle button by itself. Focus on the toggle itself is not very obvious.

Flow of focus:
image

image

image

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

@asangma asangma

Labels
4 - verified a11y bug Something isn't working p - high
Projects
None yet
Milestone
Hot Dog Princess
Development

No branches or pull requests
3 participants
@jcfranco @asangma @AdelheidF