feat: improve card semantics (resolves #190)

[greatislander]

• I've read the guidelines for Contributing to the Platform Co-op Toolkit
• This isn't a duplicate of an existing pull request

Description

Applies changes from #190 to all cards.

TODO: Add icon to byline.

Steps to test

Review all card and archive components: https://deploy-preview-209--pinecone.netlify.com

Additional information

Not applicable.

Related issues

• Resolves Review design and implementation of cards and info cards for improved accessibility #190.
• Resolves Atom: favorites indicator #193.

[netlify]

Deploy preview for pinecone ready!

Built with commit d958e44

https://deploy-preview-209--pinecone.netlify.com

[cherylhjli]

the page format looks great! the location looks like its hanging a bit lower than the other ones in the individual card component?

[greatislander]

Good catch @cherylhjli! Fixed now.

[greatislander]

@cherylhjli This is done! I just need the icon for the byline.

[jhung]

I think the "+2 more" should be part of the Topics list. Right now "+2 more" appears out of context. For example, NVDA would say:

"... List item topic commons. List item topic policy. Out of list. Plus two more"

It may make more sense if the feedback says:

"... List item topic commons. List item topic policy. Plus two more topics. Out of list."

[greatislander]

@jhung I think I've addressed all the review comments (including adding screen reader-accessible labels to the other cards).

[jhung]

One last thing, the mid-dot does not cause the screen reader to pause. This makes "resource format article (mid-dot) publisher" come out as a single uninterrupted string of words which is confusing.

I tried to experiment with this by adding aria-label="." to <span class="card__sep"> but NVDA just ignores it.

Could a regular period be used instead of a mid-dot and offset from the baseline to visually appear like a mid-dot? (Personally, even an unstyled period looks fine, but maybe @cherylhjli has thoughts?)

A hacky way to do this would be to add a non-visual span and put a period.

[cherylhjli]

Could we move the baseline of the period up, so the period resembles a mid-dot?

[greatislander]

@cherylhjli @jhung I just tested with VoiceOver/Safari and realized that VoiceOVer reads 'middle dot' without pausing… so definitely an alternate approach is needed. I'm going to try the period trick.

[greatislander]

Using a period works great in Safari with Voiceover. One observation: this looks weird, but maybe it's okay?

[jhung]

Using a period works great in Safari with Voiceover. One observation: this looks weird, but maybe it's okay?

Is there any way to offset the period vertically so it appears in the middle of the line (like a mid-dot)?

[greatislander]

Yes, I can do that with CSS (set vertical-align: super). However that doesn't affect the VoiceOver modal.

[greatislander]

See latest changes from 2120c96.

[jhung]

Thanks for fixing the separator. It's much better now.