vmware-clarity/starters

A collection of starter applications built with Clarity. Each starter project contains minimal default configuration and code to run and develop an application for a specific technology.

starters

Each of the starter applications showcases a specific technology and demonstrates how to use the Clarity Core package with it.

Overview

Each project contains minimal configuration and code to run and build a starter application for a specific technology. For client side applications the boilerplate code was generating with the projects provided tooling and is using those defaults. For build technologies, the application uses minimal build settings and configurations to run and build the code.

Try it out

Prerequisites

• Clarity Core
• NPM

Build & Run

1. cd <STARTER_NAME>
2. npm install
3. npm run start

Documentation

Documentation for Clarity Core is available here. All other technologies maintain separate documentation.

• Angular
• AngularJS
• Augular Universal
• Vue
• React
• Parcel
• Rollup
• Snowpack

Contributing

The starters project team welcomes contributions from the community. Before you start working with starters, please read our Developer Certificate of Origin. All contributions to this repository must be signed as described on that page. Your signature certifies that you wrote the patch or have the right to pass it on as an open-source patch. For more detailed information, refer to CONTRIBUTING.md.

License

The project license is available here.

starters's Issues

virtual scroll with variable sized items is broken

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.

Row DOM Performance: voice over doesn't "see" new rows when DOM elements are recycled

Row DOM Performance: select all doesn't work

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.

migrate core apps directory

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

Column Ordering - grab and release bug

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

Row DOM Performance - page up / down doesn't work

angular datagrid row dom performance

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

Column Ordering - expose events so application can add aria live

Screen Reader Columns: approach doesn't work in screen reader browse (virtual cursor) mode

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

Row DOM Performance: all demos should default to pagination

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.

Advanced Row Selection: mouse users may accidentally click outside of the checkbox causing all other rows to deselect

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.

Demo - remove filtering from demos

Column Ordering: grabbed column styles are incorrect

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

Row DOM Performance - add jump to index

Row DOM Performance: select checkbox -> keyboard navigation breaks

Steps to reproduce:

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

I think I broke this in #77.

core datagrid advanced row selection

feat: add core advanced row selection demo #12

Column Ordering: unexpected/invalid heading controls

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.

angular datagrid column dom performance

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

angular datagrid advanced row selection

feat: add angular advanced row selection demo #13

Demo - remove core demos

virtual scroll doesn't maintain active cell correctly while scrolling

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.

Lazy Load Rows: range selection doesn't work until scroll event

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.

Row selection: Additions to demo app to help us understand UX related issues with controls in cells

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.

Row DOM Performance: various keyboard shortcuts don't work

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.

Existing Issue: Datagrid checkboxes should not capture tab focus

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

Row DOM Performance: scrolling broken after cell is focused

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

Column Ordering: instructions are not provided

From Amy Li

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

Column Ordering: holding space causes column to be repeatedly grabbed and dropped

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.

Column Ordering: name, role and state indications are missing

From Amy Li,

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

Row DOM Performance: browsing the table with virtual cursor does not load new data

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.

Demo - fix sub navigation overflow

Demo - add more columns to data generator