Settings dialog accessibility

[kirkkala]

First, thank you for creating this project, it was quick and easy to implement the cookie consent requirement for a Drupal 9 site using cookies module.

But unfortunately the settings dialog has some accessibility issues, plesae find attached screenshot that define the accessibility blocker of user is not able to change the cookie settings due to negative tabindex of .cookiesjsr-service-group--tab.

---

Also the css rules of .cookiesjsr-switch could have focus pseudo classes (&:focus, &:focus-visible, &:focus-within for .cookiesjsr-switch::after) to help indicating the tabindex to control the settings.

The repository has only minified javascript files - are the source files somewhere so I could've create a pull request to fix this or do you @jfeltkamp want to have the full control and privilege of making all code changes :)

[jfeltkamp]

I fixed that in the current version 1.0.8

1. Now you can cycle through the tabs with cursor up and down.
2. The Focus is set on the first tab button, when dialog is opened. When you change the tabs with cursor up or down, the focus is set on the active tab button.
3. The switch has also a focus style now.

[bmunslow]

Hi @jfeltkamp

First up, amazing tool, thanks for sharing!

After the latest accessibility improvements, a tag remains inside the .cookiesjsr--app wrapper when you click the accept / deny buttons.

In my custom theme, I relied on CSS pseudo-class .cookiesjsr--app:empty for styling, which of course doesn't apply now due to the tag.

• Should <span tabindex="0"></span> remain inside wrapper .cookiesjsr--app if the banner is not there?
• Any chance wrapper .cookiesjsr--app could remain completely empty when the banner disappears?

Of course, we need <span tabindex="0"></span> back again when triggering the settings dialog.

[jfeltkamp]

Hi @bmunslow, yes, you are right. Should be removed when dialog is closed. It is fixed in >= 1.0.10