[ACS] - Add accessibility to snackbar #858
Conversation
diogoverde
requested review from
mavericardo,
leonardo-gympass and
nataliosilveiraext
| <IconButtonWrapper | ||
| role="button" | ||
| onClick={onClose} | ||
| aria-label={ariaLabelClose} |
There was a problem hiding this comment.
For this element to be considered interactive, it would be necessary to add tabindex="0" and listen for "Enter" or "space" to trigger the onClose, this is done automatically if you change the element's tag to button.
There was a problem hiding this comment.
good point! changed accordingly
There was a problem hiding this comment.
I think we could change the styled-component tag to simplify.
An element that has the button tag already has the role button implicitly.
-const IconButtonWrapper = styled.div`
+const IconButtonWrapper = styled.button` <IconButtonWrapper
- role="button"
onClick={onClose}
aria-label={ariaLabelClose}
- as="button"
>
|
| <IconButtonWrapper | ||
| role="button" | ||
| onClick={onClose} | ||
| aria-label={ariaLabelClose} |
There was a problem hiding this comment.
I think we could change the styled-component tag to simplify.
An element that has the button tag already has the role button implicitly.
-const IconButtonWrapper = styled.div`
+const IconButtonWrapper = styled.button` <IconButtonWrapper
- role="button"
onClick={onClose}
aria-label={ariaLabelClose}
- as="button"
>
| alignItems="center" | ||
| mr="small" | ||
| role="img" | ||
| data-testid="img" |
There was a problem hiding this comment.
Instead of using a string directly here, use it via props
There was a problem hiding this comment.
what should be added as a prop, the data-testid?
There was a problem hiding this comment.
Yes, this way we avoid possible problems with testing
| color: inherit; | ||
| border: none; | ||
| padding: 0; | ||
| outline: inherit; |
There was a problem hiding this comment.
Do these style changes have a visual impact? If so, could you include some screen shots so we can visualize the changes, please?
There was a problem hiding this comment.
it does not, they are added so that it won't affect the visuals. Since it was converted to a button
Description 📄
Platforms 📲
Type of change 🔍
How Has This Been Tested? 🧪
Checklist: 🔍
Screenshots 📸
[Upload your screenshots here]