dpc-sdp / ripple

Ripple is the frontend framework for Single Digital Presence, delivered using Nuxt and Vue.js
Apache License 2.0
61 stars 37 forks source link

@dpc-sdp/ripple-site-footer - When in responsive mode, elements in the footer become collapsed and are not keyboard accessible. #1290

Open haloabove opened 1 year ago

haloabove commented 1 year ago

Describe the bug @dpc-sdp/ripple-site-footer When in responsive mode, elements in the footer become expandable but these are not keyboard accessible. Not WCAG compliant.

To Reproduce Steps to reproduce the behaviour:

  1. Install ripple site footer, pass nav elements
  2. In small resolutions, nav items are collapsed and don't come in to focus when navigating with keyboard Tab key.

Expected behaviour

  1. Expected to be able to focus the drop down chevrons
  2. Expected to be able to collapse/expand the accordion nav item with space/enter keys

Actual behaviour

  1. Tab keys skip over the footer nav items

Screenshots If applicable, add screenshots to help explain your problem.

Versions

Desktop (please complete the following information):

Smartphone (please complete the following information):

Additional context Add any other context about the problem here.