Skip to content
This repository has been archived by the owner on May 22, 2024. It is now read-only.

[terra-clinical-item-view] Accessibility guide #916

Merged
merged 1 commit into from
Sep 27, 2023
Merged

Conversation

RayGunY
Copy link
Contributor

@RayGunY RayGunY commented Sep 14, 2023

Summary

What was changed:
Added an accessibility guide for Clinical Item View

Why it was changed:
So users have a reference for accessibility guidelines and changes we've made to the component.

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

This PR resolves:

UXPLATFORM-8569


Thank you for contributing to Terra.
@cerner/terra

@RayGunY RayGunY self-assigned this Sep 14, 2023
@RayGunY RayGunY marked this pull request as ready for review September 14, 2023 18:22
Displays in the Item View are rendered as list items inside a primary unordered list.
The structure is different for the different types of layouts - one column, two columns, and two columns by row. Their structure is as follows:

**For a one column layout with 8 displays**
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wonder if we can display these 3 lists as side by side for better comparison.

Copy link
Contributor Author

@RayGunY RayGunY Sep 22, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I played around with it a bit, does this seem better? Haven't pushed out the change yet

Screenshot 2023-09-22 at 1 35 47 PM

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I can also top align them
Screenshot 2023-09-22 at 1 39 26 PM

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That looks good!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sweet, added here: 5e73fd5

- For example - presenting related information across from each other in the two column view can make it more difficult for users to understand that the information is related.
Reading by column from top to bottom is the more common way information is consumed visually, so when presenting this information by row between the two columns it might be confusing for assistive technology users and users in general.
- When passing in Clinical Item Displays, keep in mind that only 8 can be used within a view at a time. Any additional displays passed in will be ignored.
- Displays are also split between two columns with every other display being moved to the right hand column.
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should this be more like "When displays are split into two columns, every other display is in the right hand column"? Also, again seems like something useful to know in the props

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Slightly reworded this and added the info to the layout prop since I think that's more relevant than putting it under the display prop. facd8ef

@github-actions github-actions bot temporarily deployed to preview-pr-916 September 25, 2023 20:58 Destroyed
@sycombs sycombs merged commit 8d7c085 into main Sep 27, 2023
@sycombs sycombs deleted the UXPLATFORM-8569 branch September 27, 2023 14:24
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants