Fix accessibility for repeated Read Article links by adding contextual aria-labels in Varbase blog cards and list views

Problem/Motivation

Repeated links such as "Read Article", "Read more", or "Learn more" appear across Varbase blog cards and listing views.

Screen reader users cannot distinguish between identical link labels without additional context, which reduces accessibility and WCAG compliance.

ARIA attributes (e.g., aria-label) must include meaningful contextual information, such as the article title, to clarify the destination and purpose of each link.

Helpful resource: What the Heck is ARIA A Beginner's Guide to ARIA for Accessibility - Kat Shaw (A11yTalks - Aug 2024) Thanks to A11yTalks and Kat Shaw for this! Enhancing "Read Article" Links for Accessibility Replace generic "Read Article" links with meaningful ARIA labels: <a aria-label="Read the full article of {{ title }}">Read Article</a> If the link text changes to "Learn more", "Read more", or "Click", the {{ title }} token will still help maintain context for screen reader users.

Steps to reproduce

• Visit a Varbase blog listing page or any view displaying multiple blog cards.
• Observe repeated links like Read Article or Read more across multiple items.
• Test with a screen reader (e.g., NVDA, VoiceOver).
• Notice that all links sound identical, offering no contextual indication of which article they belong to.

Proposed resolution

• Switch to use the vartheme_bs5:link SDC component with the following:
  • #3496209: Add token replacement support to AttributesWidget using new centralized token and normalizer services from SourcePluginBase
  • #3504614: Render field value in component using DS field source
• Replace generic link output with contextual ARIA labels using tokens such as:
  aria-label="Read the full article of [node:title]" target="_parent"
• Ensure the output works across all variations of link text (Read Article / Read more / Learn more).
• Implement token-based aria-label generation in the corresponding Twig templates or component attributes.
• Validate behavior inside blog cards, blog list views, and CTA components.
• Ensure clarity without excessive verbosity by keeping aria-labels concise.
• Screen reader users will clearly understand the purpose and destination of each link.
• Improves WCAG 2.2 success criteria for link purpose (2.4.4 & 2.4.9).
• Creates consistent accessible behavior across Varbase components, blog listings, and CTA link patterns

Remaining tasks

• ✅ File an issue about this project
• ✅ Addition/Change/Update/Fix to this project
• ✅ Testing to ensure no regression
• ➖ Automated unit/functional testing coverage
• ➖ Developer Documentation support on feature change/addition
• ➖ User Guide Documentation support on feature change/addition
• ➖ UX/UI designer responsibilities
• ➖ Accessibility and Readability
• ✅ Code review from 1 Varbase core team member
• ✅ Full testing and approval
• ✅ Credit contributors
• ✅ Review with the product owner
• ✅ Update Release Notes and Update Helper on new feature change/addition
• ✅ Release varbase-10.1.0, varbase_blog-10.1.0-rc1

Varbase update type

• ✅ No Update
• ➖ Optional Update
• ➖ Forced Update
• ➖ Forced Update if Unchanged

User interface changes

• N/A

API changes

• N/A

Data model changes

• N/A

Release notes snippet

• fix: #3559604 accessibility for repeated Read Article links by adding contextual aria-labels in Varbase blog cards and list views