(#1112) Updates guide cards accessibility

[dlescarbeau]

• adds id to title, description, or image depending on elements present

• adds aria label for list of buttons in guide card

Closes #1112

Pull Request Details

Add description

Closes #

Author PR Checklist

Items that the author of the PR is responsible for checking before submitted the PR.

General:

• I have reviewed the acceptance criteria defined in the ticket and ensured the work has been completed.
• The commit message passes all quality commit message standards.
• Unit tests have been updated or created to reflect any javascript changes.
• Storybook scenarios have been updated or created to reflect any html/css/js changes.

Accessibility:

• WCAG 2.1 Level AA requirements have been met.

Development:

• Any new or updated javascript code has 100% unit test coverage.
• New or updated breakpoints have regression images.
• Breaking changes have been thoroughly documented in the PR.

Product Reviewer PR Checklist

Items the product team is responsible for reviewing.

General:

• There are no unexpected or unapproved regression image changes.

• Functionality of interactive elements meet the acceptance criteria.
• The product is visually and functionally the same across the different browsers.

Accessibility:

• AxeDev Tools: there are no new or outstanding accessibility issues introduced in this PR.
• Lighthouse: scores have not noticeably decreased during this PR.
• Wave: there are no new errors or contrast errors introduced in this PR.

Design Reviewer PR Checklist

Items the design team is responsible for reviewing. 


General:

• New or updated features introduced in this PR are developed mobile-first.
• Breakpoint changes and regression images match those breakpoints.
• This PR has been tested in all supported browsers at all breakpoints.

Developer Reviewer PR Checklist

Items the development team is responsible for reviewing.

General:

• New code passes code quality standards set by industry standards.
• The expected Storybook stories have been added or updated for the new or updated feature.
• The expected unit tests have been added or updated for the new or updated feature.

Accessibility:

• VoiceOver: Described content matches with what was expected.
• Keyboard navigation: new or updated features and content are navigable via the keyboard.

[github-actions]

Viewing Information

• The documentation site
• NCIDS JS Documentation
• The storybook site
• The example site

[andyvanavery31]

Things I found:

• The first Guide Card with Image and Description in the Variations section doesn't have the aria-label on the buttons, but the free-floating words 'for the list of' were added after the ul class.
• The description from the component preview of the Guide Card with Image and Description disappeared
• The full id for the Guide Card without Image and Description component preview and the Default Story is not contained within the quotes. It's showing up as aria-labelledby="Research" grant funding>, when the id set above it is, `id="Research Grant Funding".

[andyvanavery31]

Accessibility Errors:

• 1 Broken Aria Reference on Guide Card without Image and Description Code Snippet (But this isn't happening on the Storybook page of the same variant)

[andyvanavery31]

Passes Product review.

[olitharp-nci]

have to worry about more than just spaces, you can use a built in filter instead

https://twig.symfony.com/doc/3.x/filters/url_encode.html

[dlescarbeau]

@olitharp-nci this should be addressed now, good shout !