Document outline: Use links not buttons

[adamsilverstein]

Description

Fixes #7142.

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).

How has this been tested?

After making the changes, I tested that the document outlined looked correct (the same) and clicking the links worked as expected. One slight difference here is that hovering over the items now shows a blue link color. This seems appropriate here, noting because it is a change. I also tested with Voice Over to review spoken messages which seemed good.

Screenshots

Types of changes

• Change button to a tag
• Style a tag to not display an underline
• add an anchor link (some link is required or the browser will redirect, open to other suggestions for the link here)

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.

[adamsilverstein]

@aduth I updated the approach here to use the anchor links directly, removing the onClick handler. Let me know what you think.

@afercia can you verify this addresses #7142?

[adamsilverstein]

• Updated snapshots for tests

[adamsilverstein]

@aduth can you please give this another review? also appreciate any tips on getting the tests to pass.

[aduth]

Tests fail because block client ID is not deterministic.

Prior art:

gutenberg/test/integration/full-content/full-content.spec.js

Lines 59 to 60 in 4369d93

	// Change client IDs to a predictable value
	block.clientId = '_clientId_' + index;

Maybe not testing snapshots

expect.any( String )

https://jestjs.io/docs/en/expect#expectanyconstructor

[aduth]

Code-wise, this appears all good.

It seems we have unsettled yet:

• What difference this actually makes
• What are the plans for the block navigation menu, whose behavior is now distinct from the document outline as of these changes

[adamsilverstein]

It seems we have unsettled yet:

What difference this actually makes

This is pretty clearly described in #7142

In particular improves the expected behavior of the document outline for blind users who access the outline using a screen reader:

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.

Changing the buttons to links helps users understand what will happen when they are clicked - especially blind users who can't see the visual styling the buttons have been given.

What are the plans for the block navigation menu, whose behavior is now distinct from the document outline as of these changes

I agree, this change does point to a potential issue with the block navigation menu's accessibility. For now, I've kept the focus of this PR to the document outline.

[afercia]

What are the plans for the block navigation menu, whose behavior is now distinct from the document outline as of these changes

#11711