fix: #3628120 Tell screen reader users that the Listen on links open in a new tab

Rajab Natshahrequested to merge
issue/vartheme_bs5_rightup-3628120:3628120-tell-screen-reader into 1.0.x

Issue: https://www.drupal.org/project/vartheme_bs5_rightup/issues/3628120

Adds the visually hidden, translatable text "(opens in a new tab)" after the label of every Listen on link whose URL starts with http, in components/molecules/podcast-platforms/podcast-platforms.twig. Internal links (the RSS feed) are untouched. External Links opens the external ones in a new tab at run time; the Share component already says so in hidden text.

Verified on a Rightup 1.0.x build with Arabic translations: the markup of /ar/podcasts/last-call/no-straight-walls now carries (يفتح في علامة تبويب جديدة) after each platform name. Editoria11y's linkNewWindow alerts on those links were four per episode page before the change (read from the checker panel as an administrator); the panel was not re-read after the change.

Not verified: the Editoria11y panel after the change, and the visual result at other widths (the text is visually hidden, so nothing should move). The embedAudio alert on the audio player is a manual check that an editor dismisses, and is not addressed.

Follow-up check with the four theme merge requests (#3628116, #3628117, #3628118, #3628120) merged on one site: a crawl of 152 paths in two languages at 1440 and 390 px (608 page loads) found no WCAG 2.2 AA violation other than target-size on the English Gin login page (also present before these changes), no horizontal overflow and no broken image; the Editoria11y panel, read as an administrator on 24 pages in both languages, flagged only the audio player's manual transcript check. The merge request pipeline finished green.

AI-Generated: Yes

Checkpoints:

  • File an issue
  • Addition/Change/Update/Fix
  • Testing to ensure no regression
  • Automated unit testing coverage
  • Automated functional testing coverage
  • UX/UI designer responsibilities
  • Readability
  • Accessibility
  • Performance
  • Security
  • Developer Documentation
  • User Guide Documentation
  • Reviewed by human
  • Code review by maintainers
  • Full testing and approval
  • Credit contributors
  • Review with the product owner
  • Release notes snippet
  • Release

🤖 Generated with Claude Code

Edited by Rajab Natshah

Merge request reports