Skip to content

[WIP] Add expand abilities to data grid cells#2366

Closed
snide wants to merge 24 commits intoelastic:feature/euidatagridfrom
snide:grid/expand
Closed

[WIP] Add expand abilities to data grid cells#2366
snide wants to merge 24 commits intoelastic:feature/euidatagridfrom
snide:grid/expand

Conversation

@snide
Copy link
Copy Markdown
Contributor

@snide snide commented Sep 23, 2019

Summary

Removes the tabbable system and replaces it with a simpler popover system that allows cells to expand into a focus trapped popover.

Features this adds

  • There is now an isExpandable setting on data grid columns that lets you turn on/off cell expansion.
  • If on, the cells will show a button to trigged a popup that will render the content of the cell in a popover. This content is focus trapped and acts exactly like a normal popover.
  • This popover can be triggered/closed by using enter/escape with your keyboard on focus of any cell.
  • The contents of the popover can have custom rendering per schema type. In the docs is an example where json content is rendered within an EuiCodeBlock

Checklist

  • Checked in dark mode
  • Checked in mobile
  • Checked in IE11 and Firefox
  • Props have proper autodocs
  • Added documentation examples
  • Added or updated jest tests
  • Checked for breaking changes and labeled appropriately
  • Checked for accessibility including keyboard-only and screenreader modes
  • A changelog entry exists and is marked appropriately

@snide
Copy link
Copy Markdown
Contributor Author

snide commented Sep 30, 2019

@chandlerprall status of this PR and what I need help on:

  1. Keydown events are handled in both data_grid.tsx and data_grid_cell. Preferably this could be on one place. My guess is that it could all be in data_grid_cell at this point.
  2. data_grid_cell.tsx now has a popover in EuiDataGridCellContent. The state for this popover is managed in the two separate components in that file. Likely it should be done completely through pass downs.
  3. Cell focus needs to reflect that state (of the popover) regardless of it being initiated through a keydown event or mouse event. On press, the popover should take focus. On close, the origin cell should take focus.
  4. The popover content has an example of using schema to change the content. Likely we'd want one for each schema type, and my guess there is a better way to do that then managing it in that file. Likewise, we'll probably want a way for someone to override the popover content with a custom render.

@chandlerprall
Copy link
Copy Markdown
Contributor

Keydown events are handled in both data_grid.tsx and data_grid_cell. Preferably this could be on one place. My guess is that it could all be in data_grid_cell at this point.

I think the current distinction / placement makes sense: grid owns top-level arrow keys for navigation and escape for exiting full screen, while the cell-level keydown handler toggles the popover. There doesn't seem to be any conflict between the two handlers.

@chandlerprall
Copy link
Copy Markdown
Contributor

  • Merged cell popover states together, refactored to be smaller and nicer.
  • Cell focus has been cleaned up, focus is now returned when the popover closes.
  • Popover content formatting has been refactored, added support for custom formatters to be passed in.

I think this is ready to take out of draft.

@snide snide marked this pull request as ready for review October 7, 2019 15:47
@snide
Copy link
Copy Markdown
Contributor Author

snide commented Oct 7, 2019

I have some screen reader work to do here (mostly announcing position and controls for the popup), but the rest of this PR is safe to review.

@myasonik
Copy link
Copy Markdown
Contributor

myasonik commented Oct 8, 2019

Going to wait until @snide has a chance to work on the SR support before reviewing. Let me know if you want a hand brainstorming UX or anything else.

Copy link
Copy Markdown
Contributor

@thompsongl thompsongl left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

tab functionality is now much different than before (not sure if intentional or not):

  • Grid itself cannot be bypassed (if cells contain focusable content)
  • Individual cells are now navigable in tab order (if they contain focusable content)
  • Arrow keys still work as expected

Also, if I add isExpandable: false to the 'actions' column (or any column with focusable content) what's the intended interaction with the buttons? Right now tab will focus the buttons, but I think I used to be down/enter.

@snide
Copy link
Copy Markdown
Contributor Author

snide commented Oct 9, 2019

Cell level accessibility / announcing is now in. The tab issue of not being able to tab out of the table will need to get fixed by @chandlerprall. My latest commit unfortunately breaks the tests, but they should be easy to fix. Just need a session with chandler to figure how to grep the inner content and ignore the new screenreader stuff.

Video here http://snid.es/c9148f9142c6

@chandlerprall chandlerprall mentioned this pull request Oct 9, 2019
10 tasks
@myasonik
Copy link
Copy Markdown
Contributor

We still also need to fix tabbing throughout the cells. Do we want to do that in this PR or a follow up?

Also, I made a few tweaks:

  • tabIndex={-1} to buttons that are set with aria-hidden="true" because things that aren't screen reader accessible shouldn't be navigated to by keyboard either (Explanation)
  • removed a static ID from a subcomponent that DataGrid renders (wasn't being used and was causing axe to throw errors)
  • moved popover boundary announcement/instructions to aria-describedby instead of aria-labelledby (labels should be reserved for titling content, descriptions will more typically hold special instructions)
  • Removed all of the draggable ARIA/keyboard stuff off of the grab icon. This was duplicate functionality off of the row, had two tab stops within itself, and didn't have any focus states.

@snide
Copy link
Copy Markdown
Contributor Author

snide commented Oct 10, 2019

Thanks for the backup on the accessibility bits, especially the id gen. That would have been bad!

We still also need to fix tabbing throughout the cells. Do we want to do that in this PR or a follow up?

Plan was to do it in this one, since it broke in this one.

@chandlerprall
Copy link
Copy Markdown
Contributor

Yep, I'm working on the cell tabbing right now.

@chandlerprall
Copy link
Copy Markdown
Contributor

Changes to tab functionality have effectively been reverted. Tabbing to the table should focus the grid's focus cell, another tab should take you off the grid even if there are interactive elements in cells.

@thompsongl
Copy link
Copy Markdown
Contributor

Changes to tab functionality have effectively been reverted

I'm still seeing the same tab behavior that I commented with earlier...

@chandlerprall
Copy link
Copy Markdown
Contributor

@thompsongl thanks for testing that... when I refactored the changes I failed to add it to expandable cells. Fixed

Copy link
Copy Markdown
Contributor

@thompsongl thompsongl left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Mostly small things at this point. Confirmed that tab behavior is back to its original state.

@snide
Copy link
Copy Markdown
Contributor Author

snide commented Oct 10, 2019

Bad merge, fixing.

@snide
Copy link
Copy Markdown
Contributor Author

snide commented Oct 10, 2019

For some reason I can't get this to merge correctly against feature/euidatagrid. I'm closing in in favor of #2418 which started a new branch to do the reverse and works fine. Will be merging on CI.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants