Improve accessibility of card link titles

[danahertzberg]

Problem/Motivation

Issue found on a Dubbot scan.

Describe the bug

When the Card Link URL field is filled out and the Card Link Title is not populated, there is an accessibility concern because screen readers cannot tell what the link is.

To Reproduce

1. Add a card to a page
2. Complete the Card Link URL field
3. Do not fill in the Card Link Title field
4. Save
5. Inspect the page and find the card
6. Observe no title or content around the <a> tag on the card

Proposed resolution

1. Require the Card Link Title field -- Only when URL field is populated
2. Add a selection in the Card Link Style dropdown for Hidden or similar

Expected behavior

I expect links to have accurate descriptive link titles.

Additional context

Consider sr-only class. https://getbootstrap.com/docs/4.0/utilities/screenreaders/

Expect to create a database update to look for empty titles, with populated URLs. In this case, we should have a reasonable default. Maybe auto-populate the link title with the card title and select the hidden link style?

Or just not allow save and have a notice with help text?

[danahertzberg]

Solution includes the following HTML as approved by @accesswatch.

Add a <span class="sr-only"> around the link title within the <a> tag.

[danahertzberg]

Need help with the Require the Card Link Title field -- Only when URL field is populated task. 🙏

Not sure if this is on the right track?

/modules/custom/az_card/src/Plugin/Field/FieldWidget/AZCardWidget.php

if (!empty($link_uri) && empty($link_title)) {
      $errors[] = "Card Link Title is required if Card Link URL is completed. Card Link Title may be visually hidden with Card Link Style selection.";
    }

[danahertzberg]

Joe added some code to help the requirement needs. Dana to evaluate locally.

[danahertzberg]

Thank you @joeparsons! Only thing left I would like to do is add an error message when the card is collapsed. I will need help with this as well.

This screen should provide some help text. Clicking the save button doesn't save and doesn't give any reason why.

Collapsing the card deck entirely also allows the required field to be bypassed on page save.