Collapsed footer link groups not focusable
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
- Go to a footer with grouped links, e.g. Grouped links story
- Make the screen / window size small enough to make the groups of links collapsed
- Try tabbing to the link groups
- 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)?
Giving the ic-section-container a tabindex="0" seems to fix the issue.