strange selection in the new page controller select parent form field.

[sunnysideup]

When I open the new page controller, I get a strange "focus" square around the form field:

This is when I just open the page... admin/product/add/?ParentID=11 I have not clicked anything.

The whole "focus" thing should be removed. It looks ugly and it confuses. Here is how I would fix it (but I am sure the person who write the CMS CSS has a much better idea).

input[type='radio']:focus{
    outline: 0;
}

[micmania1]

@sunnysideup This kind of thing is important for accessibility.

[sunnysideup]

@micmania1 - Hi Michael, I had not considered that part 🎱 .... do you think it would be possible to make it a bit nicer on the eye?

[dhensby]

This kind of thing is important for accessibility.

this

do you think it would be possible to make it a bit nicer on the eye?

tricky, it needs to be quite thick and clear to a visually impaired user. You can include your own CSS in your deployments to make it neater or, if you have already got a "nicer" solution, we'd consider PRs

[sunnysideup]

it would make a lot more sense if the outline was around the same item as the item selected ... maybe that the way forward? The graphic above clearly shows mixed messages to the user - don't you think?

[dhensby]

To be honest its standard browser behaviour and it's highlighting the interactive element that has focus. If you know of a way to adjust this behaviour in browsers to surround its label too, then I suppose that would be helpful.

[sunnysideup]

If this is for a visually impaired person then I don't really understand why we need the visible outline at all. I mean, I understand that the visually impaired person needs to have a way to select items, but if we make this a very thick line then why not make the text more legible etc... I will have a look to see if I can come up with a simple solution. However, all in all, I do feel this important control can be improved.

[dhensby]

There are a plethora of articles about why elements should have outlines on focus and sites dedicated to why you shouldn't remove them (http://outlinenone.com). Its not just visually impaired users, its keyboard or non mouse users too

Its an accessibility feature. If it can be made more balanced, then I agree that is an improvement.

[sunnysideup]

yeah sure, I think the main issue here is that the second element is already selected but at the same time the first item is saying: start with me...

of course, in general the outline thing makes sense, I dont mind it being so obvious, but it is the outlined item vs selected item that is confusing to our main user: the CMS editor with the almighty mouse...

[jonom]

I was just playing with some form fields today and remembered this issue. Agree that highlighting focus is very important, but we could probably get rid of a lot of glowing blue rectangles in the CMS by removing the outline for active (rather than focused) elements.

.whatever:active {
    outline: none;
}

I don't think this has accessibility problems as keyboard navigation would still provide an outline, but it can prevent those fuzzy blue outlines that appear on tabs / links / buttons etc. when you click them and persist until you click something else.

[sminnee]

This is fixed in v4, so closing.