Support » Plugin: GDPR Cookie Compliance » Settings modal is not keyboard accessible

  • Resolved catherinephamiss

    (@catherinephamiss)


    I’ve made changes to the cookie info bar to make it fully keyboard accessible. I’ve started making changes to the settings popup, but am having trouble with making the sliders/checkboxes fully keyboard accessible. Do you have any recommendations? Or any plans to make this plugin fully keyboard accessible?
    Thanks!

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author Moove Agency

    (@mooveagency)

    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

    catherinephamiss

    (@catherinephamiss)

    @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

    catherinephamiss

    (@catherinephamiss)

    @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.

    morcth

    (@morcth)

    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

Viewing 7 replies - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.