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.

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

Collapsed footer link groups not focusable #2208

Open
GCHQ-Developer-847 opened this issue Jul 22, 2024 · 0 comments
Open

Collapsed footer link groups not focusable #2208

GCHQ-Developer-847 opened this issue Jul 22, 2024 · 0 comments
Labels
footer component The generic component, includes both the web component and the React component type: bug 🐛 Something isn't working

Comments

@GCHQ-Developer-847
Copy link
Contributor

Summary of the bug

When viewing a footer which has grouped links on a small screen, the collapsed groups are not focusable.

🪜 How to reproduce

  1. Go to a footer with grouped links, e.g. Grouped links story
  2. Make the screen / window size small enough to make the groups of links collapsed
  3. Try tabbing to the link groups
  4. See that they are not focusable and therefore can't be opened by keyboard

🖥 📱 Device

  • Browser: All browsers

🧐 Expected behaviour

The footer link groups should be focusable and allow the user to expand the link groups using the keyboard to access the links within.

📝 Acceptance Criteria

Given that I am viewing a footer with grouped links on a small screen
When I tab to the footer
Then the footer link groups become focussed and allow me to expand the groups when I press Enter.

Additional info

Not sure what the focus indicator should look like when the footer link group is expanded. Would the whole expanded group be focused, or just the top section (a bit like accordion components)?

@GCHQ-Developer-847 GCHQ-Developer-847 added type: bug 🐛 Something isn't working footer component The generic component, includes both the web component and the React component labels Jul 22, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
footer component The generic component, includes both the web component and the React component type: bug 🐛 Something isn't working
Projects
Status: No status
Development

No branches or pull requests

1 participant