FYI -- Tab Index and Safari 4 (Mac)

Question

I finished building a website recently and had incorporated Tab Sets on a few different pages.  Additionally some Accordion Sets as well.  Didn't think anything of it and finished off the project - let the site go live and haven't thought much about it since - except to tweak a few things and make some minor edits at the request of the client.
One thing I had noticed repeatedly during the last half of the project as I was testing was all of a sudden this semi-translucent - grey - maybe 6px thick border would appear every time I clicked on a Tab or Accordion Tab (see screenshot below - No - the project was not for IHOP - just an example to show).  During this time the Safari 4 Beta had come out and I had grabbed a copy to play with.  Lots of interesting stuff in the Beta and several things I have noticed there and in the Final release.  For one thing Safari 4 Beta/ Final both handle Color Profiles different than Safari 3 or FF 2.x and 3.x.  I had this muted green background image (PNG file) that would show up fine in FF or Safari 3 but Safari 4 Beta/ Final both had it showing up as this bright Lime-green color.  Even IE 7 had it showing correctly - and Explorer doesn't typically play nice with PNGs - even version 7.
Anyway - back to the Tabs.  That prompted me to pay more attention to the differences in the versions.  At first - I thought it might simply be some testing mechanism in the Beta.  As it was also showing up in the WebKit Nightlies (look it up).  But when Safari 4 Final was released this same grey box surrounding the Tabs/ Accordion Panels was still there.  It was bothering me but I had more important things to tend to.
Tonight - I was testing something unorthodox with Tabbed Panels (no dirty thoughts) - just trying something out a client had mentioned they'd like done with their site.  Leave it to a random client to ask for the impossible and expect it to happen.  Yay!  Well as I was testing stuff out there this grey border/ box was again.  I went out to Adobe's Site - Apple's Site - Yahoo - and a couple of other big names that I knew had some form of Tabbed Paneling.  Their websites weren't doing it.  Well - I couldn't vouch for anyone other than Adobe using the SPRY Framework and wondered why Adobe had no problem getting rid of this grey border but I couldn't.
The main site code was a little chaotic  to start with - knew this from previous experience - so I jumped to the Labs and looked at the Tabbed Panels Samples:
http://labs.adobe.com/technologies/spry/samples/tabbedpanels/tabbed_panel_sample.htm
Very interesting results.  I found that some of the examples were showing the grey border while other were not - on the same sample page.  Much easier than the main site as the code on the Labs Sample pages is straight forward and there for everyone to use.
Turns out it's the tabindex="0" element that gets listed along with the TabbedPanelsTab Class in the Tabbed Panels or the main Accordion DIV.  I don't know whether there is a way to disable this or not - but it's what was default when I built my pages and inserted the SPRY Frameworks.  And with a simple "Search and Replace" - it goes away rather easily.  Once I figured that out - it was gone and that makes me like my client's new site just a little bit more.
Anyway - thought I'd share. I'm not following up on this or tracking it or whatever this forum has to do that sort of stuff with - like I said just an FYI (on the fly).  The TabIndex element is good for Compliancy and Accessibility stuff - so it's nothing to totally kick to the curb.  And I'll probably have to later go back and figure out a balance between the annoying grey border and compliancy demands at some point in the future - but I'll jump off that bridge when I get there.
Later!

Answer 1

The border that you are referring to is called the outline. It usually helps the users to identify where they have clicked.
You can simply delete the outline by adding the following to affecting css selector in your style sheet:
outline:none;