Support » Plugin: Polylang » “Show all languages” not focusable

  • Resolved juliemoynat

    (@juliemoynat)


    Hi,

    I’m working on a website that has to be accessible even on the WP admin.
    I noticed that the “Show all languages” menu on admin toolbar is not accessible for people using keyboard because it’s a div and not a link or a button.

    If we add an attribute tabindex="0" on the div, we can open the “popup” with keyboard by using “Enter” key.

    Example:

    <div class="ab-item ab-empty-item" aria-haspopup="true" title="Filters content by language" tabindex="0">
    <span class="ab-icon"></span>
    <span class="ab-label">Show all languages</span>
    </div>

    Of course, the best solution is to transform div into a button just like that:

    <button type="button" class="ab-item ab-empty-item" aria-haspopup="true" title="Filters content by language">
    <span class="ab-icon"></span>
    <span class="ab-label">Show all languages</span>
    </button>

    Can you do one of the solutions?

    Thank you!

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author Chouby

    (@chouby)

    Hi,

    The output of the admin bar is controlled by WordPress and plugins authors are not free to do what they want.

    The button is not possible.

    The tabindex is possible for WP 4.6 and higher (See https://core.trac.wordpress.org/ticket/32495).

    However I noticed that when I add the tabindex, only the icon is highlighted. Is that an issue? You can test it by changing this line to
    'meta' => array( 'tabindex' => 0, 'title' => __( 'Filters content by language', 'polylang' ) ),

    A third solution would be to output

    <a class="ab-item" aria-haspopup="true" href="#" title="Filters content by language">
    <span class="ab-icon"></span>
    <span class="ab-label">Show all languages</span>
    </a>

    Is that correct from accessibility point of view?

    Hi,

    With tabindex, only the icon is highlighted because focus style is expected to work if the element .ab-item is a link <a>.

    A link is normally opening a window or it’s a link to an anchor.
    A button is activating a script. That’s why this is a better solution but I understand that’s not possible here.

    So, I suggest you to use a link with href # and an ARIA role “button” :

    
    <a aria-haspopup="true" title="Filtrer le contenu par langue" role="button" class="ab-item ab-empty-item" href="#">
      <span class="ab-icon"></span>
      <span class="ab-label">Afficher toutes les langues</span>
    </a>
    

    This is a link transform in a button because we can’t use a real button.

    Plugin Author Chouby

    (@chouby)

    Thanks for your help.

    Unfortunately, I can’t add a role due to WP restrictions 🙁
    So it seems that the tabindex = 0 is still the best solution.
    This CSS rule should solve the highlighted text issue:

    #wpadminbar:not(.mobile) > #wp-toolbar .ab-item:focus span.ab-label {
    	color: #00b9eb;
    }
    Plugin Author Chouby

    (@chouby)

    I am still looking for the best solution. The issue with the tabindex and the modified css rule are other admin themes. I would need a different color for other themes and thus load a separate css rule for each theme, which is rather heavy for just one rule.

    Looking at the other menus with submenus, I see that they all use a link as parent item (the link being the same as the first child item). Would it be ok from accessibility point of view to use a link to the current page as parent item?

    <a class="ab-item" aria-haspopup="true" href="http://mysite.com/wp-admin/index.php?lang=all" title="Filters content by language">
    <span class="ab-icon"></span>
    <span class="ab-label">Show all languages</span>
    </a>

    Oh! You’re right. I didn’t know you can do this with Polylang 🙂

    Yes, I think this is better to be compliant with WordPress guidelines.

    If you can also match the title with the label of the link, it would be perfect. Actually, screen readers sometimes read just the title or just the label (or both). So, they need to give the same information. You can do it with the “screen-reader-text”:

    
    <a class="ab-item" aria-haspopup="true" href="http://mysite.com/wp-admin/index.php?lang=all" title="Filters content by language: Show all languages">
    <span class="ab-icon"></span>
    <span class="ab-label"><span class="screen-reader-text">Filters content by language:</span> Show all languages</span>
    </a>
    
    Plugin Author Chouby

    (@chouby)

    I did not change the title because I would need to change the internationalized string and don’t want to do that in a minor version (not to break existing trnaslations), but I added the screen reader text as you suggested.

    I pushed that to the development version. You can test it if you like to:
    https://github.com/polylang/polylang/archive/master.zip

    My plan is to release the version 2.1.4 early next week.

    Good news! Thank you!

    Plugin Author Chouby

    (@chouby)

    Don’t hesitate to report other accessibility issues that you may discover. You can use GitHub to be sure that I will not miss it.

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