Contrib.social

Convert sharing buttons to an accessible list element and add button semantics

Open on Drupal.org →
Created on 27 June 2025, 19 days ago

Problem/Motivation

The share icons are rendered inside a

without list semantics, so screen readers and keyboard navigation do not recognize them as a group of related items. In addition, the links that function as interactive buttons lack an explicit type="button", which can confuse assistive technologies. These issues hinder understanding and workflow for users of assistive technologies.

Steps to reproduce

  1. Install and enable the Better Social Sharing Buttons module.
  2. Go to Structure → Block layout and place the Better Social Sharing Buttons block in a visible region.
  3. In the module’s settings, enable several services (Facebook, Twitter, WhatsApp, etc.).
  4. Visit a page where the block appears, then open your browser’s HTML inspector.
  5. Observe that the share buttons are wrapped in a
    without role="list" and each lacks type="button".

    Proposed resolution

    In the Twig template that outputs the buttons:

    1. Add role="list" to the main container.
    2. Wrap each link in a ….
    3. Add type="button" to each to reinforce its button semantics.

    Remaining tasks

    Verify via browser inspector that the container has role="list", each wrapper has role="listitem", and each includes type="button".

    User interface changes

    No visual changes.

    API changes

    None.

    Data model changes

    None

🐛 Bug report
Status

Active

Version

4.1

Component

Code

Created by

🇪🇸Spain jlozande

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

Merge Requests

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024