Ensure the page chooser modal listing uses buttons

- add proper aria-description (intentionally not aria-label) to provide extra context for this button's purpose
- use classnames template tag for simpler classes generation
- clean up some commented out css & also split out specific scss ignore lines in _listing.scss
- fixes #5408

client/scss/components/_listing.scss

@@ -11,7 +11,6 @@ ul.listing {
   ul {
     list-style-type: none;
     padding-inline-start: 0;
-    // @include unlist();
   }
 
   > li {
@@ -114,6 +113,7 @@ ul.listing {
     }
 
     tbody .parent-page .title {
+      button,
       a {
         display: inline-block;
       }
@@ -133,7 +133,9 @@ ul.listing {
       color: $color-white;
 
       .title a,
-      .title a:hover {
+      .title button,
+      .title a:hover,
+      .title button:hover {
         color: $color-white;
       }
 
@@ -204,11 +206,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 +238,6 @@ ul.listing {
       float: left;
       padding: 0 0.5em 0 0;
       margin: 0 0 0.5em;
-
-      // line-height: 1em;
     }
   }
 
@@ -547,6 +553,7 @@ table.listing {
           text-align: center;
           height: 180px;
 
+          // stylelint-disable-next-line max-nesting-depth
           &:before {
             content: '';
             display: inline-block;
@@ -555,13 +562,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

@@ -110,7 +110,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,8 +1,21 @@
-{% load l10n %}
-<td class="{% if column.classname %}{{ column.classname }} {% endif %}title">
+{% load i18n l10n wagtailadmin_tags %}
+<td class="{% classnames column.classname "title" %}">
     <div class="title-wrapper">
         {% if page.can_choose %}
-            <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-choose-item
+                data-admin-title="{{ page.get_admin_display_title }}"
+                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>
         {% else %}
             {{ value }}
         {% endif %}