[Designer] Fix treeview control accessibility

[paulcam206]

Description

This was a bit of a ride. Prior to this change, the Designer's treeview control is represented in the DOM by a structure something like this:

<ul role="tree">
  <li role="treeitem">
    <div role="treeitem">some stuff</div>
  </li>
  <li role="treeitem">
    <div role="treeitem">
      <div class="expandcollapsebutton">...</div>
      <div>some more stuff</div>
    </div>
    <ul role="group">
      <li role="treeitem"><div role="treeitem">oh look! a child item!</li>
    </ul>
  </li>
</ul>

Unfortunately, it's not valid to have role="treeitem" on an element unless its parent's role is either group or tree. It turns out that, while eliding the role on the li > div causes a11y tooling to stop complaining, it also totally breaks keyboard navigation -- the user can't actually select an element in the tree because they can't put keyboard focus on the right element.

So I did what anyone would do and basically rewrote keyboard navigation for the treeview control.

The old model was tab-based. Each node in the tree and each expand/collapse chevron had tabIndex="0". With focus on a node in the tree, <Tab> effectively means "if this node has children, focus the expand/collapse chevron", otherwise focus the next nearest sibling. <SPC> or <RET> means "expand/collapse children" or "select this node" depending on what's currently in focus. Aside from not matching a11y best practices for Treeviews, this approach has a number of downsides from a usability perspective:

• if the user has keyboard focus on the last of 20 Columns, the user must press <S-TAB> 20 times to put focus on the parent ColumnSet
• if the user has selected an element in the middle of the tree, they have to <TAB> or <S-TAB> a bunch of times to get out of the tree
• the expand/collapse chevron is always in the tabbing order even if the user never utilizes this functionality

The new model follows the aforementioned best practices:

• You can navigate using arrow keys in the way you'd expect (<LEFT>, <RIGHT>, <UP>, and <DOWN>)
• We use the roving tabIndex approach to track which tree item is selected.
  • This means that you can tab into the tree with focus landing on the last selected item, and you can change your selection and tab back out again without losing your place.
• Selection tracks focus, so you don't have to manually select which item is displaying properties.
• Pressing <RET> (<ENTER>) puts keyboard focus on the first focusable element in the selected item's properties page.

How Verified

Local build, devtools, Accessibility Insights, Narrator

[paulcam206]

@anna-dingler / @jwoo-msft / @almedina-ms -- in addition to code review, please take a bit of time to play around with the new navigation model to make sure that it's reasonable to you. Please feel free to ask questions! :)