Skip to content
This repository

Disabled browser default outline for listview buttons on focus #4303

wants to merge 1 commit into from

3 participants

Jasper de Groot Todd Parker Scott Jehl
Jasper de Groot
uGoMobi commented May 06, 2012

Issue: Listview and custom selectmenu items still have the default browser outline on focus (together with box-shadow of ui-focus class) while outline is set to 0 for all other buttons. See #2214

Fix: Added .ui-link-inherit:focus selector to the .ui-btn:focus { outline: 0; } rule.

Todd Parker

Good catch.

Scott Jehl scottjehl closed this May 15, 2012
Scott Jehl

Hmm, yes good catch but I don't think that's the only place ui-link-inherit is used. It's used for child links within other generic themed containers as well (ui-bar-a, etc). I'd suggest moving this rule to the listview and selectmenu plugins' CSS files and scoping to those plugins specifically so it doesn't affect accessibility for other links in the page. Make sense? If not, I can reopen the pull.

Jasper de Groot
uGoMobi commented May 15, 2012

@scottjehl hi Scott,

Thanks for reviewing this PR!

I just checked the JS again and it seems to me that the framework only add the ui-link-inherit class in the listview widget. Also, it always concerns a link wrapped in .ui-btn (which gets the ui-focus box-shadow styling on focus).
Can you give me an example when a child link in a bar has ui-link-inherit?

If we move it to the specific CSS files, we should move the rule for .ui-btn:focus to the button.css as well. Removing it from the theme to structure CSS makes it harder for people to adjust the focus style to their own preferences.

What do you think about making the selector more specific? .ui-focus .ui-link-inherit:focus

Jasper de Groot
uGoMobi commented May 17, 2012

@scottjehl - If you agree it's safe to use .ui-focus .ui-link-inherit:focus I will create a new PR for that. Seems easier that reopening this one.

Jasper de Groot

@scottjehl @toddparker - Do you agree with this change: .ui-btn:focus, .ui-focus .ui-link-inherit:focus { outline: 0; } ?

Todd Parker

@uGoMobi - I'd like to see a demo page to give this idea some testing.

Todd Parker

I just tested this in a few desktop browsers, iOS and Android and it looks great so this is ready to land. Excellent work, as always.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Showing 1 unique commit by 1 author.

May 07, 2012
Jasper de Groot Disabled browser default outline for listview buttons on focus 0436be5
This page is out of date. Refresh to see the latest.
2  css/themes/default/
@@ -1132,7 +1132,7 @@ a.ui-link-inherit {
1132 1132
 /* Focus state - set here for specificity (note: these classes are added by JavaScript)
1133 1133
1134 1134
-.ui-btn:focus {
+.ui-btn:focus, .ui-link-inherit:focus {
1136 1136
 	outline: 0;
1137 1137
1138 1138

Tip: You can add notes to lines in a file. Hover to the left of a line to make a note

Something went wrong with that request. Please try again.