(#1112) Add Aria Label to Guide Cards

[karlikpj]

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]

On the Doc Site, the aria-label and id not added to the Guide Cards on the Guide Card Row page.

On the Storybook, the two Variant stories, "Single Guide Card with Image and Description without Heading" and "Title Aligned Card Group", have aria-labeledby> and id> instead of aria-labeledby="guide-card-"> and id="guide-card-">. Do those need to be updated to have the same style as the other ones used across the Doc site and Storybook?

[bryanpizzillo]

@andyvanavery31 this request would be better stated as "The list in a guide card should only be labeled by either the nci-guide-card__header or nci-guide-card__title elements."

The other elements that are being asked for use as a label are not good. They will give an accessible label that does not match the items in the list, which will be worse for accessibility.

[dlescarbeau]

There is a new PR up for this issue: #1927