a11y tabs (css) issue

Update: this was originally posted in 2016. A quick test in 2019 with MacOS 10.14.5 and Safari 12.1.1 does not reveal this issue. I also quickly tested in iOS with Safari, which works but announces "reader available" every time a new tab is activated.

This has been driving me crazy. I've been trying to implement aria for tabs that use url fragments (hashes) to keep track of the currently selected tabs (which also allows for linking directly to a specific tab). However, when testing is Safari with Voice Over (VO), I noticed that when a tab is selected, the focus will be directed to an adjacent tab rather than remaining on the currently selected tab, thus potentially causing confusion. This ONLY happens in Safari when VO is turned ON. Testing was done with default VO settings. After much time I have determined the exact issue, but I still don't understand it. It is my belief that it is a VO bug. Details are outlined below. Now that I know what the issue is, I can make a work-around. However, I still don't understand why it is an issue in the first place.

• If you remove hash change functionality, everything works as expected. However, I tested with a different tabs implementation that had similar functionality (including hash change logic), and it worked as expected. The only difference was how JS and CSS were implemented.
• After much debugging, it appears that removing the css rule #tabs li.selected a { padding-bottom: 17px } fixes the issue. Please inspect element to see details.
• I made a video demonstrating the issue.
• In the video, you can see that after activing a tab, the main element receives VO focus (black outline) and then an adjacent tab recieves both VO and normal focus (black outline).
• When you check 'Fix CSS', the padding-bottom style will be changed to match the other tabs.
• This is NOT an issue that I can replicate in other browsers. I have not tried other screen readers.
• This appears to be an issue in OS X ~10.11.5 and Safari 9.1.1. Earlier versions appear to work fine. Safari Tech Preview 9.1.1 (11601.6.17, 11602.1.33). WK Nightly r201711 appears to still have the bug.
• I created a WebKit bug just in case

The code for this can be found on my github repo. If you are able to tell me why this is happening, please open an issue. I'd like to understand why CSS is affecting the a11y tree and interaction.

My preferred contact information

• Home
• Work
• Other
• Fourth