-
Notifications
You must be signed in to change notification settings - Fork 380
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
feat(react-grid): support expanding/collapsing detail rows with keyboard #446
feat(react-grid): support expanding/collapsing detail rows with keyboard #446
Conversation
/> | ||
</td> | ||
); | ||
onKeyDown={handleKeyDown} |
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.
Why not subscribe the element with tabIndex
on these events?
const handleBlur = (e) => { | ||
e.target.style.outline = ''; | ||
}; | ||
const handleMouseDownChildren = (e) => { |
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.
Why do we need this handler?
style={style} | ||
> | ||
<IconButton | ||
tabIndex={0} // eslint-disable-line jsx-a11y/no-noninteractive-tabindex |
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 like there is no need to explicitly specify the tabIndex
property for the button element. It can get focus by default.
marginLeft: '-6px', | ||
height: theme.spacing.unit * 6, | ||
width: theme.spacing.unit * 6, | ||
marginLeft: '-18px', |
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.
Is not it possible to use theme.spacing.unit
here?
textOverflow: 'initial', | ||
paddingTop: '0px', | ||
paddingBottom: '0px', | ||
}, | ||
toggleCellIcon: { |
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.
Maybe rename this property to "toggleCellButton"?
|
||
export const TableDetailToggleCell = ({ style, expanded, toggleExpanded }) => { | ||
const handleKeyDown = (event) => { | ||
if (event.keyCode === 13) { |
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.
Please extract the "magic number" to a human-readable constant.
.toBe(0); | ||
}); | ||
|
||
it('should handle the "Enter" key down', () => { |
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.
"Enter" and "Space" keys
No description provided.