[terra-clinical-item-view] Implement item view as unordered list

[RayGunY]

Note: This PR is a little messy right now as it's pointing towards UXPLATFORM-9563. Once that's merged this will be able to be rebased with main and it'll clean up better.

Summary

What was changed:

• Implementing the usage of unordered lists to contain the displays as list items
• Split out the logic into more individual methods for readability/because there were so many different scenarios to handle
• add guidance for consumers about adding a header for the item view

For two column layout (this includes the byRow formatting) the implementation of the unordered lists is slightly different. It works as an unordered list that contains the two columns as list items. Each column is an unordered list as well that contains the displays as list items.

For normal two column layout:
Unordered List
-> list item 1 (column 1 as UL) -> column 1's displays as list items
-> list item 2 (column 2 as UL) -> column 2's displays as list items

For by row two column layout:
Unordered List
-> list item 1 (row 1 as UL) -> row 1's two displays as list items
-> list item 2 (row 2 as UL) -> row 2's two displays as list items
-> list item 3 (row 3 as UL) -> row 3's two displays as list items
-> list item 4 (row 4 as UL) -> row 4's two displays as list items

When there is just a single display passed in to the item view we don't treat it as part of a list.

Why it was changed:
This was changes so we have greater context when using the screen reader of how this information is grouped.

Testing

This change was tested using:

• WDIO
• 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:

• UX review
• Accessibility review
• Functional review

Additional Details

Validation posted below, first two are how the implementation will read when the consumers adds their header. Also added a recording of the 'by row' readout since it is different than the other two.

VO-one-column-with-header.mov

VO-two-column-with-header.mov

VO-two-column-by-row.mov

JAWS-two-columns-by-row.mov

JAWs-one-column.mov

JAWS-two-column.mov

This PR resolves:

UXPLATFORM-9430

---

Thank you for contributing to Terra.
@cerner/terra

[aalexanderj]

Looks good, just one small nit

[RayGunY]

@eawww @sycombs @sdadn this is ready to be looked when you've got a moment

[RayGunY]

Posting in it's own comment - I was having trouble getting the header label to read out with JAWs. Dug around a bit and JAWs by default does not read out headers for lists. More on that here: https://stackoverflow.com/questions/36882441/jaws-not-reading-listview-column-headers

So since by default it doesn't read them out (presumably for some reason that the JAWs team has determined) this should be good in that regard. Just to be as thorough as possible I've been trying to figure out how to switch the settings so it will read out the header, but I've had no luck so far. I've tried to do these steps but I can't access the manager it seems? https://docs.oracle.com/applications/smartview/610/SVAAA/enabling_jaws_to_read_listview_headers.htm#SVAAA-smart_view_accessibility_book_4

I've posted recordings to at least show that it's reading them out as a list now. Does the above JAWs behavior sound reasonable? Not sure if I'll be able to get recordings with that setting working.

[RayGunY]

I've removed the header code, we've decided to have consumers add their own visible header and are going to advise in the documentation how/why to do that. I've added an accessibility section for the main site page which includes an example for single column and two column layouts. Also added a blurb about truncation, I saw the clinical item display page has one there too so I just copied it over.

I'll be adding similar but more detailed information on the actual accessibility guide, that will be done in this PR: #916

@vinaybhargavar @zxeleven @sycombs @sdadn @scottwilmarth this can be reviewed/re-reviewed when you've got some time

[sdadn]

Does this depend on #912 ? If so, I'll review it once that gets merged to avoid messy diffs and merges.

[sdadn]

#912 Has been merged, once you update it with main, I can review this.

[scottwilmarth]

There are still improvements that should be made, but there is not a clear path to manage the needed changes when considering passivity. These updates are not perfect, but they represent a better path and will be great to ensure better support for accessibility.