-
Notifications
You must be signed in to change notification settings - Fork 54
Add prop to allow us to set aria-hidden on live label #3206
Conversation
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.
Looks good. We will look at pulling out LiveLabel into its own Psammead component in another PR: #3203
Note for testing: since Storybook is running on the client only, this fix won't seem necessary, until the component is pulled into an application that is server-rendered.
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.
Just a suggestion to destructure the ariaHidden
as we do with service
and script
.
Also, can you update the PR description, please?
@@ -227,7 +227,9 @@ export const Link = styled.a` | |||
} | |||
`; | |||
|
|||
export const LiveLabel = styled.span` | |||
export const LiveLabel = styled.span.attrs( | |||
props => props.ariaHidden && { 'aria-hidden': 'true' }, |
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.
props => props.ariaHidden && { 'aria-hidden': 'true' }, | |
${({ ariaHidden }) => ariaHidden && { 'aria-hidden': 'true' }}, |
…o update-live-aria-hidden
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
Resolves bbc/simorgh#5749
Overall change:
Styled components strips out 'aria-hidden' when rendering on the server. Will look into this, but in the meantime we can pass a prop to the live label that lets us set this attribute.
Code changes: