fix(collapsible-panel): Accessible panel Header element #1283
Conversation
|
This pull request is being automatically deployed with ZEIT Now (learn more). 🔍 Inspect: https://zeit.co/commercetools/ui-kit/o8j4iipn7 |
| @@ -9,12 +9,16 @@ import getNormalizedButtonStyles from './accessible-button.styles'; | |||
|
|
|||
| const propsToOmit = ['onClick']; | |||
|
|
|||
| const getIsEnterOrSpace = e => | |||
| e.key === ' ' || e.key === 'Spacebar' || e.which === 13 || e.which === 32; | |||
There was a problem hiding this comment.
What is ' '? :). Is there maybe like a itty-bity util library we can use for this? Or do you think it's fine inlining it?
There was a problem hiding this comment.
' ' is for the Spacebar.
I just double-checked a bit deeper and simplified this line, according to this spec that React uses for the key field of their synthetic events: https://www.w3.org/TR/uievents-key/#keys-whitespace
| buttonProps = { | ||
| type: props.type, | ||
| }; | ||
| } else if (!props.isDisabled) { |
There was a problem hiding this comment.
It gets a little weird-looking with the object braces for the logic I am trying to achieve, am i doing this right?
const buttonProps =
do {
if (isButton) {
{
type: props.type,
}
}
else if (!props.isDisabled) {
{
role: 'button',
tabIndex: '0',
onKeyPress: event => getIsEnterOrSpace(event) && handleClick(event),
}
}
else {
{ }
}
There was a problem hiding this comment.
True that also don't make it much simpler either.
There was a problem hiding this comment.
...just tried to avoid the let in a way.
| buttonProps = { | ||
| type: props.type, | ||
| }; | ||
| } else if (!props.isDisabled) { |
There was a problem hiding this comment.
...just tried to avoid the let in a way.
Summary
This PR addresses this problem: https://github.com/commercetools/merchant-center-frontend/pull/8565#issuecomment-598637568.
It occurs when the
CollapsiblePanelis passed any child elements for the Header that are buttons, because the Header of the CollapsiblePanel is also abuttonelement.Description
AccessibleButtoncomponent to become truly accessible when theasprop is used:roleandtabIndexattributes.onKeyPressevent forEnterandSpaceto trigger theonClick, for full keyboard navigation support.AccessibleButtonas adivfor the CollapsiblePanel header, instead of abuttonelement but keeping the a11y.