-
Notifications
You must be signed in to change notification settings - Fork 834
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
EuiCard a11y #2521
EuiCard a11y #2521
Conversation
Does mess with the alignment of larger than `l` sized icons.
This doesn’t do anything that providing an `href` or `onClick` doesn’t handle so it’s really superfluous
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Changes LGTM, pulled & tested locally. I tried giving the a
vs. button
+ onClick
target interaction but I think ultimately the complexity cost outweighs the gain, so I left it as is. Also thought about a useRef
for storing the link's ref value but it isn't compatible with EuiCardSelect's buttonRef.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
💯
@@ -165,7 +171,6 @@ | |||
|
|||
.euiCard.euiCard--horizontal { | |||
.euiCard__content { | |||
padding-top: $euiSizeS; // Aligns title and text a bit better and adds spacing in case of beta badge | |||
text-align: left; /* 3 */ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I was just trying to figure out what the /* 1 */
, /* 2 */
and /* 3 */
comments along this file mean. 😛
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Sometimes we apply certain styles across multiple selectors but for a single reason. So we put that reason up at the top of the document and number them. Then we use that number to correspond to the multiple styles we add. You can find these numbers at lines 7-12.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM!
The main structural change
When providing an
onClick
orhref
property to EuiCard, the component used to display the whole contents within a button or anchor tag. This caused accessibility issues and invalid DOM structures since there would be block elementsdiv
inside of inline elementsbutton
.Based on this article by Heydon Pickering, I went the route of the The redundant click event. Essentially, the main
onClick
orhref
is applied solely as a wrapper around the title. Then the fulldiv
element listens for it's own click event and will trigger the event wrapped around the title element.Simplified rendered DOM:
The focus and hover states still work by showing the underline on the card's title.
Cards with Beta badges
The beta badge label will at least assign its ID to the
aria-describedby
of the button similar to the code above that assigns the description's ID.Selectable cards
The selectable button on EuiCard is now
role="switch"
to announce this behavior. Also, the whole card is clickable as well even if there's an extra link inside the body of the card.Additional change
Added the ability to supply children to EuiCard. The children will come after the still required title and description, but they won't align to the bottom of the card like the footer does.
Fixes
I fixed #1543 where the horizontal layout with didn't quite layout correctly with icons.
I also changed the title of the card to actually be one of our title sizes. I realized that it was in between our actual text scales and figured it's better to just go ahead and bump it so that it fits in our scales.
Fixed the contrast levels of disabled buttons
Todo later
Create a EuiCardList component that will take an array of card objects and spit them out as a list and list items.
Breaking change
I removed EuiCardGraphic. This was originally created to add a splash of color but were told by CS that it doesn't match our visuals so it was never officially used or documented.
Checklist