Quick easy landmark fixes plus 1 that's not

[manfromjupyter]

So I overestimated. 24 lines + whatever for the final piece changed instead of just 8.

Landmark Fixes (16 lines)

-Add Landmarks to various parts on the page so user can jump around at will.

• The role of navigations should really be <nav> tags but role="navigation" will suffice for now. Lower risk of running into an issue with it with the build if just added an attribute instead of changing the tag. Same thing below for <header> and <footer>. If using role="banner" and role="contentinfo" is safer or easier approved, use them for now.
  
  s://user-images.githubusercontent.com/51969207/102534965-8912e400-4075-11eb-8d2e-e5caa21300e7.png)
  
  

• THEN, apply a similar role="region" and aria-label="{TAB NAME}" to the <div> on each of the other side bar pages when expanded (ex. "Extensions Manager section", "Running Terminal and Kernel section", "Open Tabs section", "Commands sections", and "Property Inspector section").

Housekeeping Items (8 lines)

• Remove tags from numerous areas that shouldn't have it. Instead replace with a head ing or a div.
  
  
  
  
• Remove tab-index="-1" on the header main nav section. Not breaking anything just doesn't do anything so doesn't need to be there and will make it harder to next steps after this.
  

The Main Nav Menu issue and possible fixes (not as easy)

• With the changes above we get the following as shown in the screenshots. What this means via text is that the reason arrow keys don't work for the header main nav section is because clicking/entering on the <li> tag is the only thing that opens the dropdown. In the example below I show you what the screenreader sees. Main nav when jumped to, then the list of elements, the <ul> (which could get rid of by moving navigation role or <nav> element 1 deeper and then another arrow key jumps past the <li> and to div underneath it.
  
  
  

Potential Solutions to main nav menu issue

• Change script to accept if the text within the <li> is selected (note wont have additional padding so might make it harder for others to click it and the focus styling might not highlight all it used to.
• Change the HTML to get rid of the div and just put the text in the <li> and use the icon (although invisible) to be used as a :before element if it's even needed anymore.
• etc

One thing to note, whatever you do decide, we still need to make it all tabable so tabindexes and/or <a> tags need to be added eventually so we will have to revisit this section anyway, don't need to go too crazy on it.

I know original issue was just to fix just this last issue but the JS on load jumps you past the header so need these landmarks (and need them for WCAG compliance eventually anyway).

[marthacryan]

Looks like that last item was actually fixed by the changes in the first part, so this issue is complete (there is still some tabindex stuff that needs to be addressed but that seems outside of the scope of this issue)