[BUG]: UX Problem.

[joyalgeorgekj]

Issue Found

• I was trying Docker for the first time and found this todo sample, When I tried it there was a styling inconsistency in the checkbox. I don't know why there is a focus style in the app but it was messing with the checkbox.

button:focus {
    border: 1px solid #333;
}

This is code seems like unnecessary because the style won't make any difference in the list item buttons but was messing with the button - checkbox.

---

Image

The black border around the checkbox is what I am talking about.

---

Note

Checks done Using Linux KDE and Chromium. I understand this is for testing and learning docker but still the first thing when people start noticing will be the inconsistency in the docker starter templates, which is a popular software.

• Checked for similar issues and Didn't find any.
• Checked and confirmed that this issue exists.

[joyalgeorgekj]

I am working on it and assign this to me.

[mikesir87]

The reason this is there is because the checkbox isn't actually a checkbox, but a button with an checkbox icon (using FontAwesome icons). The styling is there to ensure there is a visual indicator when using keyboard inputs or other accessibility features. The styling itself shouldn't affect the ability to use the checkbox.

Can you share any more details on the issue you were running into and how the styling was affecting it?

[joyalgeorgekj]

The reason this is there is because the checkbox isn't actually a checkbox, but a button with an checkbox icon (using FontAwesome icons). The styling is there to ensure there is a visual indicator when using keyboard inputs or other accessibility features. The styling itself shouldn't affect the ability to use the checkbox.

Can you share any more details on the issue you were running into and how the styling was affecting it?

Like I mentioned its not something that prevent users from doing its thing but a styling inconsistency and its not a better UI, My point was this is the second task of learning docker and docker is a big platform so people who are trying to learn it expect perfection from a big thing like docker so thats why this PR is here. Thanks for letting me clarify and for your side of explanation because when I reviewed the code I also realised that the checkbox wasn't a real checkbox it was button of type button.