In Dark mode the svg icon should display thicker - increase the stroke-width in the svg-. The border of the .lux-disclosure button .lux-icon should display with the same color as the stroke of the svg icon.
In Light mode: The border of .lux-disclosure button .lux-icon should display thicker. The svg lux icon should have a thicker stroke-width.
In both modes the stroke-width and the border-width should have the same value after all the adjustments.
Acceptance criteria
[x] In Dark mode the svg icon should have a thicker stroke-width.
[x] In Dark mode the border of the .lux-disclosure button .lux-icon should display thicker and with the same color as the svg icon.
[x] In Light mode the border of .lux-disclosure button .lux-icon should display thicker and with the same color as the svg icon.
[x] In Light mode the svg lux icon should have a thicker stroke-width.
[x] In both modes the stroke-width and the border-width should have the same value after all the adjustments.
[ ] I can successfully use this feature with Voice Over in Safari.
[ ] I have checked this feature using one of the following browser extensions and confirmed that it does not add any level A or level AA issues:
Current display
Dark mode - see screenshot below:
Light mode - see screenshot below:
Desired display
.lux-disclosure button .lux-icon
should display with the same color as the stroke of the svg icon..lux-disclosure button .lux-icon
should display thicker. The svg lux icon should have a thicker stroke-width.Acceptance criteria
.lux-disclosure button .lux-icon
should display thicker and with the same color as the svg icon..lux-disclosure button .lux-icon
should display thicker and with the same color as the svg icon.Notes