Opened 5 years ago

Closed 4 years ago

Last modified 4 years ago

#9428 closed bug (fixed)

CSS Framework: Title color not reset in a focused accordion tab

Reported by: networksolution Owned by:
Priority: minor Milestone: 1.10.4
Component: ui.css-framework Version: 1.9.2
Keywords: Cc:
Blocked by: Blocking:

Description

The CSS generated by ThemeRoller doesn't explicitly set the style for .ui-state-focus links. This causes focussed accordion tabs to have wrong color title. After rolling over and out with the mouse one time, the problem solves.

I identified the problem in the code. Line 236 from the generated CSS, similar to this one:

.ui-state-hover a, .ui-state-hover a:hover, .ui-state-hover a:link, .ui-state-hover a:visited { color: #0945c4; text-decoration: none; }

should be duplicated changing "hover" in "focus":

.ui-state-focus a, .ui-state-focus a:hover, .ui-state-focus a:link, .ui-state-focus a:visited { color: #0945c4; text-decoration: none; }

This solves the problem.

Try the link below. If you move between accordion tabs with the TAB key on keyboard, you will see the problem. The problem is more evident if your accordion is collapsible: in this case, if you close the open tab by clicking on the title, when you roll out with the mouse the title still keeps the color of the active status (rolling over and out again will solve the display issue).

In my theme color this is evident because the text is white on a colored background in the normal state, and blue on a white background in the hover state (due to this bug, the focus state will be white text on a white background instead of a blue text on a white background as expected).

The fix above will solves the problem.

Best Regards. Dr. Marco Marsala Network Solution, Genova (Italy) http://www.thenetworksolution.it

-- Theme link: http://jqueryui.com/themeroller/?ffDefault=arial&fwDefault=normal&fsDefault=13px&cornerRadius=0px&bgColorHeader=%23ffffff&bgTextureHeader=gloss_wave&bgImgOpacityHeader=75&borderColorHeader=%23ffffff&fcHeader=%230945c4&iconColorHeader=%230945c4&bgColorContent=%23ffffff&bgTextureContent=inset_hard&bgImgOpacityContent=0&borderColorContent=%23ffffff&fcContent=%23333434&iconColorContent=%230945c4&bgColorDefault=%230945c4&bgTextureDefault=glass&bgImgOpacityDefault=0&borderColorDefault=%230945c4&fcDefault=%23ffffff&iconColorDefault=%23ffffff&bgColorHover=%23ffffff&bgTextureHover=glass&bgImgOpacityHover=75&borderColorHover=%230945c4&fcHover=%230945c4&iconColorHover=%230945c4&bgColorActive=%23388d0f&bgTextureActive=gloss_wave&bgImgOpacityActive=0&borderColorActive=%23388d0f&fcActive=%23ffffff&iconColorActive=%23ffffff&bgColorHighlight=%23388d0f&bgTextureHighlight=glass&bgImgOpacityHighlight=0&borderColorHighlight=%23388d0f&fcHighlight=%23ffffff&iconColorHighlight=%23ffffff&bgColorError=%23cd0a0a&bgTextureError=gloss_wave&bgImgOpacityError=0&borderColorError=%23cd0a0a&fcError=%23ffffff&iconColorError=%23ffffff&bgColorOverlay=%23000000&bgTextureOverlay=flat&bgImgOpacityOverlay=0&opacityOverlay=80&bgColorShadow=%23999999&bgTextureShadow=flat&bgImgOpacityShadow=0&opacityShadow=0&thicknessShadow=0px&offsetTopShadow=5px&offsetLeftShadow=5px&cornerRadiusShadow=5px

Change History (8)

comment:1 Changed 5 years ago by tj.vantoll

Isolated test case: http://jsfiddle.net/tj_vantoll/gh7DN/

This is only a problem it you use <h3><a>Header</a></h3> as the markup for accordion headers.

The rule you're referring to is at https://github.com/jquery/jquery-ui/blob/master/themes/base/jquery.ui.theme.css#L76. Adding .ui-state-focus a, .ui-state-focus a:hover is not enough because it doesn't win the specificity battle. You have to add something more specific like .ui-state-default.ui-state-focus a, .ui-state-default.ui-state-focus a:hover to win... which is messy.

comment:2 Changed 5 years ago by networksolution

The problem shows up even when not using markup <h3><a> but only <a>.

I've updated the jsFiddle with my markup:

http://jsfiddle.net/rWAHv/

The CSS is the ThemeRoller generated one but to which I've added just the CSS rule stated in the first post and reported below, that is enough to fix the issue:

.ui-state-focus a, .ui-state-focus a:hover, .ui-state-focus a:link, .ui-state-focus a:visited { color: #0945c4; text-decoration: none; }

I've made the accordion collapsible to easily show the problem. Just try to close the opened tab the go away with the mouse and you'll notice the white title text.

Compare with this jsFiddle, identical but without the CSS rule above (so the CSS is exactly the ThemeRoller generated one). Closing the accordion you'll notice the problem:

http://jsfiddle.net/gh7DN/5/

The CSS rule above fixes the problem. I think the bug is in the ThemeRoller that is not generating this CSS rule.

Last edited 5 years ago by networksolution (previous) (diff)

comment:3 Changed 5 years ago by tj.vantoll

In your test cases the <a> has a parent div. This is only a problem if the <a> is a child of the element that has .ui-state-focus.

The reason ThemeRoller does not generate the rule is because it's not part of the base theme file. I verified that your fix did solve this and it doesn't seem to have any adverse effects https://gist.github.com/tjvantoll/6008247.

Can anybody else think of any adverse effects of making this change? I can't think of any other widget where this would come up other than accordion.

comment:4 Changed 5 years ago by tj.vantoll

Component: ui.accordionui.css-framework
Status: newopen
Summary: ThemeRoller generated CSS doesn't reset title color in a focussed accordion tabCSS Framework: Title color not reset in a focused accordion tab

comment:5 Changed 4 years ago by TJ VanToll

Resolution: fixed
Status: openclosed

CSS Framework: Display child links within .ui-state-hover and .ui-state-focus widgets the same. Fixes #9428 - CSS Framework: Title color not reset in a focused accordion tab

Changeset: 5aa106a052e78559e50a4ca464863f5927c43bd5

comment:6 Changed 4 years ago by tj.vantoll

Milestone: none1.11.0

comment:7 Changed 4 years ago by TJ VanToll

CSS Framework: Display child links within .ui-state-hover and .ui-state-focus widgets the same. Fixes #9428 - CSS Framework: Title color not reset in a focused accordion tab (cherry picked from commit 5aa106a052e78559e50a4ca464863f5927c43bd5)

Changeset: 8f7e3428f01fe84d8d9040b54adf761ffdcd382e

comment:8 Changed 4 years ago by Scott González

Milestone: 1.11.01.10.4
Note: See TracTickets for help on using tickets.