feat(thumbnail-card): remove role and tabIndex when onKeyDown exists #3898
Conversation
…ndex-when-onKeyDown
…ndex-when-onKeyDown
…ndex-when-onKeyDown
…ndex-when-onKeyDown
| className={classNames('thumbnail-card', className, { 'is-highlight-applied': highlightOnHover })} | ||
| role={onKeyDown ? null : 'button'} |
There was a problem hiding this comment.
Do we want to see the role and tabIndex prop to null or undefined? Setting undefined makes it as if the role and tabIndex were not passed anything while null is passing a null object.
There was a problem hiding this comment.
Looks like react will strip this sort of thing (falsey values) out of the dom
sandbox: https://codesandbox.io/p/sandbox/lr8dj4
There was a problem hiding this comment.
likely as a symptom of this: https://legacy.reactjs.org/docs/jsx-in-depth.html#booleans-null-and-undefined-are-ignored
There was a problem hiding this comment.
fyi that link refers to when HTML nodes are falsey values whereas Jackie's question refers to attributes of an element. for example, you can set data- attributes to false and you'll still see those values in the DOM
it looks like there's some logic that determines what type of attributes should be hidden when falsey: https://stackoverflow.com/a/31164090
There was a problem hiding this comment.
right, but confirmed that attributes are also stripped in the sandbox
| className={classNames('thumbnail-card', className, { 'is-highlight-applied': highlightOnHover })} | ||
| role={onKeyDown ? null : 'button'} |
There was a problem hiding this comment.
fyi that link refers to when HTML nodes are falsey values whereas Jackie's question refers to attributes of an element. for example, you can set data- attributes to false and you'll still see those values in the DOM
it looks like there's some logic that determines what type of attributes should be hidden when falsey: https://stackoverflow.com/a/31164090
jmcbgaston
deleted the
update-thumbnail-card-remove-role-and-tabIndex-when-onKeyDown
branch
roleandtabIndex