Update chooser styles across all types

client/scss/components/_chooser.scss

@@ -1,131 +1,92 @@
-/*
-TODO this chooser style has been made more generic based on two identical
-methods for choosing pages and images that were previously included in their
-own less files in each app directory (and since deleted). It would be best if
-an admin 'theme' provided all the design for a UI in a single place, but
-should that be a series of overrides to the css provided from an app? If so,
-perhaps those two previous less files should be re-instated and then
-overridden here? hmm.
-*/
-
 .chooser {
-  input[type='text'] {
-    float: left;
-    width: 50%;
-    margin-inline-end: 1em;
-  }
-
-  .chosen {
-    display: block;
-  }
-
-  .unchosen,
-  .chosen {
-    position: relative;
-
-    .icon {
-      color: $color-grey-3;
-      @include svg-icon(2.5em);
-      vertical-align: middle;
-      margin-inline-end: 0.625rem;
-    }
+  margin-bottom: theme('spacing.[2.5]');
 
-    // TODO: [icon-font] remove when the Wagtail icon font is removed
-    &:before {
-      vertical-align: middle;
-      font-family: $font-wagtail-icons;
-      content: '';
-      // position: relative
-      display: inline-block;
-      // float: left;
-      color: $color-grey-3;
-      line-height: 1em;
-      font-size: 2.5em;
-      margin-inline-end: 0.3em;
-    }
+  &.blank .chosen {
+    display: none;
   }
 
-  .unchosen {
+  &:not(.blank) .unchosen {
     display: none;
   }
+}
 
-  .actions {
-    @include clearfix;
-    overflow: hidden;
-
-    li {
-      float: left;
-      margin: 0.3em;
-    }
+// Very subdued button style specifically for choosers, as there can be a lot of
+// chooser fields left unused on a page editing form.
+.chooser__choose-button {
+  display: flex;
+  align-items: center;
+  border-color: transparent;
+  padding-inline-start: 0;
+  // So the outline is slightly more separated from the text.
+  padding-inline-end: $focus-outline-width;
+
+  .icon {
+    @include svg-icon(theme('spacing.5'), initial);
+    color: inherit;
+    margin-inline-end: 5px;
   }
 
-  // ...unless the .page-chooser has the 'blank' class set
-  &.blank {
-    .chosen {
-      display: none;
-    }
-
-    .unchosen {
-      display: block;
-    }
+  &:hover,
+  &:focus {
+    color: $color-button-hover;
+    background-color: $color-white;
   }
 }
 
-// standard way of doing a chooser where the chosen object's title is overlaid
-.page-chooser,
-.snippet-chooser,
-.document-chooser {
-  .chosen {
-    .title {
-      color: $color-grey-1;
-      // display: block;
-      padding-inline-start: 1em;
-      display: inline-block;
-    }
+.chosen {
+  display: flex;
+  gap: theme('spacing.4');
+  align-items: center;
+}
 
-    .actions {
-      clear: both;
-      padding-top: 0.6em;
-    }
+.chooser__preview {
+  display: grid;
+  align-items: center;
+  justify-content: center;
+  width: 60px;
+  height: 60px;
+  // Prevent this item from getting smaller if the title is long.
+  flex-shrink: 0;
+  background-color: theme('colors.grey.150');
+  color: $color-white;
+  border-radius: theme('borderRadius.sm');
+
+  @media (forced-colors: active) {
+    border: 1px solid transparent;
   }
-}
 
-// TODO: [icon-font] remove when the Wagtail icon font is removed
-.page-chooser,
-.snippet-chooser,
-.document-chooser,
-.image-chooser {
-  .unchosen,
-  .chosen {
-    &:before {
-      display: none;
-    }
+  .icon {
+    width: theme('spacing.7');
+    height: theme('spacing.7');
+    color: inherit;
   }
 }
 
-.image-chooser {
-  .chosen {
-    padding-inline-start: $thumbnail-width;
+.chooser__title {
+  @apply w-body-text-large;
+}
 
-    &:before {
-      display: inline-block;
-    }
+.chooser__actions {
+  display: flex;
+  gap: theme('spacing.[1.5]');
+
+  .button {
+    // Subdued border as there can be a lot of chooser action buttons on a page.
+    border-color: theme('colors.grey.150');
+  }
 
-    .preview-image {
-      float: left;
-      margin-inline-start: -($thumbnail-width);
-      margin-inline-end: 1em;
-      max-width: $thumbnail-width;
+  @media (hover: hover) {
+    visibility: hidden;
 
-      // Resize standard Wagtail thumbnail size (165x165) to 130 for space-saving purposes.
-      // We could request a 130x130 rendition, but that's just unnecessary and burdens installations
-      // where images are store off-site with higher rendering times.
-      img {
-        max-width: $thumbnail-width;
-        max-height: $thumbnail-width;
-        height: auto;
-        width: auto;
-      }
+    .chooser:hover & {
+      visibility: visible;
     }
   }
 }
+
+.chooser__image {
+  max-width: 200px;
+  max-height: 140px;
+  height: auto;
+  width: auto;
+}

client/scss/settings/_variables.scss

@@ -92,7 +92,6 @@ $font-mono: theme('fontFamily.mono');
 $font-wagtail-icons: wagtail;
 
 // misc sizing
-$thumbnail-width: 130px;
 $menu-width: 200px;
 $menu-width-slim: 60px;
 $side-panel-width: 500px;

client/src/components/ChooserWidget/index.js

@@ -25,7 +25,9 @@ export class Chooser {
 
   initHTMLElements(id) {
     this.chooserElement = document.getElementById(`${id}-chooser`);
-    this.titleElement = this.chooserElement.querySelector('.title');
+    this.titleElement = this.chooserElement.querySelector(
+      '[data-chooser-title]',
+    );
     this.input = document.getElementById(id);
     this.editLink = this.chooserElement.querySelector('.edit-link');
     this.chooserBaseUrl = this.chooserElement.dataset.chooserUrl;

client/src/entrypoints/admin/task-chooser.js

@@ -2,7 +2,7 @@ import $ from 'jquery';
 
 function createTaskChooser(id) {
   const chooserElement = $('#' + id + '-chooser');
-  const taskName = chooserElement.find('.name');
+  const taskName = chooserElement.find('[data-chooser-title]');
   const input = $('#' + id);
   const editAction = chooserElement.find('.edit-link');
 

client/src/entrypoints/admin/telepath/__snapshots__/widgets.test.js.snap

@@ -5,23 +5,24 @@ exports[`telepath: wagtail.widgets.CheckboxInput it renders correctly 1`] = `"<i
 exports[`telepath: wagtail.widgets.PageChooser it renders correctly 1`] = `
 "<div id=\\"the-id-chooser\\" class=\\"chooser page-chooser\\" data-chooser-url=\\"/admin/choose-page/\\">
           <div class=\\"chosen\\">
-            <span class=\\"title\\">Welcome to the Wagtail Bakery!</span>
-            <ul class=\\"actions\\">
+          <div class=\\"chooser__preview\\" role=\\"presentation\\"></div>
+          <div class=\\"chooser__title\\" data-chooser-title=\\"\\" id=\\"the-id-title\\">Welcome to the Wagtail Bakery!</div>
+            <ul class=\\"chooser__actions\\">
               <li>
-                <button type=\\"button\\" class=\\"button action-choose button-small button-secondary\\">
-                  Choose another page
+                <button type=\\"button\\" class=\\"button action-choose button-small button-secondary\\" aria-describedby=\\"the-id-title\\">
+                  Change
                 </button>
               </li>
               <li>
-                <a href=\\"/admin/pages/60/edit/\\" class=\\"edit-link button button-small button-secondary\\" target=\\"_blank\\" rel=\\"noreferrer\\">
-                  Edit this page
+                <a href=\\"/admin/pages/60/edit/\\" class=\\"edit-link button button-small button-secondary\\" target=\\"_blank\\" rel=\\"noreferrer\\" aria-describedby=\\"the-id-title\\">
+                  Edit
                 </a>
               </li>
             </ul>
           </div>
           <div class=\\"unchosen\\">
-            <button type=\\"button\\" class=\\"button action-choose button-small button-secondary\\">
-              Choose a page
+            <button type=\\"button\\" class=\\"button action-choose button-small button-secondary chooser__choose-button\\">
+              <svg class=\\"icon icon-doc-empty-inverse\\" aria-hidden=\\"true\\"><use href=\\"#icon-doc-empty-inverse\\"></use></svg>Choose a page
             </button>
           </div>
         </div>
@@ -31,23 +32,24 @@ exports[`telepath: wagtail.widgets.PageChooser it renders correctly 1`] = `
 exports[`telepath: wagtail.widgets.PageChooser setState() changes the current page 1`] = `
 "<div id=\\"the-id-chooser\\" class=\\"chooser page-chooser\\" data-chooser-url=\\"/admin/choose-page/\\">
           <div class=\\"chosen\\">
-            <span class=\\"title\\">Anadama</span>
-            <ul class=\\"actions\\">
+          <div class=\\"chooser__preview\\" role=\\"presentation\\"></div>
+          <div class=\\"chooser__title\\" data-chooser-title=\\"\\" id=\\"the-id-title\\">Anadama</div>
+            <ul class=\\"chooser__actions\\">
               <li>
-                <button type=\\"button\\" class=\\"button action-choose button-small button-secondary\\">
-                  Choose another page
+                <button type=\\"button\\" class=\\"button action-choose button-small button-secondary\\" aria-describedby=\\"the-id-title\\">
+                  Change
                 </button>
               </li>
               <li>
-                <a href=\\"/admin/pages/34/edit/\\" class=\\"edit-link button button-small button-secondary\\" target=\\"_blank\\" rel=\\"noreferrer\\">
-                  Edit this page
+                <a href=\\"/admin/pages/34/edit/\\" class=\\"edit-link button button-small button-secondary\\" target=\\"_blank\\" rel=\\"noreferrer\\" aria-describedby=\\"the-id-title\\">
+                  Edit
                 </a>
               </li>
             </ul>
           </div>
           <div class=\\"unchosen\\">
-            <button type=\\"button\\" class=\\"button action-choose button-small button-secondary\\">
-              Choose a page
+            <button type=\\"button\\" class=\\"button action-choose button-small button-secondary chooser__choose-button\\">
+              <svg class=\\"icon icon-doc-empty-inverse\\" aria-hidden=\\"true\\"><use href=\\"#icon-doc-empty-inverse\\"></use></svg>Choose a page
             </button>
           </div>
         </div>
@@ -57,23 +59,24 @@ exports[`telepath: wagtail.widgets.PageChooser setState() changes the current pa
 exports[`telepath: wagtail.widgets.PageChooser setState() to null clears the fields 1`] = `
 "<div id=\\"the-id-chooser\\" class=\\"chooser page-chooser blank\\" data-chooser-url=\\"/admin/choose-page/\\">
           <div class=\\"chosen\\">
-            <span class=\\"title\\">Welcome to the Wagtail Bakery!</span>
-            <ul class=\\"actions\\">
+          <div class=\\"chooser__preview\\" role=\\"presentation\\"></div>
+          <div class=\\"chooser__title\\" data-chooser-title=\\"\\" id=\\"the-id-title\\">Welcome to the Wagtail Bakery!</div>
+            <ul class=\\"chooser__actions\\">
               <li>
-                <button type=\\"button\\" class=\\"button action-choose button-small button-secondary\\">
-                  Choose another page
+                <button type=\\"button\\" class=\\"button action-choose button-small button-secondary\\" aria-describedby=\\"the-id-title\\">
+                  Change
                 </button>
               </li>
               <li>
-                <a href=\\"/admin/pages/60/edit/\\" class=\\"edit-link button button-small button-secondary\\" target=\\"_blank\\" rel=\\"noreferrer\\">
-                  Edit this page
+                <a href=\\"/admin/pages/60/edit/\\" class=\\"edit-link button button-small button-secondary\\" target=\\"_blank\\" rel=\\"noreferrer\\" aria-describedby=\\"the-id-title\\">
+                  Edit
                 </a>
               </li>
             </ul>
           </div>
           <div class=\\"unchosen\\">
-            <button type=\\"button\\" class=\\"button action-choose button-small button-secondary\\">
-              Choose a page
+            <button type=\\"button\\" class=\\"button action-choose button-small button-secondary chooser__choose-button\\">
+              <svg class=\\"icon icon-doc-empty-inverse\\" aria-hidden=\\"true\\"><use href=\\"#icon-doc-empty-inverse\\"></use></svg>Choose a page
             </button>
           </div>
         </div>

client/src/entrypoints/admin/telepath/widgets.test.js

@@ -223,29 +223,34 @@ describe('telepath: wagtail.widgets.PageChooser', () => {
     // Unpack and render a radio select widget
     const widgetDef = window.telepath.unpack({
       _type: 'wagtail.widgets.PageChooser',
+      // Copy of wagtailadmin/widgets/chooser.html. Make sure to update when making changes to the template.
       _args: [
         `<div id="__ID__-chooser" class="chooser page-chooser blank" data-chooser-url="/admin/choose-page/">
           <div class="chosen">
-            <span class="title"></span>
-            <ul class="actions">
+          <div class="chooser__preview" role="presentation"></div>
+          <div class="chooser__title" data-chooser-title id="__ID__-title"></div>
+            <ul class="chooser__actions">
               <li>
-                <button type="button" class="button action-choose button-small button-secondary">
-                  Choose another page
+                <button type="button" class="button action-choose button-small button-secondary" aria-describedby="__ID__-title">
+                  Change
                 </button>
               </li>
               <li>
-                <a href=""
-                   class="edit-link button button-small button-secondary"
-                   target="_blank"
-                   rel="noreferrer">
-                  Edit this page
+                <a
+                  href=""
+                  class="edit-link button button-small button-secondary"
+                  target="_blank"
+                  rel="noreferrer"
+                  aria-describedby="__ID__-title"
+                >
+                  Edit
                 </a>
               </li>
             </ul>
           </div>
           <div class="unchosen">
-            <button type="button" class="button action-choose button-small button-secondary">
-              Choose a page
+            <button type="button" class="button action-choose button-small button-secondary chooser__choose-button">
+              <svg class="icon icon-doc-empty-inverse" aria-hidden="true"><use href="#icon-doc-empty-inverse"></use></svg>Choose a page
             </button>
           </div>
         </div>

client/src/entrypoints/images/image-chooser.js

@@ -6,7 +6,9 @@ class ImageChooser extends Chooser {
 
   initHTMLElements(id) {
     super.initHTMLElements(id);
-    this.previewImage = this.chooserElement.querySelector('.preview-image img');
+    this.previewImage = this.chooserElement.querySelector(
+      '[data-chooser-image]',
+    );
   }
 
   getStateFromHTML() {
@@ -17,7 +19,6 @@ class ImageChooser extends Chooser {
     */
     const state = super.getStateFromHTML();
     if (state) {
-      state.title = this.previewImage.getAttribute('alt');
       state.preview = {
         url: this.previewImage.getAttribute('src'),
         width: this.previewImage.getAttribute('width'),
@@ -31,8 +32,6 @@ class ImageChooser extends Chooser {
     super.renderState(newState);
     this.previewImage.setAttribute('src', newState.preview.url);
     this.previewImage.setAttribute('width', newState.preview.width);
-    this.previewImage.setAttribute('alt', newState.title);
-    this.previewImage.setAttribute('title', newState.title);
   }
 }
 window.ImageChooser = ImageChooser;

docs/editor_manual/copying_aliasing_existing_pages.md

@@ -30,9 +30,9 @@ For example, let's say you have a page about Brioche in the Breads section. You
 Here is how to create an alias to an existing page:
 
 -   The first step is the same as it is for [](copying_page_label). When you hover over a page in the {doc}`Explorer page <finding_your_way_around/the_explorer_page>`, click on _More_ and then _Copy_.
--   When you get to the copy page form, you can then choose another page as the parent page. Click the _Choose another page_ button.
+-   When you get to the copy page form, you can then choose another page as the parent page. Click the New parent page’s _Change_ button.
 
-![Clicking the choose another page button during the copy page form in order to change the parent of the copied page.](../_static/images/screen12.7_1_alias_choose_parent_page_button.png)
+![Clicking the change button during the copy page form in order to change the parent of the copied page.](../_static/images/screen12.7_1_alias_choose_parent_page_button.png)
 
 -   Select and click on the desired parent page.
 

docs/extending/generic_views.md

@@ -63,8 +63,6 @@ class PersonChooserViewSet(ChooserViewSet):
 
     icon = "user"
     choose_one_text = "Choose a person"
-    choose_another_text = "Choose another person"
-    edit_item_text = "Edit this person"
     form_fields = ["first_name", "last_name"]  # fields to show in the "Create" tab
 
 

wagtail/admin/templates/wagtailadmin/widgets/chooser.html

@@ -7,32 +7,36 @@
     Any element with the 'action-choose' class will open the page chooser modal
     when clicked.
 {% endcomment %}
+{% fragment as title_id %}{{ attrs.id }}-title{% endfragment %}
 <div id="{{ attrs.id }}-chooser" class="chooser {% block chooser_class %}{% if classname %}{{ classname }}{% endif %}{% endblock %} {% if not value %}blank{% endif %}" {% block chooser_attributes %}{% if chooser_url %}data-chooser-url="{{ chooser_url }}"{% endif %}{% endblock %}>
 
     <div class="chosen">
-        {% block chosen_icon %}{% if icon %}{% icon name=icon %}{% endif %}{% endblock chosen_icon %}
+        {% block chosen_icon %}
+            <div class="chooser__preview" role="presentation">
+                {% if icon %}{% icon name=icon %}{% endif %}
+            </div>
+        {% endblock chosen_icon %}
         {% block chosen_state_view %}
-            <span class="title">{{ display_title }}</span>
+            <div class="chooser__title" data-chooser-title id="{{ title_id }}">{{ display_title }}</div>
         {% endblock %}
 
-        <ul class="actions">
-            {% if not widget.is_required and widget.show_clear_link %}
-                <li><button type="button" class="button action-clear button-small button-secondary">{{ widget.clear_choice_text }}</button></li>
-            {% endif %}
-            <li><button type="button" class="button action-choose button-small button-secondary">{{ widget.choose_another_text }}</button></li>
+        <ul class="chooser__actions">
+            <li><button type="button" class="button action-choose button-small button-secondary" aria-describedby="{{ title_id }}">{{ widget.choose_another_text }}</button></li>
             {% if widget.show_edit_link %}
                 <li>
                     {% block edit_link %}
-                        <a href="{% block edit_chosen_item_url %}{{ edit_url }}{% endblock %}" class="edit-link button button-small button-secondary{% if not edit_url %} u-hidden{% endif %}" target="_blank" rel="noreferrer">{{ widget.link_to_chosen_text }}</a>
+                        <a href="{% block edit_chosen_item_url %}{{ edit_url }}{% endblock %}" aria-describedby="{{ title_id }}" class="edit-link button button-small button-secondary{% if not edit_url %} w-hidden{% endif %}" target="_blank" rel="noreferrer">{{ widget.link_to_chosen_text }}</a>
                     {% endblock %}
                 </li>
             {% endif %}
+            {% if not widget.is_required and widget.show_clear_link %}
+                <li><button type="button" class="button action-clear button-small button-secondary" aria-describedby="{{ title_id }}">{{ widget.clear_choice_text }}</button></li>
+            {% endif %}
         </ul>
     </div>
 
     <div class="unchosen">
-        {% block unchosen_icon %}{% if icon %}{% icon name=icon %}{% endif %}{% endblock unchosen_icon %}
-        <button type="button" class="button action-choose button-small button-secondary">{{ widget.choose_one_text }}</button>
+        <button type="button" class="button action-choose button-small button-secondary chooser__choose-button">{% block unchosen_icon %}{% icon name=icon|default:"plus-inverse" %}{% endblock unchosen_icon %}{{ widget.choose_one_text }}</button>
     </div>
 </div>
 

wagtail/admin/templates/wagtailadmin/workflows/widgets/task_chooser.html

@@ -1,5 +0,0 @@
-{% extends "wagtailadmin/widgets/chooser.html" %}
-
-{% block chosen_state_view %}
-    <span class="name">{{ display_title }}</span>
-{% endblock %}

wagtail/admin/tests/pages/test_edit_page.py

@@ -1549,7 +1549,10 @@ class TestChildRelationsOnSuperclass(TestCase, WagtailTestUtils):
         self.assertContains(response, "Adverts")
         self.assertContains(response, "id_advert_placements-TOTAL_FORMS")
         # the formset should be populated with an existing form (with a snippet chooser widget)
-        self.assertContains(response, '<span class="title">test_advert</span>')
+        self.assertContains(
+            response,
+            '<div class="chooser__title" data-chooser-title id="id_advert_placements-0-advert-title">test_advert</div>',
+        )
         self.assertContains(
             response,
             '<input type="hidden" name="advert_placements-0-advert" value="1" id="id_advert_placements-0-advert">',

wagtail/admin/tests/test_edit_handlers.py

@@ -901,10 +901,13 @@ class TestPageChooserPanel(TestCase):
     def test_render_html(self):
         result = self.page_chooser_panel.render_html()
         self.assertIn('<div class="help">help text</div>', result)
-        self.assertIn('<span class="title">Christmas</span>', result)
         self.assertIn(
-            '<a href="/admin/pages/%d/edit/" class="edit-link button button-small button-secondary" target="_blank" rel="noreferrer">'
-            "Edit this page</a>" % self.christmas_page.id,
+            '<div class="chooser__title" data-chooser-title id="id_page-title">Christmas</div>',
+            result,
+        )
+        self.assertIn(
+            '<a href="/admin/pages/%d/edit/" aria-describedby="id_page-title" class="edit-link button button-small button-secondary" target="_blank" rel="noreferrer">Edit</a>'
+            % self.christmas_page.id,
             result,
         )
 
@@ -917,7 +920,10 @@ class TestPageChooserPanel(TestCase):
         result = page_chooser_panel.render_html()
 
         self.assertIn('<div class="help">help text</div>', result)
-        self.assertIn('<span class="title"></span>', result)
+        self.assertIn(
+            '<div class="chooser__title" data-chooser-title id="id_page-title"></div>',
+            result,
+        )
         self.assertIn("Choose a page", result)
 
     def test_render_error(self):

wagtail/admin/viewsets/chooser.py

@@ -24,7 +24,7 @@ class ChooserViewSet(ViewSet):
     )  #: Label for the 'choose' button in the chooser widget when choosing an initial item
     page_title = None  #: Title text for the chooser modal (defaults to the same as ``choose_one_text``)`
     choose_another_text = _(
-        "Choose another"
+        "Change"
     )  #: Label for the 'choose' button in the chooser widget, when an item has already been chosen
     edit_item_text = _("Edit")  #: Label for the 'edit' button in the chooser widget
 

wagtail/admin/widgets/chooser.py

@@ -22,9 +22,9 @@ from wagtail.widget_adapters import WidgetAdapter
 
 class AdminChooser(WidgetWithScript, widgets.Input):
     choose_one_text = _("Choose an item")
-    choose_another_text = _("Choose another item")
-    clear_choice_text = _("Clear choice")
-    link_to_chosen_text = _("Edit this item")
+    choose_another_text = _("Change")
+    clear_choice_text = _("Clear")
+    link_to_chosen_text = _("Edit")
     show_edit_link = True
     show_clear_link = True
 
@@ -89,9 +89,9 @@ class AdminChooser(WidgetWithScript, widgets.Input):
 
 class BaseChooser(widgets.Input):
     choose_one_text = _("Choose an item")
-    choose_another_text = _("Choose another item")
-    clear_choice_text = _("Clear choice")
-    link_to_chosen_text = _("Edit this item")
+    choose_another_text = _("Change")
+    clear_choice_text = _("Clear")
+    link_to_chosen_text = _("Edit")
     show_edit_link = True
     show_clear_link = True
     template_name = "wagtailadmin/widgets/chooser.html"
@@ -266,8 +266,6 @@ register(BaseChooserAdapter(), BaseChooser)
 
 class AdminPageChooser(BaseChooser):
     choose_one_text = _("Choose a page")
-    choose_another_text = _("Choose another page")
-    link_to_chosen_text = _("Edit this page")
     display_title_key = "display_title"
     chooser_modal_url_name = "wagtailadmin_choose_page"
     icon = "doc-empty-inverse"

wagtail/admin/widgets/workflows.py

@@ -10,10 +10,8 @@ from wagtail.models import Task
 
 class AdminTaskChooser(BaseChooser):
     choose_one_text = _("Choose a task")
-    choose_another_text = _("Choose another task")
-    link_to_chosen_text = _("Edit this task")
     model = Task
-    template_name = "wagtailadmin/workflows/widgets/task_chooser.html"
+    icon = "thumbtack"
     chooser_modal_url_name = "wagtailadmin_workflows:task_chooser"
     classname = "task-chooser"
 

wagtail/documents/views/chooser.py

@@ -189,8 +189,6 @@ class DocumentChooserViewSet(ChooserViewSet):
     choose_one_text = _("Choose a document")
     create_action_label = _("Upload")
     create_action_clicked_label = _("Uploading…")
-    choose_another_text = _("Choose another document")
-    edit_item_text = _("Edit this document")
 
 
 viewset = DocumentChooserViewSet(

wagtail/images/templates/wagtailimages/images/index.html

@@ -87,7 +87,7 @@
                         {% endif %}
                     {% endfor %}
                     {% if current_tag %}
-                        <a class="button button-small bicolor button-secondary button--icon" href="{% url 'wagtailimages:index' %}{% querystring tag='' %}">{% icon name="cross" wrapped=1 %}{% trans 'Clear choice' %}</a>
+                        <a class="button button-small bicolor button-secondary button--icon" href="{% url 'wagtailimages:index' %}{% querystring tag='' %}">{% icon name="cross" wrapped=1 %}{% trans 'Clear' %}</a>
                     {% endif %}
                 </fieldset>
             {% endif %}

wagtail/images/templates/wagtailimages/widgets/image_chooser.html

@@ -1,10 +1,6 @@
 {% extends "wagtailadmin/widgets/chooser.html" %}
 
-{# Image chooser doesn't have a chosen icon. It shows an preview of the chosen image instead. #}
-{% block chosen_icon %}{% endblock chosen_icon %}
-
-{% block chosen_state_view %}
-    <div class="preview-image">
-        <img alt="{{ display_title }}" class="show-transparency" height="{{ preview.height }}" src="{{ preview.url }}" title="{{ display_title }}" width="{{ preview.width }}">
-    </div>
-{% endblock %}
+{% block chosen_icon %}
+    {# Empty alt because the chosen item’s title is already displayed next to the image. #}
+    <img class="chooser__image" data-chooser-image alt="" class="show-transparency" height="{{ preview.height }}" src="{{ preview.url }}" width="{{ preview.width }}">
+{% endblock chosen_icon %}

wagtail/images/views/chooser.py

@@ -300,8 +300,6 @@ class ImageChooserViewSet(ChooserViewSet):
     choose_one_text = _("Choose an image")
     create_action_label = _("Upload")
     create_action_clicked_label = _("Uploading…")
-    choose_another_text = _("Choose another image")
-    edit_item_text = _("Edit this image")
 
     @property
     def select_format_view(self):

wagtail/images/widgets.py

@@ -13,8 +13,6 @@ from wagtail.telepath import register
 
 class AdminImageChooser(BaseChooser):
     choose_one_text = _("Choose an image")
-    choose_another_text = _("Change image")
-    link_to_chosen_text = _("Edit this image")
     template_name = "wagtailimages/widgets/image_chooser.html"
     chooser_modal_url_name = "wagtailimages_chooser:choose"
     icon = "image"

wagtail/search/templates/wagtailsearch/queries/chooser_field.html

@@ -1,10 +1,10 @@
 {% extends "wagtailadmin/shared/field.html" %}
-{% load i18n %}
-{% trans "Date" %}
+{% load i18n wagtailadmin_tags %}
+
 {% block form_field %}
-    <div class="chooser searchterm-chooser">
+    <div class="w-grid w-auto-cols-auto w-gap-4">
         {{ field }}
 
-        <button type="button" id="{{ field.auto_id }}-chooser" class="button button-secondary searchterms-chooser">{% trans "Choose from popular search terms" %}</button>
+        <button type="button" id="{{ field.auto_id }}-chooser" class="button button-secondary">{% trans "Choose from popular search terms" %}</button>
     </div>
 {% endblock %}

wagtail/sites/forms.py

@@ -10,7 +10,6 @@ class SiteForm(forms.ModelForm):
         super().__init__(*args, **kwargs)
         self.fields["root_page"].widget = AdminPageChooser(
             choose_one_text=_("Choose a root page"),
-            choose_another_text=_("Choose a different root page"),
             show_clear_link=False,
         )
 

wagtail/snippets/tests/test_snippets.py

@@ -1893,7 +1893,7 @@ class TestSnippetChooserPanel(TestCase, WagtailTestUtils):
         field_html = self.snippet_chooser_panel.render_html()
         self.assertIn(self.advert_text, field_html)
         self.assertIn("Choose advert", field_html)
-        self.assertIn("Choose another advert", field_html)
+        self.assertIn("Change", field_html)
 
     def test_render_as_empty_field(self):
         test_snippet = SnippetChooserModel()
@@ -1910,7 +1910,7 @@ class TestSnippetChooserPanel(TestCase, WagtailTestUtils):
 
         field_html = snippet_chooser_panel.render_html()
         self.assertIn("Choose advert", field_html)
-        self.assertIn("Choose another advert", field_html)
+        self.assertIn("Change", field_html)
 
     def test_render_js(self):
         self.assertIn(
@@ -3256,7 +3256,7 @@ class TestSnippetChooserPanelWithCustomPrimaryKey(TestCase, WagtailTestUtils):
         field_html = self.snippet_chooser_panel.render_html()
         self.assertIn(self.advert_text, field_html)
         self.assertIn("Choose advert with custom primary key", field_html)
-        self.assertIn("Choose another advert with custom primary key", field_html)
+        self.assertIn("Change", field_html)
 
     def test_render_as_empty_field(self):
         test_snippet = SnippetChooserModelWithCustomPrimaryKey()
@@ -3273,7 +3273,7 @@ class TestSnippetChooserPanelWithCustomPrimaryKey(TestCase, WagtailTestUtils):
 
         field_html = snippet_chooser_panel.render_html()
         self.assertIn("Choose advert with custom primary key", field_html)
-        self.assertIn("Choose another advert with custom primary key", field_html)
+        self.assertIn("Change", field_html)
 
     def test_render_js(self):
         self.assertIn(

wagtail/snippets/widgets.py

@@ -22,8 +22,6 @@ class AdminSnippetChooser(BaseChooser):
         self.model = model
         name = self.model._meta.verbose_name
         self.choose_one_text = _("Choose %s") % name
-        self.choose_another_text = _("Choose another %s") % name
-        self.link_to_chosen_text = _("Edit this %s") % name
 
         super().__init__(**kwargs)
 

wagtail/users/templates/wagtailusers/groups/includes/page_permissions_formset.html

@@ -13,7 +13,7 @@
         </p>
     {% endif %}
 
-    <table class="listing page-permissions-listing">
+    <table class="listing">
         <col />
         {% for i in formset.permission_types %}
             <col width="15%" />