Document outline: Should be links not buttons

[anevins12]

Describe the bug
Anchor tags are not being used to structure the Document Outline functionality. Anchor tags are meant to lead to information on the same page or on another page and are the most suitable element to be used in this section.

We are emulating the hyperlink behaviour by moving keyboard (and viewport) focus to the relevant area, but the behaviour may be unpredictable to blind users (even with the help text).

To Reproduce
Steps to reproduce the behavior:

1. Edit a page with multiple headings as blocks
2. Click on the 'table-of-contents' icon
3. Look at the markup of buttons underneath the title "Document Outline"
4. See they are structured as <button> elements.

Current Markup
<button class="document-outline__button"> <span class="document-outline__emdash" aria-hidden="true"></span> <strong class="document-outline__level">Title</strong> <span class="document-outline__item-content">Gutenberg, imagine the possibilities</span> <span class="screen-reader-text">(Click to focus this heading)</span> </button>

Expected behavior
As a blind user of a screen reader, I would expect that hyperlinks lead to somewhere (and the focus will be moved there), and I would expect the behaviour of buttons to be less predictable in general.

Expected Markup
<a class="document-outline__button" href="..."> <span class="document-outline__emdash" aria-hidden="true"></span> <strong class="document-outline__level">Title</strong> <span class="document-outline__item-content">Gutenberg, imagine the possibilities</span> <span class="screen-reader-text">(Click to focus this heading)</span> </a>

Desktop (please complete the following information):

• OS: Ubuntu
• Browser: Chrome
• Version: Latest
  However this issue is not specific to a browser.

Additional context

• If the markup is changed to a hyperlink then we may need to reconsider text in the hyperlink for it to make more sense as a hyperlink.

[tofumatt]

I'm moving this out of WP 5.0 to 5.0.x for now but if #10815 is finished we can get it into Gutenberg 4.5 and in WordPress 5.0.

[afercia]

Worth reminding #11711 aims to do the same for the Block Navigation. This change to links should happen at the same time for both components.

Also, when switching the Editor to text (code) mode, the links should be rendered just as text. For now, the document outline buttons switch to a state with "noop and aria-disabled", see #14081.