DataTable: ALT+W Keyboard Shortcut to AUTO adjust the width of resizeable columns

[Rene-Stoeckel]

Description

We use the primefaces data table to display data and we use resizable columns so that the column widths
can be adjusted with the mouse.
In our accessibility assessment we were requested to make the columns resizable via keyboard as well.
For example we should provide a keyboard shortcut similiar to excel so that a user can
auto-adjust the width of the column so that the cells content is fully visible at least to the width of the screen.

As a precondition, the feature (keyboard navigation on data tables)
#11783 must probably be implemented first.

Describe the solution you would like

Provide a keyboard shortcut similiar to excel so that a user can auto-adjust the width of the column so that the cells content is fully visible at least to the width of the screen.

Additional context

Preferably it would be the keyboard combination ALT+W tro trigger an autosize

[melloware]

@Rene-Stoeckel just for reference what are the keyboard shortcuts in Excel to do this?

[Rene-Stoeckel]

@Rene-Stoeckel just for reference what are the keyboard shortcuts in Excel to do this?
In Excel its just a navigation through the menus using ALT->H->O->I (in german ALT->R->FF->I).
https://www.launchexcel.com/column-width-autofit-keyboard
It should be something simpler, like ALT+W etc.

[melloware]

Oh you want it to Auto Adjust the width of the column.

[melloware]

This is not trivial, I think this would require:

1. For the current column that has focus, find the longest text in the column by walking all the cells.
2. For that text try and determine a "visible pixel size" based on the current font size etc.
3. Change the current column width to be that new calculated "visible pixel size".

[melloware]

@Rene-Stoeckel please have your team test out this reproducer:
pf-11918.zip

Unzip and run mvn clean jetty:run and navigate to: http://localhost:8080/

Now when you are in a column and press ALT+W it resizes teh column to fit the largest element.

[Rene-Stoeckel]

We just tested this reproducer with the screenreader and we can confirm that

1. the content of the table is correctly presented with the screenreader, just as expected.
2. cursor navigation is working as expected,
3. the column size can be adjusted as expected with ALT-W.

But there are things we noticed that still must be fixed here:

1. When the fokus is on cell top left (1,1) and a cell different from (1,1) is clicked with the mouse then the cursor navigation is broken. The fokus travels to a different cell than expected and some cells can no longer be reached. E.g. click on the cell "New York", navigate all way down and then all way up (cursor down/up or page down/up) and the fokus will end up in cell 123.
2. The auto resize of a column should also consider the length of the text of its column header including the icon so that the header would be fully visible after resize as well.

[melloware]

@Rene-Stoeckel for issue 1 can you reproduce it exactly? or give me instructions on how to reproduce the issue?

as for Issue 2 let me see what I can do.

[Rene-Stoeckel]

I updated the description of finding 1) in the comment above to be more specific. Browsers I used are chrome 124 and MS edge 124.

[melloware]

OK I think I fixed both issues if you want to try this one. Don't forget to CTRL+F5 to reload JS.
pf-dt-accessibility.zip

[Rene-Stoeckel]

Thank you very much for the quick response. We tried this tester and the two issues are fixed. Screenreader, cursor navigation and column auto resize are as expeced.

[melloware]

OK i will put a PR together to get this incorporated into PF. Thank you for the detailed testing!