[compact interactive list] Row height expanding to fit content

[adoroshk]

Summary

This PR changes the layout for rows in vertical flow to be similar to horizontal flow in order to allow row height expand and fit the content.

What was changed:

• The distribution of empty cells in vertical flow moved to the last row instead of the last column, similar to horizontal flow.
• The Arrow key navigation was adjusted to the new distribution of empty (placeholder) cells.
• rowHeight prop still exists and applicable if set, but it's no longer required for vertical flow and the default value is not applied if the prop is omitted.
• The documentation was updated to remove mentioning of rowHeight prop required to be set for vertical flow.

Testing

This change was tested using:

• [x] WDIO
• [x] 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:

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

Additional Details

The arrow key navigation for the vertical flow needs to be verified

This PR resolves:

UXPLATFORM-10199

[mjpalazzo]

@adoroshk - I did some testing with JAWS and VO and observed that as a I navigate from virtual row to virtual row in the vertical flow examples, JAWS and VO announce a row index that does not match the row number in parentheses in the example row header. Let me know if you want to do a screen share. With VO the horizontal flow example works fine.

[adoroshk]

@adoroshk - I did some testing with JAWS and VO and observed that as a I navigate from virtual row to virtual row in the vertical flow examples, JAWS and VO announce a row index that does not match the row number in parentheses in the example row header. Let me know if you want to do a screen share. With VO the horizontal flow example works fine.

@mjpalazzo This is happening because assistive technologies announce the row number per its aria-rowindex, which is tied to the row DOM appearance order and doesn't work if re-arranged. In order to let rows grow to fit content height, the row elements had to be rearranged to look like they go in vertical order, but in DOM they still go in horizontal order.

The plan to solve this was to use the aria-rowindextext attribute, which defines a human-readable text alternative of aria-rowindex. Here is the documentation I was able to find about aria-rowindextext attribute:

1. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-rowindextext
2. https://www.w3.org/TR/wai-aria-1.3/#aria-rowindextext
3. https://w3c.github.io/aria/#aria-rowindextext
4. https://raw.githack.com/w3c/aria-practices/issue1075-indextext-guidance/aria-practices.html#gridAndTableProperties_indextext

And the example: https://carsovia.com/?_=%2Fen-US%2Fdocs%2FWeb%2FAPI%2FElement%2FariaRowIndexText%23JQ5tkEWdt7r6tHXr%2Bz0rqwLPYUvtcJEt2Xy5rVM%3D

I have added that prop and tested with JAWS following options, but unfortunately neither one changed JAWS announcement from row number being based on DOM tied row index:

• aria-rowindextext attribute added to cells with/without accompanying aria-rowindex prop
• aria-rowindextext attribute added to rows with/without accompanying aria-rowindex prop
• aria-rowindextext attribute added to both rows and cells with/without accompanying aria-rowindex prop
• aria-rowindextext attribute added to rows accompanied with aria-rowindex prop and aria-rowcount added to the grid

The property is relatively new and I wasn't able to find implementation examples in open source anywhere. My hope is that the property might actually work, but the JAWS version I use might not pick it up yet. Would appreciate you input on the matter.

[mjpalazzo]

@adoroshk - let's meet and do a screen share so we can confirm that we are aligned on the issue and the root cause.

[mjpalazzo]

@adoroshk - I retested Vertical Flow with Edge/JAWS and Safari/VoiceOver. At 100% browser zoom when I pressed the Down Arrow JAWS traversed the list in an "N" pattern and announced the row indexes 2, 6, 9, 3, 7, 11, 4, 8, 5, 9. When I zoomed the browser to 200% so the virtual rows were stacked into 1 visual column, JAWS traversed the list in an "I" pattern and the announced the row indexs 2 - 11 correctly! VO navigated the CIL differently than JAWS. At 100% browser zoom when I pressed Control Option Down Arrow, VO traversed the list in a "Z" pattern from left to right and announces the virtual row index correctly 2, 3, 4, 5, then the next visual row 6, 7, 8, 9, etc. When I zoomed the browser to 200% so the virtual rows were stacked into 1 visual column, pressed Control Option Down Arrow, VO traversed the list in a broken "I" that is, it announced the rows 2 - 4 and skipped several virtual rows to one further down the list. This was as we had seen in our screen share. I suspect that there is a Safari bug because I then tested with VO on Chrome. At 200% browser zoom, VO navigated the list correctly without skipping any virtual rows. At 200% zoom part of the list was outside the viewport. When VO got to last visible row, it announced that it reached the bottom and would go no further with the Down Arrow key until I used the mouse to scroll the remaining rows into view. VO then proceeded to navigate and announce the remaining cells. My recommendation is to release this version, but to document that known issues with JAWS and VO. I would like to get confirmation from UX that this would be OK before we proceed. @eawww - If you have time in the near future, would you meet with us so we can demo the idiosyncracies of each screen reader with CIL?

[stale[bot]]

This issue has been automatically marked as inactive because it has not had recent activity. It will be closed in seven days if no further activity occurs. Thank you for your contributions.