Place region of elements in a logical reading order

[manfromjupyter]

WCAG 1.3.2 (A), 2.4.3 (A)

Reading capability and order

Expectation: The reading order of assistive technology is complete, logical, and intuitive

• When testing to see if the site is still usable or logical when loading without a stylesheet which is how you test this and also how a super small % of users may choose to view the site when fonts, contrast, and background images are too prolific and busy…
• All of the dropdown’s links are showing up in the tab order and shouldn’t until you expand it.
• Text is overlapping indicating usually hardcoded styling regarding positioning.
• Every icon, every, is missing screenreader-only text.

To Fix

Only things that really need to be changed by the looks of it are the header. The entire header section is placed below in the DOM than all of the panels and notebook so no wonder the user can never tab to it (because they get to the endless tabbing notebook cell and don't ever go past it). In addition when dropdowns open they are at the very bottom of the page, not the very next tab or element for the user so need to change where those open. There may be other things to fix to completely satisfy this requirement but as far as I can tell these are the only changes necessary.

[t03857785]

I cannot recreate this issue, it looks like it has been resolved @manfromjupyter @isabela-pf can you confirm