ARIA roles and states for tabbed navigation.

zooniverse / zooniverse-readymade

Apache License 2.0

1 stars 3 forks source link

ARIA roles and states for tabbed navigation. #16

Closed eatyourgreens closed 10 years ago

eatyourgreens commented 10 years ago

1) role = tab on nav links 2) aria-selected on tab links and panels to indicate active tab 3) aria-labelledby to link panels to controlling tab links

brian-c commented 10 years ago

Totally for making this work, but can we do it without changing from path-style hashes?

Also, would this be better patched directly into brian-c/stack-of-pages?

eatyourgreens commented 10 years ago

Slashes seem to work for second-level pages. I've just tried it using the LHC science page. I don't know if div[id=/classify] is a valid id in HTML, though. I seem to remember that ids have to begin with letters, but I'm not sure if browsers enforce that.

If we can have ids like '/classify' and '/profile' on the top-level page fragments, then we should be able to use fragment identifiers like '#/classify' in links.

I've tried kelp and penguins without leading slashes on the fragment ids. Seems to work, and should fix the top level nav in screenreaders. At the moment, those links resolve back to the top of index.html.

eatyourgreens commented 10 years ago

Looks like Chrome and Firefox have no problem with leading slashes in element ids if you use document.getElementById. document.querySelector fails, though, with an invalid selector error for selectors like '#/classify'.

This commit seems to work with the LHC science pages too. http://localhost:3050/index.html#/science/lhc loads fine on Firefox and Chrome.

brian-c commented 10 years ago

Can we not merge this yet? I'm not happy with this solution, and I've got two projects to push out ASAP and I can't handle major changes to this framework right now. Sorry; thanks.