Closes #3396: Makes clickable cards more accessible

[danahertzberg]

Description

This adds help text to card link title field to encourage best accessibility practices.

Formatting changes came through automatically. I'm not getting the link URL to render on the title <a> tag and could use some help there, please.

• [x] Determine best link url reference
• [x] Unpin probo build
• [x] Update URI to URL nomenclature @tadean

Related issues

Closes #3396

Follow up: https://github.com/az-digital/az_quickstart/issues/3504

How to test

1. Add cards to a flexible page
2. Ensure if card has a link and title fields completed, the card title should be linked as well
3. Ensure all formatting remains unchanged (excluding underline on card title hover)
4. Test non/clickable and title location settings

Probo build: https://57b6254c-c439-411f-b907-7c043d332c1e.probo.build/pages/card-decks

Types of changes

Arizona Quickstart (install profile, custom modules, custom theme)

• Patch release changes
  • [ ] Bug fix
  • [x] Accessibility, performance, or security improvement
  • [ ] Critical institutional link or brand change
  • [ ] Adding experimental module
  • [ ] Update experimental module
• Minor release changes
  • [ ] New feature
  • [x] Breaking or visual change to existing behavior
  • [ ] Upgrade experimental module to stable
  • [ ] Enable existing module by default or database update
  • [ ] Non-critical brand change
  • [ ] New internal API or API improvement with backwards compatibility
  • [ ] Risky or disruptive cleanup to comply with coding standards
  • [ ] High-risk or disruptive change (requires upgrade path, risks regression, etc.)
• Other or unknown
  • [ ] Other or unknown

Drupal core

• Patch release changes
  • [ ] Security update
  • [ ] Patch level release (non-security bug-fix release)
  • [ ] Patch removal that's no longer necessary
• Minor release changes
  • [ ] Major or minor level update
• Other or unknown
  • [ ] Other or unknown

Drupal contrib projects

• Patch release changes
  • [ ] Security update
  • [ ] Patch or minor level update
  • [ ] Add new module
  • [ ] Patch removal that's no longer necessary
• Minor release changes
  • [ ] Major level update
• Other or unknown
  • [ ] Other or unknown

Checklist

• [ ] My code follows the code style of this project.
• [ ] My change requires a change to the documentation.
• [ ] I have updated the documentation accordingly.
• [ ] I have read the CONTRIBUTING document.
• [ ] I have added tests to cover my changes.
• [ ] All new and existing tests passed.

[danahertzberg]

Just received approval from @accesswatch in the DRC! 🙌

[danahertzberg]

I am wondering though if titles should get default underlines to visually indicate that they're links. For example, in this test, you wouldn't be able to guess that the Test 1 text is clickable and Test 2 text isn't. It's also unclear that Test 3 is a whole clickable card.

Thanks @joshuasosa! I think these are great considerations. The clickable cards do get a shadow to make them (barely) visually different from non-clickable cards.

On non-clickable cards, if there is a link then the title does get an underline on hover. I'd love to learn more about what's needed from the visual standpoint. In this case, should we follow the two distinguishers rule like text links? A follow up ticket would be lovely. :)

[accesswatch]

I think they should as do other link text, right?

[danahertzberg]

Heading links follow up issue: https://github.com/az-digital/az_quickstart/issues/3504