Ensure the Page chooser modal listing uses buttons

client/scss/components/_listing.scss

@@ -113,6 +113,7 @@ ul.listing {
     }
 
     tbody .parent-page .title {
+      button,
       a {
         display: inline-block;
       }
@@ -133,6 +134,8 @@ ul.listing {
 
       .title a,
       .title a:hover,
+      .title button,
+      .title button:hover,
       .title label {
         color: $color-white;
       }
@@ -204,11 +207,17 @@ ul.listing {
       @apply w-label-1;
       margin: 0;
 
-      a {
+      a,
+      button {
+        background: inherit;
         color: inherit;
+        font-weight: inherit;
+        padding: 0;
+        text-align: start;
         text-decoration: none;
+        width: 100%;
 
-        // stylelint-disable max-nesting-depth
+        // stylelint-disable-next-line max-nesting-depth
         &:hover {
           color: $color-link;
         }
@@ -230,8 +239,6 @@ ul.listing {
       float: left;
       padding: 0 0.5em 0 0;
       margin: 0 0 0.5em;
-
-      // line-height: 1em;
     }
   }
 
@@ -554,6 +561,7 @@ table.listing {
           text-align: center;
           height: 180px;
 
+          // stylelint-disable-next-line max-nesting-depth
           &:before {
             content: '';
             display: inline-block;
@@ -562,13 +570,15 @@ table.listing {
             margin-inline-end: -0.25em;
           }
 
+          // stylelint-disable-next-line max-nesting-depth
           img {
             display: inline-block;
             vertical-align: middle;
           }
         }
 
         &:hover {
+          // stylelint-disable-next-line max-nesting-depth
           img {
             border-color: $color-teal;
           }

client/src/entrypoints/admin/page-chooser-modal.js

@@ -124,7 +124,7 @@ const PAGE_CHOOSER_MODAL_ONLOAD_HANDLERS = {
 
       /* Set up behaviour of choose-page links, to pass control back to the calling page */
       // eslint-disable-next-line func-names
-      $('a.choose-page', modal.body).on('click', function () {
+      $('[data-choose-item]', modal.body).on('click', function () {
         const pageData = $(this).data();
         pageData.parentId = jsonData.parent_page_id;
         modal.respond('pageChosen', pageData);

wagtail/admin/templates/wagtailadmin/chooser/tables/page_title_cell.html

@@ -1,11 +1,24 @@
-{% load l10n wagtailadmin_tags %}
+{% load i18n l10n wagtailadmin_tags %}
 <td class="{% if column.classname %}{{ column.classname }} {% endif %}title">
     <div class="title-wrapper">
         {% if page.can_choose %}
             {% if column.is_multiple_choice %}
                 <label for="chooser-modal-select-{{ page.id|unlocalize }}">{{ value }}</label>
             {% else %}
-                <a class="choose-page" href="#{{ page.id|unlocalize }}" data-id="{{ page.id|unlocalize }}" data-title="{{ page.title }}" data-admin-title="{{ page.get_admin_display_title }}" data-url="{{ page.url }}" data-parent-id="{{ page.get_parent.id|unlocalize }}" data-edit-url="{% url 'wagtailadmin_pages:edit' page.id %}">{{ value }}</a>
+                <button
+                    class="choose-page"
+                    type="button"
+                    aria-description="{% trans "Select page" %}"
+                    data-admin-title="{{ page.get_admin_display_title }}"
+                    data-choose-item
+                    data-edit-url="{% url 'wagtailadmin_pages:edit' page.id %}"
+                    data-id="{{ page.id|unlocalize }}"
+                    data-parent-id="{{ page.get_parent.id|unlocalize }}"
+                    data-title="{{ page.title }}"
+                    data-url="{{ page.url }}"
+                >
+                    {{ value }}
+                </button>
             {% endif %}
         {% else %}
             {{ value }}