Merge pull request #16293 from craftcms/a11y/field-toggles

Field toggle accessibility

CHANGELOG-WIP.md

@@ -13,6 +13,8 @@
 - Improved the accessibility of Selectize inputs. ([#16110](https://github.com/craftcms/cms/pull/16110))
 - Improved the accessibility of the image rotation control within the Image Editor. ([#16218](https://github.com/craftcms/cms/pull/16218))
 - Improved the accessibility of action menus on the Plugins index page.
+- Improved the accessibility of “More” and “Advanced” toggle triggers. ([#16293]](https://github.com/craftcms/cms/pull/16293))
+- Improved the accessibility of the Craft Support widget. ([#16293]](https://github.com/craftcms/cms/pull/16293))
 
 ### Administration
 - Added the “Show the ‘URL Suffix’ field” setting to Link fields. ([#15813](https://github.com/craftcms/cms/discussions/15813))

src/fields/Link.php

@@ -393,7 +393,7 @@ public function getSettingsHtml(): ?string
                 'on' => $this->showTargetField,
             ]) .
             Html::tag('hr') .
-            Html::a(Craft::t('app', 'Advanced'), options: [
+            Html::button(Craft::t('app', 'Advanced'), options: [
                 'class' => 'fieldtoggle',
                 'data' => ['target' => 'advanced'],
             ]) .

src/templates/_components/fieldtypes/elementfieldsettings.twig

@@ -134,7 +134,7 @@
     {% block advancedSettings %}
         <hr>
 
-        <a class="fieldtoggle" data-target="advanced">{{ "Advanced"|t('app') }}</a>
+        <button type="button" class="fieldtoggle" data-target="advanced">{{ "Advanced"|t('app') }}</button>
         <div id="advanced" class="hidden">
 
             {{ forms.lightswitchField({

src/templates/_components/widgets/CraftSupport/body.twig

@@ -104,7 +104,7 @@
                     value: email
                 }) }}
 
-                <a class="fieldtoggle" data-target="{{ idPrefix }}-support-more">{{ "More"|t('app') }}</a>
+                <button type="button" class="fieldtoggle" data-target="{{ idPrefix }}-support-more">{{ "More"|t('app') }}</button>
 
                 <div id="{{ idPrefix }}-support-more" class="cs-support-more hidden">
                     <fieldset>

src/web/assets/cp/src/css/_main.scss

@@ -1101,18 +1101,21 @@ button.toggle {
 }
 
 .toggle::before,
+button.fieldtoggle::before,
 a.fieldtoggle::before {
   @include mixins.angle(right);
   transition: transform linear 100ms;
 }
 
 .toggle.expanded::before,
+button.fieldtoggle.expanded::before,
 a.fieldtoggle.expanded::before,
 .sidebar nav li.expanded > .toggle::before,
 .structure li:not(.collapsed) > .row > .toggle::before {
   transform: rotate(45deg) !important;
 }
 
+button.fieldtoggle,
 a.fieldtoggle {
   display: block;
   position: relative;
@@ -1123,6 +1126,11 @@ a.fieldtoggle {
   text-decoration: none;
 }
 
+button.fieldtoggle {
+  cursor: pointer;
+}
+
+button.fieldtoggle::before,
 a.fieldtoggle::before {
   display: block;
   position: absolute;

src/web/assets/cp/src/js/FieldToggle.js

@@ -46,8 +46,18 @@ Craft.FieldToggle = Garnish.Base.extend({
     this.findTargets();
 
     switch (this.type) {
-      case 'link':
-        this.addListener(this.$toggle, 'click', 'onToggleChange');
+      case 'button':
+        if (this._isButtonToggle()) {
+          if (!this._$target.attr('id')) {
+            this._$target.attr(
+              'id',
+              `toggle-target-${Math.floor(Math.random() * 1000000)}`
+            );
+          }
+          this.$toggle.attr('aria-controls', this._$target.attr('id'));
+          this._updateButtonExpanded();
+        }
+        this.addListener(this.$toggle, 'activate', 'onToggleChange');
         break;
       case 'fieldset':
         this.addListener(
@@ -71,7 +81,7 @@ Craft.FieldToggle = Garnish.Base.extend({
   },
 
   getType: function () {
-    let nodeName = this.$toggle.prop('nodeName');
+    let nodeName = this._toggleNodeName();
     if (
       (nodeName === 'INPUT' && this.$toggle.attr('type') === 'checkbox') ||
       this.$toggle.attr('role') === 'checkbox' ||
@@ -86,8 +96,9 @@ Craft.FieldToggle = Garnish.Base.extend({
           return 'booleanMenu';
         }
         return 'select';
+      case 'BUTTON':
       case 'A':
-        return 'link';
+        return 'button';
       default:
         return 'fieldset';
     }
@@ -152,10 +163,8 @@ Craft.FieldToggle = Garnish.Base.extend({
     } else {
       this.findTargets();
 
-      if (this.type === 'link') {
-        this.onToggleChange._show =
-          this.$toggle.hasClass('collapsed') ||
-          !this.$toggle.hasClass('expanded');
+      if (this.type === 'button') {
+        this.onToggleChange._show = this._buttonIsCollapsed();
       } else if (this.type === 'checkbox' && this.targetPrefix !== null) {
         this.onToggleChange._show = this.$toggle.prop('checked');
       } else {
@@ -183,9 +192,12 @@ Craft.FieldToggle = Garnish.Base.extend({
       $target.removeClass('hidden');
 
       if (this.type !== 'select' && this.type !== 'fieldset') {
-        if (this.type === 'link') {
+        if (this.type === 'button') {
           this.$toggle.removeClass('collapsed');
           this.$toggle.addClass('expanded');
+          if (this._isButtonToggle()) {
+            this._updateButtonExpanded();
+          }
         }
 
         for (let i = 0; i < $target.length; i++) {
@@ -229,9 +241,12 @@ Craft.FieldToggle = Garnish.Base.extend({
       if (this.type === 'select' || this.type === 'fieldset') {
         $target.addClass('hidden');
       } else {
-        if (this.type === 'link') {
+        if (this.type === 'button') {
           this.$toggle.removeClass('expanded');
           this.$toggle.addClass('collapsed');
+          if (this._isButtonToggle()) {
+            this._updateButtonExpanded();
+          }
         }
 
         for (let i = 0; i < $target.length; i++) {
@@ -254,6 +269,27 @@ Craft.FieldToggle = Garnish.Base.extend({
     }
   },
 
+  _toggleNodeName: function () {
+    return this.$toggle.prop('nodeName');
+  },
+
+  _isButtonToggle: function () {
+    return this._toggleNodeName() === 'BUTTON';
+  },
+
+  _buttonIsCollapsed: function () {
+    return (
+      this.$toggle.hasClass('collapsed') || !this.$toggle.hasClass('expanded')
+    );
+  },
+
+  _updateButtonExpanded() {
+    this.$toggle.attr(
+      'aria-expanded',
+      this._buttonIsCollapsed() ? 'false' : 'true'
+    );
+  },
+
   destroy: function () {
     this.$toggle.removeData('fieldtoggle');
     this.base();