-
Notifications
You must be signed in to change notification settings - Fork 327
ui: updated the ui of list items on deployments tab #2879
Conversation
Ember Asset Size actionAs of 64d0ccb Files that got Bigger 🚨:
Files that stayed the same size 🤷:
|
cc02c91
to
febbb2b
Compare
febbb2b
to
bce82a9
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looking good. I have one significant comment regarding accessibility of the health status indicator but all great apart from that.
<span | ||
data-test-health-status={{downcase vars.deploymentHealth}} | ||
class="deploy-url__status deploy-url__status--{{downcase vars.deploymentHealth}}" | ||
/> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
When a URL is present, it looks like we’re only using the color of the indicator to convey the health status. We should add an additional means to convey this information.
Per WCAG SC 1.4.1:
Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Just to hammer the point home, here’s how a simulation of how this would look to someone with deuteranopia (via Sim Daltonism):
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@sabrinako How about we show the URL if and only if the health status is available
? I think that would adhere pretty closely to the WCAG guidelines, on the basis that the presence of a URL implies availability.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@gregone pointed out that we might want to also show the URL in the unknown
state, for deployments that don’t/can’t provide health status. I think this is worth digging into, but perhaps in a subsequent PR.
bce82a9
to
929c3ce
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🎉
Notes
flight
, so theDeploying...
icon is theclock
icon until the animated loading one is availableScreenshots
Note the left sidebar
Before
After
How to test
git checkout ui/deployment-card-state
yarn start