terra-framework icon indicating copy to clipboard operation
terra-framework copied to clipboard

Published 20 hours ago • verified publisher icon cerner

[terra-table] [terra-data-grid] Add column span functionality to FlowsheetDataGrid and Table

Open nikhitasharma opened this issue 11 months ago • 8 comments

Summary

What was changed: Added column span functionality to Terra Table to support it in FlowsheetDataGrid

Notes:

  • The column highlighting functionality is disabled for columns with multiple column spans. The below example has column highlighting for Illness Severity but will not be supported since it has column span of 2. image

Why it was changed: To support multiple column spans and avoid histories to break on page loads.

Testing

This change was tested using:

  • [x] WDIO
  • [ ] Jest
  • [ ] Visual testing (please attach a screenshot or recording)
  • [ ] Other (please describe below)
  • [ ] No tests are needed

Reviews

In addition to engineering reviews, this PR needs:

  • [ ] UX review
  • [x] Accessibility review
  • [ ] Functional review

Additional Details

This PR resolves:

UXPLATFORM-10182

Thank you for contributing to Terra. @cerner/terra

nikhitasharma avatar Mar 20 '24 21:03 nikhitasharma

Are column actions supposed to be unsupported with columnSpan prop? I checked that in current implementation column actions don't work with column span, but in documentation I don't see a mentioning it's not supported, like, for example, Column Highlighting functionality.

Thats a good catch, It is simple prop addition for column actions header to support column spans. I have added that in and it should work now: image

nikhitasharma avatar Mar 21 '24 18:03 nikhitasharma

@nikhitasharma - Should column header actions such as sort disabled for column span?

mjpalazzo avatar Mar 21 '24 18:03 mjpalazzo

@nikhitasharma - Should column header actions such as sort disabled for column span?

@mjpalazzo If column header actions is something we do not want to support with column span, we can bypass that as well similar to column highlighting. But I don't think we can restrict what users pass in for the onClick function for actions. What are your thoughts on this.

nikhitasharma avatar Mar 21 '24 18:03 nikhitasharma

@nikhitasharma - Should column header actions such as sort disabled for column span?

@mjpalazzo If column header actions is something we do not want to support with column span, we can bypass that as well similar to column highlighting. But I don't think we can restrict what users pass in for the onClick function for actions. What are your thoughts on this.

@nikhitasharma - Please disregard my question. I did not mean column header actions. My concern was about column states such as sort, error, and selectable, but those are supported by Worklist Data Grid with onColumnSelect, not Flowsheet which does not have the onColumnSelect prop.

mjpalazzo avatar Mar 21 '24 20:03 mjpalazzo

@nikhitasharma - I found a keyboard navigation issue while testing the colspan enhancement. Using the arrow keys to navigate the cells in the example. When I use right arrow or the End keyboard shortcut, navigation stops at column 4. This also happened with the screen reader. Please let me know if you would like me to demo or a recording of the behavior.

mjpalazzo avatar Mar 21 '24 20:03 mjpalazzo

I just noticed that the pinned column border style might be affected if the pinned columns have columnSpan prop: pinned_column_border

adoroshk avatar Mar 22 '24 13:03 adoroshk

Currently looking into both of these issues @adoroshk @mjpalazzo.

nikhitasharma avatar Mar 22 '24 14:03 nikhitasharma

@nikhitasharma - This is making good progress. While testing keyboard navigation and with JAWS I encountered a few issues. The keyboard navigation issues occur with and without JAWS. I will recreate the steps below: Pressed Tab to navigate to data grid, column 1 row 1. JAWS announced name role value as required. Pressed Right Arrow to navigate the column header cells. JAWS announced the column labels and position as required. From column 6 row 1 (March 18) pressed Down Arrow. Focus went to column 4 row 2, JAWS announced row header, cell contents, cell position correctly, but focus should have gone to column 6, row 2. Pressed Right Arrow to navigate cells in row 2. JAWS announced column header, cell content, and cell position as required. Pressed Up Arrow from column 6 row 2 and nothing happened. I could not navigate to the column header row from column 6 row 2, column 7 row 2, or column 8 row 2. Pressed Left Arrow to navigate to column 5 row 2. Pressed Up Arrow and nothing happened. I could not navigate to the column header row from column 6 row 2. Pressed Left Arrow to navigate to column 4 row 2. Pressed Up Arrow and focus went to column 6 row 1. JAWS announced "March 18 column header column 6, row 1.

mjpalazzo avatar Apr 09 '24 18:04 mjpalazzo

You need logic to properly handle the focus event for the DataGrid component.

cm9361 avatar Apr 11 '24 07:04 cm9361

@nikhitasharma - This is working much better now. All the navigation issus I called out above are resolved. I found 1 issue with the End key. When I navigate to the column 1 row 1 using the Home key all is well. If I then press the End key JAWS announces "End" but there is no change in visual focus. When I am on other table rows, Home and End work fine. The issue occurs in just in the header row.

mjpalazzo avatar Apr 11 '24 17:04 mjpalazzo

@nikhitasharma - All keyboard interactions and screen reader announcements are working as required. Great work! One minor observation about the column span with header actions example. The labels of the action buttons in the action header row do not match the label of the column header. For example, in the March 17 column, the action header says "March 16 Action"

mjpalazzo avatar Apr 11 '24 21:04 mjpalazzo

@nikhitasharma - All keyboard interactions and screen reader announcements are working as required. Great work! One minor observation about the column span with header actions example. The labels of the action buttons in the action header row do not match the label of the column header. For example, in the March 17 column, the action header says "March 16 Action"

@mjpalazzo This should be fixed now.

nikhitasharma avatar Apr 16 '24 04:04 nikhitasharma

Some observations:

  1. I just noticed that table with col span example is not working.
  2. I was wondering how table with resizable columns work with col span. As I didn't see examples for that, I assume that colspan is currently not supported with column resizing (at least for now, as I understand it might be out of scope of this PR). In that case we might want to mention that in documentation (unless there is a plan to change that soon)

@adoroshk The table with column spans example should work now. I have added resizable columns to the table example with column spans.

nikhitasharma avatar Apr 16 '24 05:04 nikhitasharma

@nikhitasharma - I validated keyboard navigation and JAWS using the Edge browser. Everything is working as required. The issue in the column actions example where the button label does not match the column header is still there, but that is a minor issue with the example not the component. Great job!

mjpalazzo avatar Apr 16 '24 20:04 mjpalazzo

@nikhitasharma - I validated keyboard navigation and JAWS using the Edge browser. Everything is working as required. The issue in the column actions example where the button label does not match the column header is still there, but that is a minor issue with the example not the component. Great job!

Thanks for pointing that out clearly. I fixed it.

nikhitasharma avatar Apr 16 '24 21:04 nikhitasharma