vmware-clarity / starters Goto Github PK

From Amy Li,

No name, role, and state indicating to assistive technologies that these are draggable items

Tab should not jump to the next datagrid checkbox, instead it should jump out of the grid

From Amy Li

when you use a datagrid you only use arrow keys to navigate between cells and tab key to enter or leave the entire datagrid getting to the checkbox cell should just be arrow keys

if you play with any of these w3 examples you can see that behavior https://www.w3.org/WAI/ARIA/apg/example-index/grid/dataGrids

feat(grid-demo): add angular virtual scroll demo #23
fix(grid-demo): maintain keyboard navigation in virtual rows directive (and add rendered range event) #27
fix(grid-demo): set aria-rowcount and aria-rowindex for virtual rows #44

Steps to reproduce:

1. go to the /angular/final-demo demo
2. select the first row
3. hold the shift key and click and click the 3rd row
4. notice that rows one and three are selected, but not row two (this is unexpected)
5. unselect all rows
6. scroll the table
7. select the first row
8. hold the shift key and click and click the 3rd row
9. notice that rows 1 - 3 are now selected as expected

This bug is not present if you remove the lazy load rows feature.

From Amy Li

The datagrid keyboard command Ctrl+End on windows and ctrl+fn+right arrow on mac no longer goes to the last cell of the last row. People who use keyboard-only will not be able to get past the table unless they tab the checkbox controls on every row. This is an issue as there can be thousands of rows with checkboxes to tab through.

From Amy Li

Allow users to switch between pagination Datagrid and lazy loading for those who need to navigate a few a time or jump to a specific row.

We are concerned with the accessibility around removing pagination. Therefore, we believe that all demos should start with pagination, but should have an option to remove pagination.

We should expand our row selection demo such that it includes input controls in cells to help us explore UX impact with regard to selection.

The ask here is to add a columns with a checkbox, button and text input respectively so we can work to understand if/how selection works under these circumstances and whether row selection makes sense under these real world conditions.

Voice Over has special virtual cursor mode, in which you can browse a table/grid with a combination of VO-special key and the arrow keys. Default Voice-over key combination is "control-option". A common alternative is the Caps Lock key.
When this mode is activated, keyboard events do not reach the JS layer anymore, and the datagrid programmatic cursor gets out of sync with the virtual cursor.
Virtual cursor does generates small scroll events and does load new data, but does not recognize that there are new rows in the grid, so it jumps to either 1st row, next column, or to the beginning of the grid.

Migrate the core apps that are left from the repo upgrade. This includes the following:

• angular grid demo
• react grid demo
• clr-ui-shim demo

Since these are not minimal starters like the rest I'm thinking we have a /advanced directory for these type of demo apps

vmware-clarity/core@f3d4c87

On the /angular/column-ordering demo, the grabbed column styles should be changed as per design in this conversation: https://vmware.slack.com/archives/C03SZ5ZKNJF/p1660064601734669

Steps to reproduce:

1. go to the /angular/row-dom-performance demo
2. focus on any cell
3. scroll slowly with the mouse wheel
4. notice that scrolling breaks and you get "stuck" with that row in the viewport

feat: add core advanced row selection demo #12

Steps to reproduce:

1. go to the /angular/final-demo demo
2. click the select-all checkbox
3. notice that the visible rows are not selected
4. notice that the select-all checkbox works very unexpectedly in other cases too

This bug seems to be due to the Row DOM Performance feature.

Steps to reproduce:

1. Select checkbox.
2. Press down arrow key several times.
3. Keyboard navigation breaks.

I think I broke this in #77.

Steps to reproduce:

1. go to the /angular/column-ordering demo
2. focus on a column
3. press and hold the space key
4. notice that the column gets "grabbed" and "dropped" repeatedly

This is likely because we are listening to the keypress event and instead we could perhaps listen to other events such as keyup/keydown.

From Amy Li

No instructions that the columns can be reordered for screen readers, sighted keyboard users, and mouse users

From Amy Li,

Users can only tab to sort control and arrow keys to use the drag and drop. This is not expected behavior. Related to invalid controls in header issue VPAT-2938.

The new drag and drop feature will add to this existing issue VPAT-2938 of invalid heading controls (filters and resize column). Only sort is supported in ARIA specs. Because it is not valid ARIA to add controls in table or datagrid headings we recommend providing controls outside of the datagrid for keyboard and screen reader users, this can be accordion or dialog with datagrid editing options. Mouse users can still drag and drop or chose to use the alternative controls. The above issues for people who use screen readers or keyboard-only will be avoided with this implementation.

If you select a cell and jump the middle of the scrollbar, a random row cell is made active. If you jump back, the original active cell isn't always made active again.

feat: add angular advanced row selection demo #13

From Amy Li

Screen reader announcement is improved in focus mode but not in screen reader browse mode (aka virtual cursor), which still reads all the heading content when navigating grid cells and the core issue of having heading controls other than sorting is not fixed. ARIA datagrids only allow sorting controls in the headings anything beyond that will cause screen reader issues. Please see Santina's recommendations in this Jira ticket under Resolution Details. This is also related to the same VPAT-2938 issue mentioned above. Note that because it is out of spec it may fail other assistive technologies that aren't covered here and can cause unforeseen issues in future updates of ATs or browsers.

This approach may be fundamentally flawed

This is especially noticeable when adding a multiline notes column. I've tried to use the AutoSizeVirtualScrollStrategy from '@angular/cdk-experimental/scrolling', but couldn't get it to work.

From Amy Li

(not WCAG issue) Mouse users may accidentally click outside of the checkbox causing all other rows to deselect. People who may not have good motor control may be affected by this. Recommend to only have the gridcell's area with the checkboxes to be adding selection only.

feat(grid-demo): add angular column dom performance demo #15

grabbing a column and then keyboard navigate to data cell should drop column