- Issue created by @msark
The module outputs a set of social sharing buttons where each anchor tag (``) uses `target="_blank"` to open external sharing links (e.g., Facebook, Twitter, LinkedIn) in a new window.
This behavior triggers an accessibility warning from the [Editoria11y](https://www.drupal.org/project/editoria11y) module:
> **Manual check: is opening a new window expected?**
> Readers can always choose to open a link in a new window. When a link forces open a new window, it can be confusing and annoying, especially for assistive device users who may wonder why their browser's "back" button is suddenly disabled.
Screen reader users are not always aware that a new tab or window has opened, unless there is an explicit indication in the markup.
---
1. Install and enable the **Better Social Sharing Buttons** module.
2. Enable at least one sharing service (e.g., Twitter, Facebook).
3. Browse to a node or page where the sharing buttons are rendered.
4. Use Editoria11y to inspect the page.
5. Observe the warning on each sharing `` tag with `target="_blank"`.
---
Update the social button links in the Twig template to:
- Add `aria-label` with a warning:
Example:
`aria-label="Share to Twitter (opens in a new window)"`
- Optionally include a `(opens in a new window)` within the `` tag for redundancy.
- Ensure the string "(opens in a new window)" is translatable with `|t`.
Example patch used:
<a href="https://twitter.com/intent/tweet?text={{ items.title }}+{{ items.page_url }}"
target="_blank"
title="{{ 'Share to'|t }} X"
aria-label="{{ 'Share to'|t }} X {{ '(opens in a new window)'|t }}"
class="social-sharing-buttons-button share-x"
rel="noopener">
<svg aria-hidden="true" width="{{ items.width }}" height="{{ items.width }}" style="border-radius:{{ items.radius }};">
<use href="{{ social_buttons_sprite }}#x" />
</svg>
<span class="visually-hidden">({{ 'Opens in a new window'|t }})</span>
</a>Supporting CSS for .visually-hidden should also be included if not already present:
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}None visible to sighted users, unless a visible icon or label is added (optional). Only assistive technology users will hear the new info via screen readers.
Active
4.1
Code