Increase radio dimensions to match checkboxes #27377
Conversation
jameskoster
added
the
General Interface
jameskoster
requested review from
ajitbohra and
chrisvanpatten
as code owners
|
I also updated how the central dot on the active state is styled, so that it no longer needs dedicated rules (inside a media query) to adapt to other dimensions. |
|
Size Change: +24.3 kB (2%) Total Size: 1.21 MB
ℹ️ View Unchanged
|
|
This is awesome and I'm excited to approve this — the code looks good too. However for whatever reason I can't get the branch to compile — how are you testing this? I'm not seeing the proper size here:
|
|
Ah, I temporarily swapped the checkbox in the screenshot above to a radio to test as I couldn't remember where we actually used radios hah. It looks like the updated size is not being applied in the visibility options because they are not actually consuming the radio control component. They are however using the radio-control mixin for style. I'll see if I can update that so that all radios are styled correctly, regardless of whether they're utilised in the component or not. |
|
Done. I took the liberty of fixing the password input while I was in there too. Before:
After:
|
|
Very nice, this is working well for me. I'm excited to land this:
However I wonder whether the |
jameskoster
added
the
[Focus] Accessibility (a11y)
Just to make sure before I begin this expedition, which border are you referring to? |
|
Yes, sorry — the white dot isn't actualy just a div with a border radius and background color. It has a white border as well. The point is, this white border becomes a black border in windows 10 high contrast mode, whereas background colors need to be removed. My plate is full today, but if it's a nightmare hellride for you to test in Windows 10, I'll set aside some time next week to test and push some fixes to your branch. |
|
The best I am able to wrangle is Edge with a high contrast extension installed. I'm not sure if that achieves the same result as the native High Contrast Mode though. Either way, here's what I see on Master:
And here's what I see on this branch:
|
|
Finally had a chance to look at this one, and indeed the problem was as I suspected. The border I referred to is being made opaque, whereas the background is removed. Causing this:
I tried making that border 4px, which lands us this:
With a full 5px border the dot becomes solid, but then it's also bigger than its dimensions and gets shifted around. Can we make the dot be exactly 8x8px? If yes, then the 4px border inside should work. Otherwise, I think just making it 4px is acceptable. Let me know what you think. |
|
The dot can indeed be 8x8 :) That latest commit should do the trick. |
The dimensions of radio inputs is currently 16px while checkboxes are 20px. This PR updates radios to match checkboxes.
Before:
After: