Is this a Chrome problem or a problem with my Flare project?

[ChoccieMuffin]

Hi all

I have an ugliness problem (yeah, I know, I should just put a paper bag over my head...) with my side nav menu in Chrome.

If I click on the words of a menu item, the drop-down opens as expected. However, if I click on the drop-down arrow, that button is surrounded by an ugly black line.

black-outline.png

Incidentally, I seem to get a black outline in other places in Chrome when an area has focus, for example when I click in the Search box in these forums the outline thickens, it's just much more obvious in my output because there isn't any kind of line there at all.

Any suggestions?

[Psider]

I think it's the browser. Possibly for accessibility/mobile use reasons?

Focus-in-chrome.png

https://developer.mozilla.org/en-US/docs/Web/CSS/:focus

[NorthEast]

Psider is correct, it's the browser's default style to show the focus.

In older versions of Flare (up to 2019 R1 I think), MadCap's CSS used to hide this focus by default.
But they got rid of that in newer versions of Flare because it's a pretty bad idea to hide the focus for accessibility reasons. So you may have just started seeing it if you have upgraded.

So I'd suggest not to worry, and learn to love the focus. Maybe change the colour or something by using the :focus style.

[ChoccieMuffin]

Thanks, chaps, very helpful and informative, as ever. I have no idea how to actually USE :focus in the skin. Any tips would be much appreciated. Thanks again.

[Psider]

The simplest thing would be to copy the google code and just change 'auto' to whatever colour you like. Everywhere you now see a black border you'll see a border in your selected colour. (Or you should. I don't have Flare to play with at the moment.)
:focus { outline: -webkit-focus-ring blue 1px; }

Or you can get more fancy and play with how the line displays. Here's the MDN page for 'outline': https://developer.mozilla.org/en-US/doc ... SS/outline
:focus { outline: double blue 1px; }

Then you could get even more fancy and customise the border depending on what element has focus.
/* input fields will have a pink 3d effect */
input:focus { outline: groove pink 1px; }
/* hyperlinks will have a green dashed border */
a:focus { outline: dashed green 2px; }

The MDN page I linked for :focus also links to a few accessibility related articles that might be useful as well.

[ChoccieMuffin]

I've done "Inspect" on the output, but I can't work out what I need to add :focus to. I've opened the skin as a text file and there doesn't appear to be any obvious element I should add that styling to...

I've found this, which I reckon is more or less where I need to be, but what do I add to my CSS?

Inspect.png

[Psider]

Yeah, if you only want to change that location, then it would be:

span.submenu-toggle-container:focus {

}

I hadn't seen the Accessibility tooltip before. I think it's new. It makes it much easier to determine where the :focus pseudo-class needs to go.

[NorthEast]

I've done "Inspect" on the output, but I can't work out what I need to add :focus to.

You don't need to add it to anything, just use it by itself:

Code: Select all

:focus
{

}

[ChoccieMuffin]

Thanks Dave Lee and psider.

I've had a play in my CSS and looked at the links from psider, and I think I've got the hang of things now. Gold stars to both of you!