Improve accessibility hierarchy of document title area

[noahtallen]

To improve the hierarchy of the document area, we can use flex-basis to set the document area as the first semantic element. This could be a logical improvement to help re-enforce it as the top level of the hierarchy.

I think this is an example were flex-order can be employed to good effect, since it'd align the semantic hierarchy with the perceived visual hierarchy, so we can have the title control first in the DOM and centered visually
@matias in #20877 (comment)

[Addison-Stavlo]

Hopefully - #25874 - is what we are talking about? Make it the first element and use order flex property to keep the same visual layout.

[noahtallen]

That was the idea yes -- I want to also note that there have been a few comments that this is an antipattern and there could be better ways to solve the problem.

[Addison-Stavlo]

I want to also note that there have been a few comments that this is an antipattern

Ah I see that now.

and there could be better ways to solve the problem.

I see suggestions to use headings to help screen reader navigation, but does that solve the problems for why we wanted this to appear first in the hierarchy (@mtias)?

The only other solution I see suggested is to move the toolbar group on the left out of the main header altogether so this document-actions can be left-aligned and the first visually as well. Until that is agreed upon and done, Im not sure there is another way to achieve this?