Settings modal is not keyboard accessible

Hi @catherinephamiss,

Thanks for using our plugins and for your suggestion.
Currently the plugin is not keyboard accessible, we plan to implement this feature in a future version. In the meanwhile, you can edit the html layout: simply copy the “gdpr-modules” folder from the plugin directory to your theme directory and you can add extra attributes.

Hope this helps.

Hello,

I’m also having trouble making the sliders accessible with the keyboard.

Do you have any idea on when the plugin would be fully accessible with the keyboard or code to help with those sliders?

Thanks and Happy New Year!

@catherinephamiss – I see you set this as resolved… could you possibly show me the code you used on the sliders?

Thanks,
Josh

@morcth This is the javascript workaround I implemented:

    const cookieCheckboxes = document.querySelectorAll("input[type='checkbox']");
    cookieCheckboxes.forEach((checkbox, i) => {

        const checkboxSlider = checkbox.querySelector(".cookie-slider.cookie-round");
        if (checkbox.checked) {
            checkboxSlider.classList.add("cookie-slider-selected");
        } else {
            checkboxSlider.classList.remove("cookie-slider-selected");
        }

        if (checkbox.checked &&
            checkbox.closest(".moove-gdpr-tab-main").id === "strict-necessary-cookies"
        ) {
            cookieCheckboxes.forEach((checkbox, i) => {
                if (checkbox.disabled) {
                    checkbox.removeAttribute("disabled");
                }
            })
        }

        if (checkbox.checked &&
            !checkbox.closest(".moove-gdpr-tab-main").id === "strict-necessary-cookies"
        ) {
            cookieCheckboxes[0].checked = true;
        }
    })

Thank you @catherinephamiss!

I’m wondering what file you put that in and also what else you needed to do.

Was it just changing the span tags to a tags in the gdpr-modules folder in your theme?

I guess you also created a class that mimicked the on and off styles?

Thanks again,
Josh

@morcth where you put it depends on how you have your theme(s) set up. The easiest way would be to put it in a footer script. I created a class called “.cookie-slider-selected” and used a little bit of CSS to replicate the sliding function. I did a bunch of other stuff as well to make the entire banner and modal accessible, which I can show you if you’re interested.

This will help for now… thank you very much @catherinephamiss

I will work on this today and next week and hopefully get it going.

Josh

Hi @morcth

The Cookie Banner and Cookie Settings screen is now keyboard accessible. Please update our plugin to the latest version.

Hope this helps.
Thanks