Consistent Sidebar DOM and Open/Closing Interactions about gutenberg

[alexstine]

@jeryj I edited the testing instructions to include a note about aria-expanded on the toggles. Failing to communicate this would confuse users into thinking nothing happened.

I think this is overall a very big lift and not one we should rush into. As imperfect as it is now, I feel like having skip links everywhere is going to make the UI that much harder to use however I do believe it is necessary to have triggering elements controlling the panels.

Thanks.

[afercia]

Re: The close button ordering issue, I think #61553 would be a more appropriate solution. I would kindly ask designers to not think visually first. Functionality, semantics, and accessibility should always come before any visual consideration. Thanks.

[afercia]

@joedolson mentioned having the #59013 (comment):

Totally agree, that is a general principle that applies not only to 'panels'. It applies to any UI section that is initially hidden and expands when activating a trigger. Popovers, for example, have the same problem. Dropdown menus as well. Basically, any expandable section of content that resembles a 'disclosure pattern' should follow the principle of making the trigger and panel adjacent in the DOM.

I'm pretty sure this point was reported several times in the history of this project but, alas, often dismissed for other reasons I'm not sure I can support. Developing an user interface should be based on user needs first. Other arguments should come after.

That said, we have another problem to consider.

The editor UI is split into some ARIA landmarks. It is worth reminding ARIA landmarks provide an important mechanism for assistive technology users to get a sense of the main sections of a page and more importantly provide a way to jump from section to section. For example, screen readers provide dedicated shortcuts to jump through landmarks and tools to list all the landmarks in a page. In Gutenberg, we mapped ARIA landmarks to the 'navigable regions' to provide a similar navigational tool to keyboard users who don't use screen readers.

Screenshot to roughly illustrate some of the editor ARIA landmarks:

Moving the panels close to their triggers in the DOM would make this landmark structure almost useless, if not confusing. Some of these landmarks would be basically empty and unused. This is not to say I'm opposed to this proposal but we should definitely take into consideration what to do with the landmarks.

[jeryj]

I edited the testing instructions to include a note about aria-expanded on the toggles. Failing to communicate this would confuse users into thinking nothing happened.

@alexstine Thank you for catching that! Sorry I accidentally omitted it.