Guides Multipane design: Review tabbing - Githubissues

OpenLiberty / openliberty.io

Open Liberty website

https://openliberty.io

Other

54 stars 40 forks source link

Guides Multipane design: Review tabbing #505

Open dmorgant opened 6 years ago

dmorgant commented 6 years ago

In working with the TOC, should a selected item put focus on the text following the header of a section? If so, I think the div following the header will need to specify a tabindex.

Also, review tabbing navigation throughout the guide. I believe you go from the tags to the end of guide content right now.

kinueng commented 6 years ago

Related to OpenLiberty/iguides-common#186

steven1046 commented 5 years ago

The changes @erica-banda-03 is making to the interactive guides should fix some of the missing tabbing in the static guides.

kinueng commented 5 years ago

This issue will apply for both static and interactive guides

steven1046 commented 5 years ago

Accidentally closed during backlog grooming.

dmorgant commented 5 years ago

In working with the TOC, should a selected item put focus on the text following the header of a section? ---> In testing right now we put focus on the header for the section. The user can then use the down arrow to go into the text of the section. This "reads" correctly in JAWS.

steven1046 commented 5 years ago

@dmorgant does it read out the header when it focuses it? I was under the impression that we should focus the first thing on the section and to not skip any headings.

dmorgant commented 5 years ago

Yes, it reads the header. I think the way we have it right now is good.

steven1046 commented 5 years ago

Things not fixed by https://github.com/OpenLiberty/openliberty.io/pull/754:

[ ] In interactive guides, tabbing backwards from a section header (<h2> element), the page is scrolled back to show the header of the previous element, but the activeElement is the <body> element, not the last widget in the #code_column as expected. If you then tab forward, you end up within the 'Nice work! You did it!' section at the bottom of the guide.
[ ] The #code_column needs some sort of label added to it if we are going to stop there. Just remember that it needs to make sense in single-column mode too or not be read there.
[ ] In static guides, when you tab to #code_column, the whole column is read as one HUGE sentence. For example, "System application dot java copy file contents package io dot open liberty dot guides dot rest semi-colon import javax dot ws dot ..........." It is not clear that we are reading through the contents of a file.
[ ] In interactive guides, when you tab to #code_column, it summarizes the contents as one HUGE sentence. For example on a 2-widget step it says "Sample browser window tabbed container for file editor". On a 3-widget step it says "Sample browser window check balance microservice with circuit breaker check balance microservice tabbed container for file editor".
[ ] In static guides, as you tab from the #code_column's copy file contents button, you hear 'Raise an issue link' and then it reads the next header. Not sure why that happens, but it is confusing.
[ ] Make sure that when tabbing forward AND backward through the instructions in the interactive guides that you can not access the action buttons in the instructions and that you can not select them so the action is not performed!

steven1046 commented 5 years ago

Single column view only -- fixed by PR #794

[x] When tabbing forward and you press enter on the TOC, it should open it up and put focus in the TOC. --- Erica
[x] When tabbing through the TOC forwards, and you reach the end, send focus back to the TOC hamburger so they can close it. --- Erica: I don't put focus on the hamburger icon, but the TOC closes automatically when they tab away from the last element
[x] Hitting the ESC key while in the TOC will hide the TOC --- Erica