Adding text labels to status icons

[sang-yeo]

Hey team,
I've got feedback on status icon during my ux review. Feedback is "Add text labels to status icons" so that it delivers clear message to users. My initial design (see attached) shows the status in the FriendlyName column in bracket- Alarm, Warning and Recovered. What else would I do make it more clear? Any suggestions would appreciate it.

[serifluous]

Hey @sang-yeo, thanks for following up from the UX review ! The feedback here is mainly around the status icon not having a text label in addition to the icon being in a different column than the status text—If they're actually in the same column already, the design you have works 👍.

Having them in 2 separate columns makes it harder, for example, for someone who's navigating by keyboard and using a screen reader to relate the status icon to the status text. The customer will only get information from a single table cell at a time.

There's also a chance that the status icon will appear very far from the status text if someone's got a very wide screen (though you can set a column width through the Table component).

There are a few things you could do:

1. Put the status icon in the same table cell as the text and friendly name, so they're always paired with each other.
2. Move the status text into the same cell as the status icon and give the first column header some descriptive header text.

[sang-yeo]

This is very helpful. Yeah, the status icons should be in the same column. I will move the icon closer to the content.