Condition builder updates

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))

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
                 ? (

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');
     }
 

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(),

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',
             ]);
     }
 

src/elements/conditions/RelatedToConditionRule.php

@@ -80,7 +80,7 @@ protected function inputHtml(): string
             ]) .
             parent::inputHtml(),
             [
-                'class' => ['flex', 'flex-nowrap'],
+                'class' => ['flex'],
             ]
         );
     }

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%;
+    }
   }
 }
 

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 () {