Contrib.social

Accessibility: Links do not have a discernible name for buttons

Open on Drupal.org →
Created on 11 February 2022, about 3 years ago
Updated 19 May 2023, almost 2 years ago

Problem/Motivation

When using Lighthouse in the Chrome Developer Tools to test a page that shows this module's block configured with a few buttons (Email, Twitter, and Facebook), the Accessibility test returns this warning for the buttons:

"Links do not have a discernible name."

I believe this is because on mobile, when the buttons are small, no text is shown, so the link "has no name."

Steps to reproduce

1. Create a page with RRSSB buttons.
2. Test the page in Lighthouse/Chrome Developer Tools using the "mobile" setting.

Proposed resolution

I added an rrssb-button-list.html.twig to my theme and added aria-label="{{ button.text }}" to the link:

  <ul class="rrssb-buttons">
    {% for button in buttons %}
      <li class="rrssb-{{ button.name }}">
        <a href="{{ button.link }}" {{ button.class | raw }} aria-label="{{ button.text }}">
          <span class="rrssb-icon"></span>
          <span class="rrssb-text">{{ button.text }}</span>
        </a>
      </li>
    {% endfor %}

This resolves the error, but I am not sure if it is the best approach.

🐛 Bug report
Status

Fixed

Version

2.0

Component

Code

Created by

🇯🇵Japan ptmkenny

Live updates comments and jobs are added and updated live.
  • Accessibility

    It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.

Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024