Accessibility on menu and page structure

[zamentur]

The problem

When a blind persons arrive on a web page in general the person uses TAB to list every link of the main menu.

However, with this quark theme, submenus are not displayed when the button in charge to collapse or uncollapse get the focus. If the person use the ENTER key, it open the first page of the submenu instead of displaying the sublist of link.

The solution

Here i try to make this things working better by those ways:

• Use the focus to determine if the submenu should be open.
• Reuse https://github.com/getgrav/grav-theme-quark/pull/23 to manage a bit better the tree menu for mobile
• Limit the number of nav to ease the return into the main nav menu
• Replace section by div (see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section for more info)

  If you are only using the element as a styling wrapper, use a

  . An unwritten rule is that a

  should logically appear in the outline of a document.

Status of this PR

The CSS need to be recompiled, i have not tested the fix directly (but on a derived theme) I am waiting some return from a bling friend to completely validate this solution.