While working on #467296: Accessibility improvements for vertical tabs I noticed that the Seven theme overrides the vertical-tabs.css in misc/ with its own version. I posted a quick hack at http://drupal.org/node/467296#comment-2175016 which mainly consists of renaming Seven's CSS file so both files can live in peaceful coexistence.

Someone with more Seven experience might want to look into this.


Seven might also need its own vertical-tabs-rtl.css.


Issue tags:+internationalization

It's seems that there is little correlation between misc/vertical-tabs.css & themes/seven/vertical-tabs.css at the moment.

I could like to see a themes/seven/vertical-tabs-rtl.css at the very least.

I'm also hoping that there is a plan so that if additional functionality is added in misc/vertical-tabs.css that it can be brought forward into the Seven theme.

How do we bring the accessibility enhancements along into Seven?

The Seven theme still ships with a vertical-tabs.css file but this isn't included anymore via the seven.info file so the CSS file should be dropped from the theme.

There still seems to be some overriding going on with regard to the vertical-tabs-css in /misc, though. Will have a look.

Seven's vertical-tabs.css seems to be still needed for the correct rendering of vertical tabs with the theme, even without being included in the theme!

I deem this really bad behavior because it affects the vertical tabs in a totally different part of Drupal.

It should also be considered dropping the overly rigorous reset.css.


Hey Frank,

Seems that vertical-tabs.css & ie6.css aren't mentioned in seven.info and are being directly loaded by the template.php file. Are both called in the .info file reset.css & style.css - wonder if it would be worth putting something into comments here to clearly indicate how these other css files are called.

Seven's reset is based on Eric Meyer's "meyerweb reset" & at the bottom some code from Position is Everything How To Clear Floats Without Structural Markup

Zen seems to be using a "reset" style sheet based on A List Apart's How to Size Text in CSS.

I'm not a CSS guy, so I'm not going to comment on how restrictive it should be or why the implications are. I can easily compare using Meld Meyer's reset vs what's in Seven. They are pretty close. Biggest variations are the Font reset & Markup free clearing sections which have been added to Seven.

* Font reset =========================================================
* Specifically targets form elements which browsers often times give
* special treatment.

* Markup free clearing ===============================================
* Consider adding your own selectors to this instead of finding ways
* to sneak the clearfix class into Drupal's markup.
* From http://www.positioniseverything.net/easyclearing.html

There doesn't seem to be a standard use of a reset.css file & it isn't in Garland so I'm curious if these CSS issues have been dealt with in different ways in Garland.

Issue tags:+accessibility

Frank or Mike,

Can you please provide a more detailed description of how Seven's vertical-tabs.css is interfering? What is it causing to happen, or not to happen, and how is it affecting accessibility?



The patch from #467296: Accessibility improvements for vertical tabs uses system colors and CSS outline for visual highlighting of the focused tab. Both settings are theme independent and don't change the layout of the page (as using CSS borders would do for example). Unfortunately both properties are overridden by the Seven theme's own vertical-tabs.css. A simple remedy is changing the name of Seven's CSS file for vertical tabs as mentioned above.


Priority:Normal» Critical
Status:Active» Closed (fixed)

If I understand correctly Seven's vertical-tabs.css prevents us from being able to show the focused tab button. Marking as Critical, keyboard only users can't use Seven with vertical tabs if they need to guess at focused tab.

Category:task» bug
Status:Closed (fixed)» Active

Fixing mistaken closing of issue, and marking as bug not task.

for reference: #323112: Vertical Tabs is the original vertical tabs implementation

related: #559266: “Seven” breaks keyboard navigation


Thanks for the references. I wasn't aware of that keyboard navigation related thread.


Thanks for looking into this!

#559266: “Seven” breaks keyboard navigation is marked as fixed but this issue seems to persist. Will have to look further into this.

Interesting.. What browser are you testing it in? I didn't find a problem with it in Firefox on the mac.

Maybe we're testing for keyboard-friendliness in different ways?

I only had a cursory look, will look further into this.

As stated in #467296: Accessibility improvements for vertical tabs the patch for improving the accessibility of vertical tabs comprises two modifications:

a) Keyboard behavior
b) Visual indicators for keyboard users

The behavior isn't affected by the Seven theme but Seven's own vertical-tabs.css still overrides the one in \misc. Some might regard this as a feature not a bug, though ;-)

Priority:Critical» Normal

Setting this to "normal" as we go for a visually less impacting approach anyhow.

Status:Active» Fixed

As #467296: Accessibility improvements for vertical tabs is RTBC now I'm setting this to "fixed".

Any changes to the visual style of accessibility improvements should probably made along the lines outlined at AcZenSible - Zen sub-theme for setting accessibility options.

Thanks to all for their efforts!


Status:Fixed» Active

RTBC does not equal fixed :) Better wait until #467296: Accessibility improvements for vertical tabs really is committed.
(In practice, RTBC status often calls out the real reviews)

You're right. I'm tempted to setting this to "postponed" as a compromise, but better leave it as it is ;-)

Status:Active» Closed (fixed)

It's fixed now in #467296: Accessibility improvements for vertical tabs so I'm closing this issue.

Thanks for house keeping, Mike ;-)