#9428 closed bug (fixed)

Opened July 15, 2013 02:13PM UTC

Closed August 07, 2013 09:40PM UTC

Last modified November 26, 2013 07:57PM UTC

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

Attachments (0)

Change History (8)

Changed July 16, 2013 02:59AM UTC by tj.vantoll comment:1

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.

Changed July 16, 2013 08:02AM UTC by networksolution comment:2

_comment0:	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/gh7DN/3/ \ \ 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/rWAHv/ \ \ \ The CSS rule above fixes the problem. I think the bug is in the ThemeRoller that is not generating this CSS rule. \ \ → 1373961921123832
_comment1:	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/3/ \ \ \ The CSS rule above fixes the problem. I think the bug is in the ThemeRoller that is not generating this CSS rule. \ \ → 1373961986571278

_comment0:

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/gh7DN/3/ \ \ 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/rWAHv/ \ \ \ The CSS rule above fixes the problem. I think the bug is in the ThemeRoller that is not generating this CSS rule. \ \ → 1373961921123832

_comment1:

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/3/ \ \ \ The CSS rule above fixes the problem. I think the bug is in the ThemeRoller that is not generating this CSS rule. \ \ → 1373961986571278

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.

Changed July 16, 2013 12:45PM UTC by tj.vantoll comment:3

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.

Changed July 19, 2013 01:21AM UTC by tj.vantoll comment:4

component:	ui.accordion → ui.css-framework
status:	new → open
summary:	ThemeRoller generated CSS doesn't reset title color in a focussed accordion tab → CSS Framework: Title color not reset in a focused accordion tab

Changed August 07, 2013 09:40PM UTC by TJ VanToll comment:5

resolution:	→ fixed
status:	open → closed

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

Changed August 07, 2013 09:41PM UTC by tj.vantoll comment:6

milestone:	none → 1.11.0

Changed November 26, 2013 07:51PM UTC by TJ VanToll comment:7