From 8021c1d243f6db2887afdd13e2647be4697718b5 Mon Sep 17 00:00:00 2001 From: Albina Starykova Date: Mon, 23 Sep 2024 18:39:21 +0200 Subject: [PATCH] Basic BE setup for contrast themes --- CHANGELOG.txt | 3 +- CONTRIBUTORS.md | 1 + client/scss/components/_a11y-result.scss | 4 ++ client/scss/components/_button.scss | 4 +- client/scss/components/_chooser.scss | 6 +- client/scss/components/_dropdown.scss | 2 +- client/scss/components/_filters.scss | 1 + client/scss/components/_form-side.scss | 3 +- client/scss/components/_header.scss | 4 ++ client/scss/components/_messages.scss | 4 ++ client/scss/components/_panel.scss | 1 + client/scss/components/_preview-panel.scss | 4 ++ client/scss/components/forms/_input-base.scss | 1 + client/scss/tools/_mixins.general.scss | 60 +++++++++++++++++++ .../CommentApp/components/Comment/style.scss | 1 + .../components/CommentHeader/style.scss | 2 + client/src/components/Draftail/Draftail.scss | 14 +++++ .../src/components/Minimap/CollapseAll.scss | 1 + .../src/components/Minimap/MinimapItem.scss | 4 ++ client/src/components/Sidebar/Sidebar.scss | 3 + client/src/components/Sidebar/Sidebar.tsx | 4 +- .../__snapshots__/Sidebar.test.js.snap | 4 +- client/src/tokens/colorThemes.js | 60 +++++++++++++++++++ client/src/tokens/colorVariables.test.js | 14 +++++ client/src/tokens/colors.js | 10 ++++ client/tailwind.config.js | 7 +++ docs/releases/6.3.md | 7 +++ wagtail/admin/forms/account.py | 2 +- .../pages/listing/_page_header_buttons.html | 2 +- .../shared/headers/slim_header.html | 2 +- .../shared/page_status_tag_new.html | 5 +- .../admin/templatetags/wagtailadmin_tags.py | 8 ++- .../admin/tests/test_account_management.py | 18 +++++- wagtail/admin/tests/test_views.py | 4 +- .../migrations/0014_userprofile_contrast.py | 23 +++++++ wagtail/users/models.py | 11 ++++ 36 files changed, 285 insertions(+), 19 deletions(-) create mode 100644 wagtail/users/migrations/0014_userprofile_contrast.py diff --git a/CHANGELOG.txt b/CHANGELOG.txt index b7e59cbb11e6..9c8083073c4c 100644 --- a/CHANGELOG.txt +++ b/CHANGELOG.txt @@ -20,8 +20,9 @@ Changelog * Fire `copy_for_translation_done` signal when copying translatable models as well as pages (Coen van der Kamp) * Add support for an image `description` field across all images, to better support accessible image descriptions (Chiemezuo Akujobi) * Prompt the user about unsaved changes when editing snippets (Sage Abdullah) - * Implement incremental dashboard design enhancements (Albina Starykova) + * Implement incremental dashboard design enhancements (Albina Starykova, Ben Enright) * Add support for specifying different preview modes to the "View draft" URL for pages (Robin Varghese) + * Add a new enhanced contrast admin theming option for the admin interface (Albina Starykova, Victoria Ottah) * Fix: Prevent page type business rules from blocking reordering of pages (Andy Babic, Sage Abdullah) * Fix: Improve layout of object permissions table (Sage Abdullah) * Fix: Fix typo in aria-label attribute of page explorer navigation link (Sébastien Corbin) diff --git a/CONTRIBUTORS.md b/CONTRIBUTORS.md index 5bd352380ae8..eac907444176 100644 --- a/CONTRIBUTORS.md +++ b/CONTRIBUTORS.md @@ -840,6 +840,7 @@ * Gabriel Getzie * Rohit Singh * Robin Varghese +* Victoria Ottah ## Translators diff --git a/client/scss/components/_a11y-result.scss b/client/scss/components/_a11y-result.scss index 4f729551b2b6..06323f5ca6c1 100644 --- a/client/scss/components/_a11y-result.scss +++ b/client/scss/components/_a11y-result.scss @@ -8,6 +8,10 @@ .form-side--checks & { display: block; } + + @include more-contrast() { + border-color: theme('colors.border-furniture-more-contrast'); + } } .w-a11y-result__header { diff --git a/client/scss/components/_button.scss b/client/scss/components/_button.scss index 89e4e68cd320..a5ee0c5b3af7 100644 --- a/client/scss/components/_button.scss +++ b/client/scss/components/_button.scss @@ -321,11 +321,13 @@ } .w-header-button { + @include more-contrast-interactive(); display: flex; align-items: center; justify-content: center; gap: theme('spacing.1'); - height: theme('spacing.7'); + height: theme('spacing.8'); + min-width: theme('spacing.8'); appearance: none; background-color: initial; border: 1px solid transparent; diff --git a/client/scss/components/_chooser.scss b/client/scss/components/_chooser.scss index 947db7a05f01..db99fe433a9c 100644 --- a/client/scss/components/_chooser.scss +++ b/client/scss/components/_chooser.scss @@ -15,6 +15,7 @@ $preview-size: 2.625rem; // 42px // Very subdued button style specifically for choosers, as there can be a lot of // chooser fields left unused on a page editing form. .button.chooser__choose-button { + @include more-contrast-interactive(); @apply w-label-3; display: flex; align-items: center; @@ -81,11 +82,6 @@ $preview-size: 2.625rem; // 42px width: auto; } -.chooser .w-dropdown__toggle--icon { - width: $preview-size; - height: $preview-size; -} - // Display these as inline block so that action icons such as comments can appear as close as possible .w-field--admin_task_chooser, .w-field--admin_page_chooser, diff --git a/client/scss/components/_dropdown.scss b/client/scss/components/_dropdown.scss index bd1029a419c5..2571933946ef 100644 --- a/client/scss/components/_dropdown.scss +++ b/client/scss/components/_dropdown.scss @@ -3,7 +3,7 @@ } .w-dropdown__toggle--icon { - @apply w-w-8 w-h-8; + @apply w-w-8 w-h-8 more-contrast:w-p-0 more-contrast:w-border more-contrast:w-rounded-sm more-contrast:w-border-border-interactive-more-contrast hover:more-contrast:w-border-border-interactive-more-contrast-hover; } .w-dropdown__toggle-icon { diff --git a/client/scss/components/_filters.scss b/client/scss/components/_filters.scss index b92b6a2170f5..40028f7d0dbb 100644 --- a/client/scss/components/_filters.scss +++ b/client/scss/components/_filters.scss @@ -25,6 +25,7 @@ } .w-filter-button { + @include more-contrast-interactive(); position: relative; width: theme('spacing.10'); height: theme('spacing.10'); diff --git a/client/scss/components/_form-side.scss b/client/scss/components/_form-side.scss index 60a6a0f1e1ee..dcabca598fc2 100644 --- a/client/scss/components/_form-side.scss +++ b/client/scss/components/_form-side.scss @@ -36,7 +36,8 @@ sm:w-max-w-[22.5rem] md:w-max-w-[35.937rem] lg:w-max-w-[31.25rem] - xl:w-max-w-[46.875rem]; + xl:w-max-w-[46.875rem] + more-contrast:w-border-border-furniture-more-contrast; z-index: calc(theme('zIndex.header') - 10); width: var(--side-panel-width, 100%); diff --git a/client/scss/components/_header.scss b/client/scss/components/_header.scss index ad126efeb984..ce077d202719 100644 --- a/client/scss/components/_header.scss +++ b/client/scss/components/_header.scss @@ -151,6 +151,10 @@ } .w-slim-header { + @include more-contrast() { + border-color: theme('colors.border-furniture-more-contrast'); + } + &__search-form { @apply w-mx-2 w-flex w-items-center w-gap-2; } diff --git a/client/scss/components/_messages.scss b/client/scss/components/_messages.scss index 2f48146cb9c4..097452d9e1ff 100644 --- a/client/scss/components/_messages.scss +++ b/client/scss/components/_messages.scss @@ -58,6 +58,10 @@ .warning { background-color: theme('colors.warning.100'); color: theme('colors.grey.600'); + + @include more-contrast() { + background-color: theme('colors.warning.75'); + } } .info { diff --git a/client/scss/components/_panel.scss b/client/scss/components/_panel.scss index b33a56b5719a..239a8dc407fb 100644 --- a/client/scss/components/_panel.scss +++ b/client/scss/components/_panel.scss @@ -61,6 +61,7 @@ $header-button-size: theme('spacing.6'); .w-panel__toggle, .w-panel__controls .button.button--icon { @include show-focus-outline-inside(); + @include more-contrast-interactive(); display: inline-grid; justify-content: center; align-content: center; diff --git a/client/scss/components/_preview-panel.scss b/client/scss/components/_preview-panel.scss index 48181cfd7c37..75c32ac9ed3f 100644 --- a/client/scss/components/_preview-panel.scss +++ b/client/scss/components/_preview-panel.scss @@ -59,6 +59,10 @@ gap: 0.75rem; padding-bottom: 1rem; margin-bottom: 1rem; + + @include more-contrast() { + border-color: theme('colors.border-furniture-more-contrast'); + } } &__size-button { diff --git a/client/scss/components/forms/_input-base.scss b/client/scss/components/forms/_input-base.scss index a4224589dae6..aac32c71ea6a 100644 --- a/client/scss/components/forms/_input-base.scss +++ b/client/scss/components/forms/_input-base.scss @@ -3,6 +3,7 @@ * Text input, textarea, checkbox, radio, select, etc. */ @mixin input-base() { + @include more-contrast-interactive(); appearance: none; border-radius: theme('borderRadius.DEFAULT'); color: theme('colors.text-context'); diff --git a/client/scss/tools/_mixins.general.scss b/client/scss/tools/_mixins.general.scss index 7b1c2110932c..8def69b86866 100644 --- a/client/scss/tools/_mixins.general.scss +++ b/client/scss/tools/_mixins.general.scss @@ -93,6 +93,21 @@ } } +/** + * Apply styles for enhanced contrast theming. + */ +@mixin more-contrast() { + .w-contrast-more & { + @content; + } + + @media (prefers-contrast: more) { + .w-contrast-system & { + @content; + } + } +} + /** * Apply styles for the light theme only. */ @@ -107,3 +122,48 @@ } } } + +/** + * Apply styles for the dark theme with increased contrast. + */ +@mixin dark-theme-more-contrast() { + .w-theme-dark.w-contrast-more & { + @content; + } + + @media (prefers-color-scheme: dark) { + .w-theme-system.w-contrast-more & { + @content; + } + } + + @media (prefers-contrast: more) { + .w-theme-dark.w-contrast-system & { + @content; + } + } + + @media (prefers-color-scheme: dark) and (prefers-contrast: more) { + .w-theme-system.w-contrast-system & { + @content; + } + } +} + +/** +* Increased contrast theme styles for interactive components +*/ +@mixin more-contrast-interactive() { + @include more-contrast() { + border: 1px solid theme('colors.border-interactive-more-contrast'); + + &:hover { + border-color: theme('colors.border-interactive-more-contrast-hover'); + } + + &[disabled], + &[disabled]:hover { + border-style: dashed; + } + } +} diff --git a/client/src/components/CommentApp/components/Comment/style.scss b/client/src/components/CommentApp/components/Comment/style.scss index 6cdba53bfb81..ee4110ba6d4b 100644 --- a/client/src/components/CommentApp/components/Comment/style.scss +++ b/client/src/components/CommentApp/components/Comment/style.scss @@ -1,5 +1,6 @@ .comment { @include box; + @include more-contrast-interactive(); width: 300px; display: block; diff --git a/client/src/components/CommentApp/components/CommentHeader/style.scss b/client/src/components/CommentApp/components/CommentHeader/style.scss index 7f1d84824bf4..e3e9427df156 100644 --- a/client/src/components/CommentApp/components/CommentHeader/style.scss +++ b/client/src/components/CommentApp/components/CommentHeader/style.scss @@ -40,6 +40,8 @@ > button, > details > summary { + @include more-contrast-interactive(); + border-radius: theme('borderRadius.sm'); list-style-type: none; // Hides triangle on Firefox width: 30px; height: 30px; diff --git a/client/src/components/Draftail/Draftail.scss b/client/src/components/Draftail/Draftail.scss index 375dfcd8d034..18e87ca35810 100644 --- a/client/src/components/Draftail/Draftail.scss +++ b/client/src/components/Draftail/Draftail.scss @@ -101,6 +101,11 @@ $draftail-editor-font-family: theme('fontFamily.sans'); background-color: $draftail-editor-background; color: $draftail-placeholder-text; + &--pin { + display: flex; + flex-wrap: wrap; + } + .Draftail-Editor--focus & { color: $draftail-editor-text; top: calc(theme('spacing.slim-header') * 2); @@ -205,11 +210,19 @@ $draftail-editor-font-family: theme('fontFamily.sans'); } } +.Draftail-ToolbarGroup { + display: flex; +} + .Draftail-ToolbarGroup::before { display: none; } .Draftail-ToolbarButton { + @include more-contrast-interactive(); + display: flex; + align-items: center; + justify-content: center; height: 1.875rem; min-width: 1.875rem; padding: 0; @@ -257,6 +270,7 @@ $draftail-editor-font-family: theme('fontFamily.sans'); .Draftail-Toolbar & { border-color: theme('colors.border-field-default'); background-color: theme('colors.surface-page'); + color: currentColor; border-top-width: 0; border-inline-end-width: 0; diff --git a/client/src/components/Minimap/CollapseAll.scss b/client/src/components/Minimap/CollapseAll.scss index e5da4e8687bb..2dbca3ab204c 100644 --- a/client/src/components/Minimap/CollapseAll.scss +++ b/client/src/components/Minimap/CollapseAll.scss @@ -1,4 +1,5 @@ .w-minimap__collapse-all { + @include more-contrast-interactive(); display: none; // Keep the icon at a stable position and reduce the amount of shifting of the button. min-width: 110px; diff --git a/client/src/components/Minimap/MinimapItem.scss b/client/src/components/Minimap/MinimapItem.scss index 5f09727454f2..3b0b3e7c36a5 100644 --- a/client/src/components/Minimap/MinimapItem.scss +++ b/client/src/components/Minimap/MinimapItem.scss @@ -35,6 +35,10 @@ @media (forced-colors: active) { border-inline-start-width: 3px; } + + @include more-contrast() { + border-inline-start-width: 3px; + } } &:hover { diff --git a/client/src/components/Sidebar/Sidebar.scss b/client/src/components/Sidebar/Sidebar.scss index d9f039ecfd40..c7599ed1b4b9 100644 --- a/client/src/components/Sidebar/Sidebar.scss +++ b/client/src/components/Sidebar/Sidebar.scss @@ -45,6 +45,9 @@ $sidebar-toggle-size: 35px; @media (forced-colors: active) { border-inline-end: 1px solid transparent; } + @include dark-theme-more-contrast() { + border-inline-end: 1px solid theme('colors.border-furniture-more-contrast'); + } .icon--menuitem { width: 1rem; diff --git a/client/src/components/Sidebar/Sidebar.tsx b/client/src/components/Sidebar/Sidebar.tsx index de5b51bff4dd..715e4aac2371 100644 --- a/client/src/components/Sidebar/Sidebar.tsx +++ b/client/src/components/Sidebar/Sidebar.tsx @@ -230,7 +230,9 @@ export const Sidebar: React.FunctionComponent = ({ w-items-center hover:w-bg-surface-menu-item-active hover:text-white - hover:opacity-100`} + hover:opacity-100 + more-contrast:w-border-border-interactive-more-contrast-dark-bg + hover:more-contrast:w-border-border-interactive-more-contrast-dark-bg-hover`} > diff --git a/client/src/tokens/colorThemes.js b/client/src/tokens/colorThemes.js index 58e65264df4d..a84c86193def 100644 --- a/client/src/tokens/colorThemes.js +++ b/client/src/tokens/colorThemes.js @@ -295,6 +295,36 @@ const light = [ textUtility: 'w-text-border-button-outline-hover', cssVariable: '--w-color-border-button-outline-hover', }, + 'border-interactive-more-contrast': { + value: 'var(--w-color-grey-500)', + bgUtility: 'w-bg-border-interactive-more-contrast', + textUtility: 'w-text-border-interactive-more-contrast', + cssVariable: '--w-color-border-interactive-more-contrast', + }, + 'border-interactive-more-contrast-hover': { + value: 'var(--w-color-black)', + bgUtility: 'w-bg-border-interactive-more-contrast-hover', + textUtility: 'w-text-border-interactive-more-contrast-hover', + cssVariable: '--w-color-border-interactive-more-contrast-hover', + }, + 'border-interactive-more-contrast-dark-bg': { + value: 'var(--w-color-grey-150)', + bgUtility: 'w-bg-border-interactive-more-contrast-dark-bg', + textUtility: 'w-text-border-interactive-more-contrast-dark-bg', + cssVariable: '--w-color-border-interactive-more-contrast-dark-bg', + }, + 'border-interactive-more-contrast-dark-bg-hover': { + value: 'var(--w-color-white)', + bgUtility: 'w-bg-border-interactive-more-contrast-dark-bg-hover', + textUtility: 'w-text-border-interactive-more-contrast-dark-bg-hover', + cssVariable: '--w-color-border-interactive-more-contrast-dark-bg-hover', + }, + 'border-furniture-more-contrast': { + value: 'var(--w-color-grey-200)', + bgUtility: 'w-bg-border-furniture-more-contrast', + textUtility: 'w-text-border-furniture-more-contrast', + cssVariable: '--w-color-border-furniture-more-contrast', + }, }, }, { @@ -583,6 +613,36 @@ const dark = [ textUtility: 'w-text-border-button-outline-hover', cssVariable: '--w-color-border-button-outline-hover', }, + 'border-interactive-more-contrast': { + value: 'var(--w-color-grey-150)', + bgUtility: 'w-bg-border-interactive-more-contrast', + textUtility: 'w-text-border-interactive-more-contrast', + cssVariable: '--w-color-border-interactive-more-contrast', + }, + 'border-interactive-more-contrast-hover': { + value: 'var(--w-color-white)', + bgUtility: 'w-bg-border-interactive-more-contrast-hover', + textUtility: 'w-text-border-interactive-more-contrast-hover', + cssVariable: '--w-color-border-interactive-more-contrast-hover', + }, + 'border-interactive-more-contrast-dark-bg': { + value: 'var(--w-color-grey-150)', + bgUtility: 'w-bg-border-interactive-more-contrast-dark-bg', + textUtility: 'w-text-border-interactive-more-contrast-dark-bg', + cssVariable: '--w-color-border-interactive-more-contrast-dark-bg', + }, + 'border-interactive-more-contrast-dark-bg-hover': { + value: 'var(--w-color-white)', + bgUtility: 'w-bg-border-interactive-more-contrast-dark-bg-hover', + textUtility: 'w-text-border-interactive-more-contrast-dark-bg-hover', + cssVariable: '--w-color-border-interactive-more-contrast-dark-bg-hover', + }, + 'border-furniture-more-contrast': { + value: 'var(--w-color-grey-400)', + bgUtility: 'w-bg-border-furniture-more-contrast', + textUtility: 'w-text-border-furniture-more-contrast', + cssVariable: '--w-color-border-furniture-more-contrast', + }, }, }, { diff --git a/client/src/tokens/colorVariables.test.js b/client/src/tokens/colorVariables.test.js index 650dda0a8927..b3e635dc4e5f 100644 --- a/client/src/tokens/colorVariables.test.js +++ b/client/src/tokens/colorVariables.test.js @@ -143,6 +143,10 @@ describe('generateColorVariables', () => { "--w-color-warning-50-hue": "calc(var(--w-color-warning-100-hue) - 2.3)", "--w-color-warning-50-lightness": "calc(var(--w-color-warning-100-lightness) + 41.8%)", "--w-color-warning-50-saturation": "calc(var(--w-color-warning-100-saturation) - 21.3%)", + "--w-color-warning-75": "hsl(var(--w-color-warning-75-hue) var(--w-color-warning-75-saturation) var(--w-color-warning-75-lightness))", + "--w-color-warning-75-hue": "calc(var(--w-color-warning-100-hue) + 0.7)", + "--w-color-warning-75-lightness": "calc(var(--w-color-warning-100-lightness) + 23.4%)", + "--w-color-warning-75-saturation": "calc(var(--w-color-warning-100-saturation) - 2.8%)", "--w-color-white": "hsl(var(--w-color-white-hue) var(--w-color-white-saturation) var(--w-color-white-lightness))", "--w-color-white-hue": "0", "--w-color-white-lightness": "100%", @@ -200,6 +204,11 @@ describe('generateThemeColorVariables', () => { "--w-color-border-field-hover": "var(--w-color-grey-200)", "--w-color-border-field-inactive": "var(--w-color-grey-150)", "--w-color-border-furniture": "var(--w-color-grey-100)", + "--w-color-border-furniture-more-contrast": "var(--w-color-grey-200)", + "--w-color-border-interactive-more-contrast": "var(--w-color-grey-500)", + "--w-color-border-interactive-more-contrast-dark-bg": "var(--w-color-grey-150)", + "--w-color-border-interactive-more-contrast-dark-bg-hover": "var(--w-color-white)", + "--w-color-border-interactive-more-contrast-hover": "var(--w-color-black)", "--w-color-box-shadow-md": "var(--w-color-black-25)", "--w-color-focus": "#00A885", "--w-color-icon-primary": "var(--w-color-primary)", @@ -252,6 +261,11 @@ describe('generateThemeColorVariables', () => { "--w-color-border-field-hover": "var(--w-color-grey-200)", "--w-color-border-field-inactive": "var(--w-color-grey-500)", "--w-color-border-furniture": "var(--w-color-grey-500)", + "--w-color-border-furniture-more-contrast": "var(--w-color-grey-400)", + "--w-color-border-interactive-more-contrast": "var(--w-color-grey-150)", + "--w-color-border-interactive-more-contrast-dark-bg": "var(--w-color-grey-150)", + "--w-color-border-interactive-more-contrast-dark-bg-hover": "var(--w-color-white)", + "--w-color-border-interactive-more-contrast-hover": "var(--w-color-white)", "--w-color-box-shadow-md": "var(--w-color-black-50)", "--w-color-focus": "#00A885", "--w-color-icon-primary": "var(--w-color-grey-150)", diff --git a/client/src/tokens/colors.js b/client/src/tokens/colors.js index 3fe6911b552d..df30f41a5b50 100644 --- a/client/src/tokens/colors.js +++ b/client/src/tokens/colors.js @@ -268,6 +268,16 @@ const staticColors = { usage: 'Background and icons for potentially dangerous states', contrastText: 'primary', }, + 75: { + hex: '#FDD074', + hsl: 'hsl(40.3, 97.2%, 72.4%)', + bgUtility: 'w-bg-warning-75', + textUtility: 'w-text-warning-75', + cssVariable: '--w-color-warning-75', + usage: + 'Background only, for potentially dangerous states, in enhanced-contrast theme', + contrastText: 'primary', + }, 50: { hex: '#FFF5D8', hsl: 'hsl(37.3 78.7% 90.8%)', diff --git a/client/tailwind.config.js b/client/tailwind.config.js index 558c7f6933f5..00fe062d2342 100644 --- a/client/tailwind.config.js +++ b/client/tailwind.config.js @@ -190,6 +190,13 @@ module.exports = { plugin(({ addVariant }) => { addVariant('expanded', '&[aria-expanded=true]'); }), + /** Support for increased contrast theme */ + plugin(({ addVariant }) => { + addVariant('more-contrast', [ + '.contrast-more &', + '@media (prefers-contrast: more) { .contrast-system & }', + ]); + }), ], corePlugins: { ...vanillaRTL.disabledCorePlugins, diff --git a/docs/releases/6.3.md b/docs/releases/6.3.md index 69722ed7821c..2bb2ca1a6ee2 100644 --- a/docs/releases/6.3.md +++ b/docs/releases/6.3.md @@ -25,6 +25,13 @@ The Wagtail dashboard design evolves towards providing more information and navi This feature was developed by Albina Starykova based on designs by Ben Enright. +### Enhanced contrast admin theme + +CMS users can now control the level of contrast of UI elements in the admin interface. +This new customization is designed for partially sighted users, complementing existing support for a dark theme and Windows Contrast Themes. +The new "More contrast" theming can be enabled in account preferences, or will otherwise be derived from operating system preferences. + +This feature was designed thanks to feedback from our blind and partially sighted users, and was developed by Albina Starykova based on design input from Victoria Ottah. ### Other features diff --git a/wagtail/admin/forms/account.py b/wagtail/admin/forms/account.py index 343f62ba68aa..9733595c3d57 100644 --- a/wagtail/admin/forms/account.py +++ b/wagtail/admin/forms/account.py @@ -140,4 +140,4 @@ class Meta: class ThemePreferencesForm(forms.ModelForm): class Meta: model = UserProfile - fields = ["theme", "density"] + fields = ["theme", "contrast", "density"] diff --git a/wagtail/admin/templates/wagtailadmin/pages/listing/_page_header_buttons.html b/wagtail/admin/templates/wagtailadmin/pages/listing/_page_header_buttons.html index 066b8884d3ac..9cb9beb4099f 100644 --- a/wagtail/admin/templates/wagtailadmin/pages/listing/_page_header_buttons.html +++ b/wagtail/admin/templates/wagtailadmin/pages/listing/_page_header_buttons.html @@ -2,7 +2,7 @@ {% trans "Actions" as title %}