mi6
Check and review disabled states for different backgrounds
Summary
Check the disabled states for the below buttons, ensuring they match the ACs. If not, make the necessary updates.
Default or dark buttons
Given that a default or dark coloured, disabled, primary button exists on a page, When viewed, Then its background colour should use 20% darken (rgba(0,0,0,0.2)), And its foreground colour should use 20% darken (rgba(0,0,0,0.2).
Given that a default or dark coloured, disabled, secondary button exists on a page, When viewed, Then its border colour should use 20% darken (rgba(0,0,0,0.2)), And its foreground colour should use 20% darken (rgba(0,0,0,0.2).
Given that a default or dark coloured, disabled, tertiary button exists on a page, When viewed, Then its foreground colour should use 20% darken (rgba(0,0,0,0.2).
Given that a default or dark coloured, disabled, icon button exists on a page, When viewed, Then its foreground colour should use 20% darken (rgba(0,0,0,0.2).
Light buttons
Given that a light coloured, disabled, primary button exists on a page, When viewed, Then its background colour should use 20% lighten (rgba(255,255,255,0.2)), And its foreground colour should use 20% lighten (rgba(255,255,255,0.2).
Given that a light coloured, disabled, secondary button exists on a page, When viewed, Then its border colour should use 20% lighten (rgba(255,255,255,0.2)), And its foreground colour should use 20% lighten (rgba(255,255,255,0.2).
Given that a light coloured, disabled, tertiary button exists on a page, When viewed, Then its foreground colour should use 20% lighten (rgba(255,255,255,0.2).
Given that a light coloured, disabled, icon button exists on a page, When viewed, Then its foreground colour should use 20% lighten (rgba(255,255,255,0.2).
Destructive buttons
Given that a disabled, destructive button exists on a page, When viewed, Then its background colour should use 20% darken (rgba(0,0,0,0.2)), And its foreground colour should use 20% darken (rgba(0,0,0,0.2).
Additional info:
- Changing colours to up contrast without making button seem 'enabled'.
- Introduce non-colour element to indicate disabled state (dashed line similar to text fields)
The icons on the horizontal scroll buttons have been set to the keyline-darken and keyline-lighten colours, which happen to be the same colour as the icons / text on disabled buttons. This styling will need to be removed as part of this ticket - the scroll buttons will then inherit the new styling applied directly to the ic-buttons.
Figma designs did not match the ACs above. Spoke to design team concerning this and there appears to have been some regression in the designs following a merge. As a result, moving this ticket back to design to do until the designs are ready again
Button colours have been modified during Dark Mode work to ensure accessibility guidelines are met and to ensure consistency throughout button display.
Moving this bug to ready for dev as I don't believe there's any further design work left to complete.
