Merge pull request #11588 from craftcms/a11y/cb-quick-fixes

Condition builder updates
craftcms · Jul 13, 2022 · 05f5f5b · 05f5f5b
2 parents 3c5a97d + 387c8a7
commit 05f5f5b
Show file tree

Hide file tree

Showing 12 changed files with 25 additions and 10 deletions.
diff --git a/CHANGELOG-WIP.md b/CHANGELOG-WIP.md
@@ -3,3 +3,6 @@
 ### Added
 - Added `craft\events\IndexKeywordsEvent`.
 - Added `craft\services\Search::EVENT_BEFORE_INDEX_KEYWORDS`. ([#11575](https://github.com/craftcms/cms/discussions/11575))
+
+### Changed
+- Improved condition builder accessibility. ([#11588](https://github.com/craftcms/cms/pull/11588))
diff --git a/src/base/conditions/BaseConditionRule.php b/src/base/conditions/BaseConditionRule.php
@@ -176,7 +176,7 @@ public function getHtml(): string
 
         return
             Html::beginTag('div', [
-                'class' => ['flex', 'flex-nowrap', 'flex-start'],
+                'class' => ['flex', 'flex-start'],
             ]) .
             (count($operators) > 1
                 ? (

diff --git a/src/base/conditions/BaseDateRangeConditionRule.php b/src/base/conditions/BaseDateRangeConditionRule.php
@@ -87,6 +87,7 @@ public function getConfig(): array
     protected function inputHtml(): string
     {
         return
+            Html::beginTag('div', ['class' => 'flex']) .
             Html::beginTag('div', ['class' => ['flex', 'flex-nowrap']]) .
             Html::label(Craft::t('app', 'From'), 'start-date-date') .
             Html::tag('div',
@@ -96,6 +97,8 @@ protected function inputHtml(): string
                     'value' => $this->getStartDate(),
                 ])
             ) .
+            Html::endTag('div') .
+            Html::beginTag('div', ['class' => ['flex', 'flex-nowrap']]) .
             Html::label(Craft::t('app', 'To'), 'end-date-date') .
             Html::tag('div',
                 Cp::dateHtml([
@@ -104,6 +107,7 @@ protected function inputHtml(): string
                     'value' => $this->getEndDate(),
                 ])
             ) .
+            Html::endTag('div') .
             Html::endTag('div');
     }
 

diff --git a/src/base/conditions/BaseMultiSelectConditionRule.php b/src/base/conditions/BaseMultiSelectConditionRule.php
@@ -102,7 +102,7 @@ protected function inputHtml(): string
             Html::hiddenLabel($this->getLabel(), $multiSelectId) .
             Cp::multiSelectHtml([
                 'id' => $multiSelectId,
-                'class' => 'selectize fullwidth',
+                'class' => 'selectize flex-grow',
                 'name' => 'values',
                 'values' => $this->_values,
                 'options' => $this->options(),

diff --git a/src/base/conditions/BaseTextConditionRule.php b/src/base/conditions/BaseTextConditionRule.php
@@ -74,7 +74,7 @@ protected function inputHtml(): string
                 'name' => 'value',
                 'value' => $this->value,
                 'autocomplete' => false,
-                'class' => 'fullwidth',
+                'class' => 'flex-grow flex-shrink',
             ]);
     }
 

diff --git a/src/elements/conditions/RelatedToConditionRule.php b/src/elements/conditions/RelatedToConditionRule.php
@@ -80,7 +80,7 @@ protected function inputHtml(): string
             ]) .
             parent::inputHtml(),
             [
-                'class' => ['flex', 'flex-nowrap'],
+                'class' => ['flex'],
             ]
         );
     }

diff --git a/src/web/assets/cp/dist/cp.js b/src/web/assets/cp/dist/cp.js
diff --git a/src/web/assets/cp/dist/cp.js.map b/src/web/assets/cp/dist/cp.js.map
diff --git a/src/web/assets/cp/dist/css/cp.css b/src/web/assets/cp/dist/css/cp.css
diff --git a/src/web/assets/cp/dist/css/cp.css.map b/src/web/assets/cp/dist/css/cp.css.map
diff --git a/src/web/assets/cp/src/css/_main.scss b/src/web/assets/cp/src/css/_main.scss
@@ -3432,6 +3432,15 @@ ul.tree,
       margin-top: 6px;
       display: block;
     }
+
+    .selectize {
+      min-width: 100px;
+    }
+
+    .text.fullwidth {
+      min-width: 100px;
+      max-width: 100%;
+    }
   }
 }
 

diff --git a/src/web/assets/cp/src/js/BaseElementIndex.js b/src/web/assets/cp/src/js/BaseElementIndex.js
@@ -2546,7 +2546,6 @@ const FilterHud = Garnish.HUD.extend({
         this.$hud.find('.condition-container').on('htmx:load', () => {
           this.setReady();
         });
-
         this.setFocus();
       })
       .catch(() => {
@@ -2575,7 +2574,7 @@ const FilterHud = Garnish.HUD.extend({
   },
 
   setFocus: function () {
-    this.$main.find('.condition-footer .add').focus();
+    Garnish.setFocusWithin(this.$main);
   },
 
   clear: function () {
-Original file line number
+Diff line change
@@ Expand Up / @@ -80,7 +80,7 @@ protected function inputHtml(): string @@
                 ]) .
                 parent::inputHtml(),
                 [
-                    'class' => ['flex', 'flex-nowrap'],
+                    'class' => ['flex'],
                 ]
             );
         }
@@ Expand Down @@