Tooltips currently only have capacity to display a text label. This should be updated to allow the inclusion of a left aligned icon as well.
💬 Description
When implementing a tooltip, an optional icon can be specified, and any icon can be chosen to display. It must always match the text colour, and it must be able to have customizable alt-text so that SRs can read it out.
Alternatively, if the icon doesn't add any additional meaning to the tooltip label, then it can be excluded from SR announcements. For example, a tooltip showing the label 'Coffee' with an icon of a coffee cup doesn't need to read out both alt-text and label as this would be repetition. The icon is effectively labelled by the tooltip label.
💰 Use value
This provides additional flexibility on the tooltip component to cater for more use cases.
Acceptance Criteria
Given that a tooltip is being implemented,
When setting the properties
Then an option to display an icon exists, but it default turned off.
Given that a tooltip is being implemented, and the icon has been selected to display,
When setting the properties
Then an option to use different icons from the default icon set is possible.
Given that a tooltip is displayed with text and an icon,
When the text wraps onto multiple lines,
Then the text should become left aligned with the icon aligned vertically with the 1st line of text.
Given that a tooltip is being implemented with an icon,
When setting its properties,
Then a property exists allowing the icon alt-text to be customized.
Given that a tooltip is being implemented with an icon,
When setting its properties,
Then a property exists allowing the icon alt-text to be excluded from the SR announcement.
Additional info
Tell us anything else useful to help us understand your suggestion.
See Figma branch '[Update] 223 - Tooltip dark variant' for designs.
MI6-94
commented
3 months ago
Summary
Tooltips currently only have capacity to display a text label. This should be updated to allow the inclusion of a left aligned icon as well.
💬 Description
When implementing a tooltip, an optional icon can be specified, and any icon can be chosen to display. It must always match the text colour, and it must be able to have customizable alt-text so that SRs can read it out.
Alternatively, if the icon doesn't add any additional meaning to the tooltip label, then it can be excluded from SR announcements. For example, a tooltip showing the label 'Coffee' with an icon of a coffee cup doesn't need to read out both alt-text and label as this would be repetition. The icon is effectively labelled by the tooltip label.
💰 Use value
This provides additional flexibility on the tooltip component to cater for more use cases.
Acceptance Criteria
Given that a tooltip is being implemented, When setting the properties Then an option to display an icon exists, but it default turned off.
Given that a tooltip is being implemented, and the icon has been selected to display, When setting the properties Then an option to use different icons from the default icon set is possible.
Given that a tooltip is displayed with text and an icon, When the text wraps onto multiple lines, Then the text should become left aligned with the icon aligned vertically with the 1st line of text.
Given that a tooltip is being implemented with an icon, When setting its properties, Then a property exists allowing the icon alt-text to be customized.
Given that a tooltip is being implemented with an icon, When setting its properties, Then a property exists allowing the icon alt-text to be excluded from the SR announcement.
Additional info
Tell us anything else useful to help us understand your suggestion.
See Figma branch '[Update] 223 - Tooltip dark variant' for designs.