Develop example of a datagrid with advanced, spreadsheet-like features

[mcking65]

Develop an implementation of the
grid design pattern
where:

1. All cells have editable or interactive content and the Enter/F2 model of editing is available.
2. A function is available that causes some cells to be marked read-only.
3. Cells and rows are selectable and can be either moved or deleted.

[mcking65]

An HTML template file for this example is now in the repo in
examples/grid/advancedDataGrid.html.

[LinboLen]

first, i want to know whether use html table as base structure to implement advanced datagrid or spreadsheet-like feature

[ZoeBijl]

@LinboLen does it make sense to add the same data to a HTML table? If so, yes :).

[frastlin]

I agree that Aria should be used. How does one make a screen reader read A-1 notation while using a grid?

[mcking65]

@frastlin, by A-1 notation, do you mean column and row cell addresses like in Excel where A1 is column 1 row 1 and C3 is column 3 row 3?

There are a wide variety of ways to enable such information to be automatically spoken. However, as a user, one thing that is extremely important to me is the ability to control if, how, and when such information is announced. Probably the best way for enabling that, at this time, is to use colheader and rowheader cells for the col and row titles. You could then also enable users to hide or show the address row and column.

[frastlin]

This would work great! The only problem is that you would still hear the column and row number announced, so the message, using aria, would be something like:
"cell content selected A1 column 1"
Which is not the behavior in Excel or Google Sheets. I know for me, that extra column and row announcement would become really annoying after a while. There is also the "selected", but that is another issue.
Is there any way to suppress the column and row announcements to match the behavior in Google Sheets and Excel?
The only way I know of is to not use aria grid, but that defeats the point of using aria in the first place.

[frastlin]

Frankly, it is significantly easier to build your own implementation of a spreadsheet than to use the proper Aria roles. I think there needs to be a spreadsheet element in HTML that has attributes that allow for callbacks and other things that normal cells have. But the actual management of aria in grids, in my experience, is gotten wrong 95% of the time. I have asked over 20 large companies how many blind users they have testing their products for UX and no one actually tests on blind users. This means that there is probably something that is not working correctly somewhere in the crazy globs of code in today's single page apps. Wrong implementations happen at all levels of Aria, but in Grids most often. Ease and speed are today's motto, so my boss always tells me to build as fast as possible at for the first iterations and refactor later. This means forgoing Aria almost altogether. I can build a spreadsheet app in the quarter of the time using live-regions.

[noahehall]

any update on this?

[m4theushw]

Reading https://www.w3.org/TR/wai-aria-practices-1.1/#gridNav_inside I'm not sure how to handle when a cell contains multiple widgets and the widgets rely on Enter to trigger an action. Allowing only F2 to disable the grid navigation will require some knowledge from the user, specially on Apple keyboards which require Fn to be pressed. I was expecting that this demo would include this use case.

[raythurnvoid]

Reading https://www.w3.org/TR/wai-aria-practices-1.1/#gridNav_inside I'm not sure how to handle when a cell contains multiple widgets and the widgets relay on Enter to trigger an action. Allowing only F2 to disable the grid navigation will require some knowledge from the user, specially on Apple keyboards which require Fn to be pressed. I was expecting that this demo would include this use case.

Just implement the Menu Button pattern inside the cell. I don't see a conflict with the Enter key. When the user press Enter move the focus on the menu element, as long it has the focus it will also handle the arrows keydown events (you have to call stopPropagation to prevent the bubbling), when the focus goes back to the grid then you let the grid handle the arrows keydown events.

What you can't do is include multiple widget/buttons in the same cell, but you can split them in different cells and use CSS to make them look like the same cell.

[obliviga]

Looking forward for this to completed!