664475 - Content hidden within tab panels can be navigated via keyboard

Status: VERIFIED FIXED

(developer.mozilla.org Graveyard :: Wiki pages, defect)

Description

[John Karahalis [:openjck]]

A user emailed Janet with an issue he was having and a fix. His note is copied below.

----------

The only rough edge we encountered yesterday was that content within hidden tab panels are still keyboard focusable, even when they're not visible onscreen. So, for example, if you select the "Docs" tab on developer.mozilla.org and then use the tab key to cycle through the links below, you'll find that it's actually focusing stuff inside the hidden "News&   Updates" panel.

I had a quick look at the CSS, and it looks like the problem is due to the fact that non-active panels are hidden by absolutely positioning them -999px off screen. This can be a very effective trick if you want to hide content for most people, but still have it available to the user of a screen reader. In this case, we probably want the opposite.

It should just be a quick fix to this part of MDN's CSS:

 .tabbed-on .hidden, .folder {
      display:none;
      visibility: hidden;
 }

The visibility:hidden isn't strictly needed, but does help with a few legacy screen readers (old versions of Window Eyes).

Comment 1

[Jay Patel [:jay]]

This issue will go away with our new MDN home page.  

If Craig or Les has time to make this quick fix now though (and we don't think we'll have the new MDN home page ready), we can get it in tomorrow for 0.9.6.

Comment 2

[Les Orchard [:lorchard]]

(In reply to comment #1)
> This issue will go away with our new MDN home page.  
> 
> If Craig or Les has time to make this quick fix now though (and we don't
> think we'll have the new MDN home page ready), we can get it in tomorrow for
> 0.9.6.

If this is the new home page, then it's already going into 0.9.6:

https://developer-stage9.mozilla.org/en-US/

(Unless there's another new-new one I haven't heard about)

Comment 3

[Jay Patel [:jay]]

lorchard: that's it!  thanks for getting that up. 

marking this bug fixed since the content in question has changed and the tabs won't exist starting tomorrow.

Comment 4

[raymond [:retornam] (inactive)]

qa-verified-trunk https://developer-stage9.mozilla.org/en-US/

Comment 5

[raymond [:retornam] (inactive)]

verified fixed https://developer.mozilla.org/en-US/