Card Accessibility Improvements

[ChristopherChudzicki]

What are the relevant tickets?

Closes https://github.com/mitodl/hq/issues/5538

Description (What does it do?)

This PR makes some accessibility enhancements to cards and learning resource cards in particular.

Card Title is Link: Previously the entire card was a link. Now just the title is a link, leading to much better link names. The whole card remains clickable.

LearningResourceCards are articles: Learning resource cards now use article as a root element with [resource.type]: [resource.title] as the article name. Consequently, cards are landmarks that appear in landmark navigation

Simplified Positioning: Cards no longer use absolute positioning for buttons.

Screenshots

Card aesthetics should be unchanged:

How can this be tested?

1. Inspect cards and check that their aesthetic is unchanged. Cards include:
   • Carousel resource cards (LearningResourceCard)
   • Search result cards (LearningResourceListCard)
   • Userlist cards at /dashboard/my-lists/
   • Draggable resource cards at /dashboard/my-lists/{list_id} when "Reordering"
   • News & Events cards on the homepage
     2.Where cards were clickable as links before, they should be now.
   • You should still be able to ctrl+click to open in a new tab
2. Interactive children in cards should still work, and should NOT navigate the whole link. Examples are
   • "AddToListDialog" (learning path and userlist versions)
   • The "..." menu on learning path cards.

[ChristopherChudzicki]

Originally, I made this the default behavior. However, since reliably NOT triggering the link when clicking interactive children requires some effort from consumer (adding data-card-action if the interactive child is not a anchor or button) I decided to make it opt-in to increase visibility.

[ChristopherChudzicki]

Previously, we used absolute positioning because:

• The "main" card element was an anchor
• anchors can't have interactive children (invalid HTML)
• so we made anchor + buttons children of a wrapper

Since the main card element is no longer an anchor, this is no longer necessary.

[jonkafton]

Do we need this label? I'm finding that Voiceover repeats the title. Is the<a> content overridable with aria-label to add the readableType

This only happens on the small Media carousel cards, but not the Featured Courses carousel, though I don't see any difference in the HTML that would explain why/

[ChristopherChudzicki]

We do need the label... Otherwise the landmarks menu does not show meaningful info:

And landmarks are supposed to have labels:

A visible label should be provided, referenced with aria-labelledby. If necessary, brief, descriptive, label can be provided with aria-label.

That said... Apparently (I just learned) article is not a real landmark role, but MDN's article role page says:

Articles are not considered a navigational landmark, but many assistive technologies that support landmarks also support a means to navigate among articles. They may also support indication of nesting relationships within articles.

I guess VoiceOver just treats them as landmarks.

Anyway: The usage here is based on what we do in OCW. (Although there we have infinite scroll, se we also add aria-posinset.

[jonkafton]

Not one for this PR as this hasn't changed here, but can we use data-testids if these are just for selection in the tests (or ideally avoid altogether). .MitCard-root and .MitCard-info are the only ones in use for CSS selectors.

[ChristopherChudzicki]

We do use MitCard-root and MitCard-info for styling at least once, which is why they were added. When I added them, I added for other parts (like MitCard-title) that made sense but weren't actually used (as of yet).

[jonkafton]

Looks good. Just the one comment with repeated content for the small resources cards, though not sure if this is controlloable or a VoiceOver artifact as the HTML looks the same.