Improve the available landmarks and headings of the Canvas UI

Overview

At this point a page in Drupal Canvas only contains landmarks that belong to the default theme (see landmarks.mp4 - using Drupal CMS 2.x and the Byte theme), the sole exception is the Notifications alt+T landmark even though the associated section is empty when you navigate to it. The landmark label instruction to use the alt t hotkey has also no direct apparent effect. The alt t landmark probably only has a function in case there is an actual notification. Overall the only available landmark related to the UI of Drupal Canvas is simply confusing.
On the other hand, for people orienting on a Drupal Canvas page, in particular visiting a Canvas page for the first time, the most likely way to get an overview is either via the list of available headings or the list of available landmarks. In regard to headings (see headings.mp4) you only have a single h4 in the left sidebar related to the UI of Drupal Canvas. the right sidebar, the topbar, and the canvas have no headings at all. While for landmarks (see landmarks.mp4) you only have the aforementioned Notifications alt t landmark, while the left and right sidebar, the topbar and the canvas itself don’t have any landmarks at all. Someone without any visual context is rather lost and has to step through the entire page with the voiceover cursor to get an initial idea about the structure and function of Drupal Canvas.
The last problem, which is out of the scope for this issue, will become relevant as soon as more headings and landmarks are being added with this issue to Drupal Canvas. You then have no way to distinguish which heading and which landmarks belong to the Canvas UI and which are part of the page that is built within the canvas. But that is something that would have to be tested with actual screenreader users and probably solved in a follow up issue.

Discussed and worked on the issue with @itmaybejj, @katannshaw, @mgifford, and @the_g_bomb

Proposed resolution

• Add a landmark for the left sidebar, one landmark for the right sidebar, one for the topbar, and one for the main area wrapping the canvas and the controls like the device switcher or the zoom level.
• Change the existing heading in the left sidebar to h2 so it sis labeled as a top level cornerstone relevant to the experience.
• Add visually hidden h2 to the right sidebar, the top bar, and the canvas.

That way a screenreader user would be able to orient way easier on the first visite and navigate way more quickly at a later point.

User interface changes