Page chooser should use buttons instead of links with invalid targets

Issue Summary

In the page chooser, the explorer view allowing users to select a page uses links (<a>) to allow users to select a page:

<a class="choose-page" href="#3" data-id="3" data-title="Breads" data-url="http://127.0.0.1:8000/breads/" data-parent-id="60" data-edit-url="/admin/pages/3/edit/">Breads</a>

There are three problems with this:

• Using <a> tags instead of buttons. For screen reader users, this UI will be announced as if it was a list of links for the user to navigate to those pages, not as a button to select the page. For example with VoiceOver, this would be announced as “link, Breads”. We instead want “button, Select ‘Breads’ page” (or similar).
• Related to the above – the page title “Breads” isn’t enough context to understand what the control is for.
• Using page id as an href. This is problematic for accessibility testing tools, which will flag this as broken markup, since there is no element with that fragment identifier on the current page.

Steps to Reproduce

1. Go to the CMS admin using screen-reader software
2. Open a page/link chooser

• I have confirmed that this issue can be reproduced as described on a fresh Wagtail project: no

[cfarm]

Additionally I would recommend not highlighting the whole row in this interface, since the whole row is not a clickable/interactive element

[lb-]

PR up for fixing this https://github.com/wagtail/wagtail/pull/9209 (note: the simplest fix, does not solve the problem of hover states for these, that will be a much bigger job and require a change of DOM structure that will add a lot of complexity).

If that PR goes through we will split this issue to a more suitable one for possibly changing the chooser approach to have an explicit ‘select’ button I think but that needs a larger decision.

Hopefully the PR fixes the core problem now and gives us a reference to also fix the same issue in other chooser listings.