Merge pull request #14251 from craftcms/feature/acc-342-reduce-autofo…

…cus-accessibility-preference

Add "Disable autofocus" accessibility preference to remove search autofocus on index pages

CHANGELOG-WIP.md

@@ -42,6 +42,7 @@
 - User sessions are now treated as elevated immediately after login, per the `elevatedSessionDuration` config setting.
 
 ### Accessibility
+- Added the “Disable autofocus” user accessibility preference. ([#12921](https://github.com/craftcms/cms/discussions/12921))
 - Improved source item navigation for screen readers. ([#12054](https://github.com/craftcms/cms/pull/12054))
 - Content tab menus are now implemented as disclosure menus. ([#12963](https://github.com/craftcms/cms/pull/12963))
 - Element selection modals now show checkboxes for selectable elements.

CHANGELOG.md

@@ -5,6 +5,7 @@
 - Sites’ Language settings can now be set to environment variables. ([#14235](https://github.com/craftcms/cms/pull/14235), [#14135](https://github.com/craftcms/cms/discussions/14135))
 - Card views are once again multi-column on wider viewports. ([#14202](https://github.com/craftcms/cms/discussions/14202))
 - Added the “Show cards in a grid” Matrix field setting. ([#14202](https://github.com/craftcms/cms/discussions/14202))
+- Added the “Disable autofocus” user accessibility preference. ([#12921](https://github.com/craftcms/cms/discussions/12921))
 - Improved the accessibility of the global nav. ([#14240](https://github.com/craftcms/cms/pull/14240))
 - Improved the accessibility of layout tabs. ([#14215](https://github.com/craftcms/cms/pull/14215))
 - Improved the accessibility of overflow tab menus. ([#14214](https://github.com/craftcms/cms/pull/14214))

src/config/GeneralConfig.php

@@ -89,6 +89,7 @@ class GeneralConfig extends BaseConfig
         'alwaysShowFocusRings' => false,
         'useShapes' => false,
         'underlineLinks' => false,
+        'disableAutofocus' => false,
         'notificationDuration' => 5000,
     ];
 
@@ -3266,6 +3267,7 @@ public function init(): void
      * - `alwaysShowFocusRings` - Whether focus rings should always be shown when an element has focus.
      * - `useShapes` – Whether shapes should be used to represent statuses.
      * - `underlineLinks` – Whether links should be underlined.
+     * - `disableAutofocus` – Whether search inputs should be focused on page load.
      * - `notificationDuration` – How long notifications should be shown before they disappear automatically (in
      *   milliseconds). Set to `0` to show them indefinitely.
      *

src/controllers/UsersController.php

@@ -1113,6 +1113,7 @@ public function actionSavePreferences(): Response
             'alwaysShowFocusRings' => (bool)$this->request->getBodyParam('alwaysShowFocusRings', $user->getPreference('alwaysShowFocusRings')),
             'useShapes' => (bool)$this->request->getBodyParam('useShapes', $user->getPreference('useShapes')),
             'underlineLinks' => (bool)$this->request->getBodyParam('underlineLinks', $user->getPreference('underlineLinks')),
+            'disableAutofocus' => $this->request->getBodyParam('disableAutofocus', $user->getPreference('disableAutofocus')),
             'notificationDuration' => $this->request->getBodyParam('notificationDuration', $user->getPreference('notificationDuration')),
         ];
 

src/elements/User.php

@@ -2028,6 +2028,17 @@ public function getPreferredLocale(): ?string
         return $this->_validateLocale($this->getPreference('locale'), true);
     }
 
+    /**
+     * Returns whether the user prefers to have form fields autofocused on page load.
+     *
+     * @return bool
+     * @since 5.0.0
+     */
+    public function getAutofocusPreferred(): bool
+    {
+        return !$this->getPreference('disableAutofocus');
+    }
+
     /**
      * Validates and returns a locale ID.
      *

src/fieldlayoutelements/TextField.php

@@ -129,6 +129,9 @@ public function fields(): array
      */
     protected function inputHtml(?ElementInterface $element = null, bool $static = false): ?string
     {
+        if ($this->attribute === 'title') {
+            $test = true;
+        }
         return Craft::$app->getView()->renderTemplate('_includes/forms/text.twig', [
             'type' => $this->inputType ?? $this->type,
             'autocomplete' => $this->autocomplete,

src/templates/_includes/forms/autosuggest.twig

@@ -60,7 +60,7 @@ new Vue({
                 name: (name ?? '')|namespaceInputName,
                 size: size ?? '',
                 maxlength: maxlength ?? '',
-                autofocus: autofocus ?? false,
+                autofocus: (autofocus ?? false) and currentUser.getAutofocusPreferred() and not craft.app.request.isMobileBrowser(true),
                 disabled: disabled ?? false,
                 title: title ?? '',
                 placeholder: placeholder ?? '',

src/templates/_includes/forms/text.twig

@@ -17,7 +17,7 @@
     name: name ?? false,
     value: value ?? false,
     maxlength: maxlength ?? false,
-    autofocus: (autofocus ?? false) and not craft.app.request.isMobileBrowser(true),
+    autofocus: (autofocus ?? false) and currentUser.getAutofocusPreferred() and not craft.app.request.isMobileBrowser(true),
     autocomplete: autocomplete is boolean ? (autocomplete ? 'on' : 'off') : autocomplete,
     autocorrect: (autocorrect ?? true) ? false : 'off',
     autocapitalize: (autocapitalize ?? true) ? false : 'none',

src/templates/users/_preferences.twig

@@ -61,6 +61,18 @@
     ],
   }) }}
 
+  {{ forms.checkboxGroupField({
+    label: 'General Settings'|t('app'),
+    options: [
+      {
+        label: 'Disable autofocus'|t('app'),
+        name: 'disableAutofocus',
+        id: 'disableAutofocus',
+        checked: currentUser.getPreference('disableAutofocus') ?? a11yDefaults['disableAutofocus'] ?? false,
+      },
+    ],
+  }) }}
+
   {{ forms.selectField({
     label: 'Notification Duration'|t('app'),
     instructions: 'How long notifications should be shown before they disappear automatically.'|t('app'),

src/translations/en/app.php

@@ -537,6 +537,7 @@
     'Device type' => 'Device type',
     'Dimensions' => 'Dimensions',
     'Directories cannot be deleted while moving assets.' => 'Directories cannot be deleted while moving assets.',
+    'Disable autofocus' => 'Disable autofocus',
     'Disable focal point' => 'Disable focal point',
     'Disable' => 'Disable',
     'Disabled' => 'Disabled',

src/web/assets/cp/CpAsset.php

@@ -504,6 +504,7 @@ private function _craftData(): array
             'canAccessQueueManager' => $userSession->checkPermission('utility:queue-manager'),
             'dataAttributes' => Html::$dataAttributes,
             'defaultIndexCriteria' => [],
+            'disableAutofocus' => (bool)($currentUser->getPreference('disableAutofocus') ?? false),
             'editableCategoryGroups' => $upToDate ? $this->_editableCategoryGroups() : [],
             'edition' => Craft::$app->getEdition(),
             'elementTypeNames' => $elementTypeNames,

src/web/assets/cp/src/js/BaseElementIndex.js

@@ -423,7 +423,8 @@ Craft.BaseElementIndex = Garnish.Base.extend(
       // Autofocus the Search box, unless this is an embedded index
       if (
         this.settings.context !== 'embedded-index' &&
-        !Garnish.isMobileBrowser(true)
+        !Garnish.isMobileBrowser(true) &&
+        Craft.disableAutofocus === false
       ) {
         this.$search.trigger('focus');
       }