Accessbility Issues

After calling a page with the optin window overlaying the page, the keyboard focus is not in the keyboard focus is not in the optin window, but in the page behind it. The means that you can't enter the optin window without the mouse and you can't enter the cannot enter the page.

The checkboxes in the optin window cannot be operated by keyboard (e.g. by people who cannot use a mouse). However, this is required for barrier-free necessary. Maybe you can make the checkboxes keyboard keyboard - if necessary, you can (optionally) replace them with the standard browser checkboxes. checkboxes of the browser.

changed milestone to %4.1.0

added bug label

To whom it may concern, this is our current approach for having the plugin behave somewhat "satisfactory" from the a11y point of view:

export function initCookieconsent () {
  const pluginMode = document.getElementsByClassName('sg-cookie-optin-plugin').length > 0;

  const cookieOptinFocusTarget = document.getElementById('cookieOptinFocusTarget')
  if (cookieOptinFocusTarget && !pluginMode) {
    document.getElementById('cookieOptinFocusTarget').focus()
  }

  const cookieDetailList = document.getElementsByClassName('sg-cookie-optin-box-cookie-detail-list')[0]
  const openMoreLink = document.getElementById('sg-cookie-optin-box-open-more-link')
  if (cookieDetailList && openMoreLink) {
    openMoreLink.setAttribute('aria-expanded', false)
    cookieDetailList.setAttribute('hidden', true)
    openMoreLink.addEventListener(
      'click', (e) => {
        if (cookieDetailList.classList.contains('sg-cookie-optin-visible')) {
          openMoreLink.setAttribute('aria-expanded', true)
          cookieDetailList.removeAttribute('hidden')
        } else {
          openMoreLink.setAttribute('aria-expanded', false)
          cookieDetailList.setAttribute('hidden', true)
        }
      }
    )
  }
}

<!--googleoff: index-->
<div class="sg-cookie-optin-box" role="dialog" aria-modal="true" aria-labelledby="cookieOptinHeader" aria-describedby="cookieOptinDescription">
    {{#settings.show_button_close}}
        <span class="sg-cookie-optin-box-close-button">✕</span>
    {{/settings.show_button_close}}
  
    <strong id="cookieOptinHeader" class="sg-cookie-optin-box-header">{{{textEntries.header}}}</strong>
    <p id="cookieOptinDescription" class="sg-cookie-optin-box-description">{{{textEntries.description}}}</p>
  <fieldset class="sg-cookie-optin-box-cookie-list">
    {{#cookieGroups}}
    <div class="sg-cookie-optin-box-cookie-list-item">
    <label class="sg-cookie-optin-box-cookie-list-item-label">
      <input  type="checkbox"
               name="cookies[]"
               value="{{groupName}}"
               class="sg-cookie-optin-checkbox"
               {{#required}}checked="1"{{/required}}
               {{#required}}disabled="1"{{/required}}>
      {{{label}}}</label>
    </div>

  {{/cookieGroups}}
</fieldset>

    <div class="sg-cookie-optin-box-button">
        <button id="cookieOptinFocusTarget" class="sg-cookie-optin-box-button-accept-all optin-btn">{{{textEntries.accept_all_text}}}</button>
        <button class="sg-cookie-optin-box-button-accept-essential optin-btn">{{{textEntries.accept_essential_text}}}</button>
    </div>

    <ul class="sg-cookie-optin-box-cookie-detail-list">
        {{#cookieGroups}}
            <li class="sg-cookie-optin-box-cookie-detail-list-item">
                <strong class="sg-cookie-optin-box-cookie-detail-header">{{{label}}}</strong>
                <p class="sg-cookie-optin-box-cookie-detail-description">{{{description}}}</p>

                <div class="sg-cookie-optin-box-cookie-detail-sublist">
                    <table>
                        <tbody>
                            {{#cookieData}}
                                {{^pseudo}}
                                    {{#index}}<tr class="divider"><td colspan="2">&nbsp;</td></tr>{{/index}}
                                    <tr>
                                        <th>{{{textEntries.cookie_name_text}}}</th>
                                        <td>{{{Name}}}</td>
                                    </tr>
                                    <tr>
                                        <th>{{{textEntries.cookie_provider_text}}}</th>
                                        <td>{{{Provider}}}</td>
                                    </tr>
                                    <tr>
                                        <th>{{{textEntries.cookie_lifetime_text}}}</th>
                                        <td>{{{Lifetime}}}</td>
                                    </tr>
                                    <tr>
                                        <th>{{{textEntries.cookie_purpose_text}}}</th>
                                        <td class="sg-cookie-optin-box-table-reason">{{{Purpose}}}</td>
                                    </tr>
                                {{/pseudo}}
                            {{/cookieData}}
                        </tbody>
                    </table>
                </div>

                {{#cookieData}}
                    {{^index}}<a class="sg-cookie-optin-box-sublist-open-more-link" href="#">{{{textEntries.extend_table_link_text}}}</a>{{/index}}
                {{/cookieData}}
            </li>
        {{/cookieGroups}}
    </ul>

    <div class="sg-cookie-optin-box-open-more">
        <a id="sg-cookie-optin-box-open-more-link" class="sg-cookie-optin-box-open-more-link" href="#">{{{textEntries.extend_box_link_text}}}</a>
    </div>

    <div class="sg-cookie-optin-box-footer">
        <div class="sg-cookie-optin-box-footer-links">

            {{#footerLinks}}
                {{#index}}
                    <span class="sg-cookie-optin-box-footer-divider"> | </span>
                {{/index}}

                <a class="sg-cookie-optin-box-footer-link" href="{{url}}" target="_blank">{{{name}}}</a>
            {{/footerLinks}}
        </div>

    </div>
</div>
<!--googleon: index-->

assigned to @Mateev

mentioned in commit 4febb9cd

closed

Done, will be added to the next release

mentioned in commit ac6d85d3