Early Bird Registration for DrupalCon Portland 2024 is open! Register by 23:59 PST on 31 March 2024, to get $100 off your ticket.
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.
tia
Frank
NB
Seven might also need its own vertical-tabs-rtl.css.
Comments
Comment #1
mgiffordIt'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?
Comment #2
Frank Ralf CreditAttribution: Frank Ralf commentedThe 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.
EDIT:
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.
EDIT 2:
It should also be considered dropping the overly rigorous reset.css.
Frank
Comment #3
mgiffordHey 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.
Comment #4
Everett Zufelt CreditAttribution: Everett Zufelt commentedFrank 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?
Thanks
Comment #5
Frank Ralf CreditAttribution: Frank Ralf commented@Everett
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.
hth
Frank
Comment #6
Everett Zufelt CreditAttribution: Everett Zufelt commentedIf 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.
Comment #7
Everett Zufelt CreditAttribution: Everett Zufelt commentedFixing mistaken closing of issue, and marking as bug not task.
Comment #8
yoroy CreditAttribution: yoroy commentedfor reference: #323112: Vertical Tabs is the original vertical tabs implementation
related: #559266: “Seven” breaks keyboard navigation
Comment #9
Frank Ralf CreditAttribution: Frank Ralf commented@yoroy
Thanks for the references. I wasn't aware of that keyboard navigation related thread.
Comment #10
seutje CreditAttribution: seutje commentedreference: #723392: Tame seven's reset.css
Comment #11
Frank Ralf CreditAttribution: Frank Ralf commented@seutje
Thanks for looking into this!
Comment #12
Frank Ralf CreditAttribution: Frank Ralf commented#559266: “Seven” breaks keyboard navigation is marked as fixed but this issue seems to persist. Will have to look further into this.
Comment #13
mgiffordInteresting.. 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?
Comment #14
Frank Ralf CreditAttribution: Frank Ralf commentedI only had a cursory look, will look further into this.
EDIT
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 ;-)
Comment #15
Frank Ralf CreditAttribution: Frank Ralf commentedSetting this to "normal" as we go for a visually less impacting approach anyhow.
Comment #16
Frank Ralf CreditAttribution: Frank Ralf commentedAs #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!
Frank
Comment #17
yoroy CreditAttribution: yoroy commentedRTBC 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)
Comment #18
Frank Ralf CreditAttribution: Frank Ralf commentedYou're right. I'm tempted to setting this to "postponed" as a compromise, but better leave it as it is ;-)
Comment #19
mgiffordIt's fixed now in #467296: Accessibility improvements for vertical tabs so I'm closing this issue.
Comment #20
Frank Ralf CreditAttribution: Frank Ralf commentedThanks for house keeping, Mike ;-)