feat(Header, Cards, Hero, CoverHero): improve a11y #1292
Conversation
|
Size stats
|
|
Accessibility report ℹ️ You can run this locally by executing |
|
Deploy preview for mistica-web ready! ✅ Preview Built with commit 369bf37. |
|
Screenshot tests report ✔️ All passing |
marcoskolodny
changed the title
| > | ||
| {pretitle} | ||
| </Text2> | ||
| /** using flex instead of nested Stacks, this way we can rearrange texts so the DOM structure makes more sense for screen reader users */ |
There was a problem hiding this comment.
AdvancedDataCard was missing the logic for the custom order of elements that other cards have
| @@ -578,7 +638,7 @@ export const MediaCard = React.forwardRef<HTMLDivElement, MediaCardProps>( | |||
| aria-label={isTouchable ? ariaLabel : undefined} | |||
| > | |||
| {isTouchable && <div className={styles.touchableMediaCardOverlay} />} | |||
| <div className={styles.mediaCard}> | |||
| <div className={styles.mediaCard} aria-hidden={isTouchable}> | |||
There was a problem hiding this comment.
All cards except PosterCard were missing this, and it's important in order to avoid Safari from reading all the texts inside a link as separate links (same thing we did in rows)
| @@ -578,7 +638,7 @@ export const MediaCard = React.forwardRef<HTMLDivElement, MediaCardProps>( | |||
| aria-label={isTouchable ? ariaLabel : undefined} | |||
| > | |||
| {isTouchable && <div className={styles.touchableMediaCardOverlay} />} | |||
| <div className={styles.mediaCard}> | |||
| <div className={styles.mediaCard} aria-hidden={isTouchable}> | |||
This comment was marked as resolved.
This comment was marked as resolved.
Good catch @aweell ! It should be fixed now :) |
# [16.6.0](v16.5.0...v16.6.0) (2024-11-26) ### Features * **data-testid:** support for Callout, HighlightedCard, Hero, EmptyState and Headers ([#1296](#1296)) ([15b798c](15b798c)) * **Header, Cards, Hero, CoverHero:** improve a11y ([#1292](#1292)) ([cdcf2fc](cdcf2fc)) * **InfoSheet:** update styles and allow adding a button to the content ([#1294](#1294)) ([c4a0749](c4a0749)) * **Meter:** New component ([#1281](#1281)) ([1a061d8](1a061d8)) * **Sheet:** allow closing the sheet with the keyboard or a screen reader ([#1293](#1293)) ([42099fb](42099fb))
|
🎉 This PR is included in version 16.6.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
Issues: