CR: Add aria-labelledby and id to Guide Cards on the NCIDS

[dev-rana-publicis]

Request Description

On the platform, there is an aria-labelledby on the ul for the link buttons for each of the Guide Cards and an id on the Guide Card Heading (not the row). The request is to update all instances of the Guide Cards on the DS to include the aria-labelledby and id. This will impact:

• The Guide Card page on the Documentation Site for both Default Guide Card and Guide Card with Image and Description
• The Guide Card Row page on the Documentation Site for both 2-Guide Card Row and 3-Guide Card Row
• The Guide Card Default page on the Storybook Site
• The Guide Card Card Group page on the Storybook Site

Expected Functionality

• The aria-labelledby and id should be included on the components and code previews for Guide Cards on the NCIDS

Current Functionality

• There is no aria-labelledby and id on the Guide Card Cards on the NCIDS

Related Tickets

• NCIDS Documentation Site Ticket: #1174
• Original Story Ticket #614

Variations on where ID is placed based on content

• If a card has no Title or Description - ID is on the Image
• if a card has a Description - ID is on the paragraph
• if a card has a Title - ID is on the H tag
• if a Card has a Title and Description - ID is on the H tag

[bryanpizzillo]

This ticket needs to be revisited. From what we can tell, giving a label to a list is fairly useless. It was the guidance at the time when this component was implemented on the platform. Based on some research it may make sense that the guide cards with image and description should be a <section>. However, for the 3 guide-card row, it would be odder for each card to be a section. (A standalone "normal" guide card could be a section).

The point is, the list should not be labeled as it does not help anyone find the links more quickly, nor does it seem that links get context.

@andyvanavery31 we should put this on hold.

P.S. At the time of this writing, 10/20/2024, the actual rules on the ticket are wrong. If we were to label anything, it should only be using the nci-guide-card__title or nci-guide-card__heading elements. Original rules below:

Variations on where ID is placed based on content If a card has no Title or Description - ID is on the Image if a card has a Description - ID is on the paragraph if a card has a Title - ID is on the H tag if a Card has a Title and Description - ID is on the H tag

[andyvanavery31]

@bryanpizzillo @olitharp-nci upon review of the note above, the slack thread, and reviewing the components, I agree that labelling the list is redundant and not useful. Additionally, putting the id on the nci_guide-card__heading is also redundant because the h2 already is evaluated. Therefore, if you agree, my proposal is that we close this ticket, and open a new one on the Digital Platform to change the guide cards on prod to not have the id on the heading, and to not have the aria-labeledby on the list.