main - c345614 fix(aria/combobox): several small fixes (#32202)

Author: wagnermaciel

docs-content/examples-highlighted/aria/combobox/combobox-examples-css.html

@@ -1,12 +1,16 @@
 <span class="hljs-selector-class">.example-combobox-container</span> {
   <span class="hljs-attribute">position</span>: relative;
-  <span class="hljs-attribute">width</span>: <span class="hljs-number">300px</span>;
+  <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>;
   <span class="hljs-attribute">display</span>: flex;
   <span class="hljs-attribute">flex-direction</span>: column;
   <span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid <span class="hljs-built_in">var</span>(--mat-sys-outline);
   <span class="hljs-attribute">border-radius</span>: <span class="hljs-built_in">var</span>(--mat-sys-corner-extra-small);
 }
 
+<span class="hljs-selector-class">.example-combobox-container</span><span class="hljs-selector-pseudo">:has</span>(<span class="hljs-selector-attr">[readonly=<span class="hljs-string">&#x27;true&#x27;</span>]</span>) {
+  <span class="hljs-attribute">width</span>: <span class="hljs-number">200px</span>;
+}
+
 <span class="hljs-selector-class">.example-combobox-input-container</span> {
   <span class="hljs-attribute">display</span>: flex;
   <span class="hljs-attribute">position</span>: relative;
@@ -78,6 +82,7 @@
   <span class="hljs-attribute">overflow</span>: auto;
   <span class="hljs-attribute">max-height</span>: <span class="hljs-number">10rem</span>;
   <span class="hljs-attribute">padding</span>: <span class="hljs-number">0.5rem</span>;
+  <span class="hljs-attribute">gap</span>: <span class="hljs-number">4px</span>;
 }
 
 <span class="hljs-selector-class">.example-option</span> {
@@ -89,6 +94,26 @@
   <span class="hljs-attribute">flex-shrink</span>: <span class="hljs-number">0</span>;
   <span class="hljs-attribute">align-items</span>: center;
   <span class="hljs-attribute">justify-content</span>: space-between;
+  <span class="hljs-attribute">gap</span>: <span class="hljs-number">1rem</span>;
+}
+
+<span class="hljs-selector-class">.example-option-text</span> {
+  <span class="hljs-attribute">flex</span>: <span class="hljs-number">1</span>;
+}
+
+<span class="hljs-selector-class">.example-checkbox-blank-icon</span>,
+<span class="hljs-selector-class">.example-option</span><span class="hljs-selector-attr">[aria-selected=<span class="hljs-string">&#x27;true&#x27;</span>]</span> <span class="hljs-selector-class">.example-checkbox-filled-icon</span> {
+  <span class="hljs-attribute">display</span>: flex;
+  <span class="hljs-attribute">align-items</span>: center;
+}
+
+<span class="hljs-selector-class">.example-checkbox-filled-icon</span>,
+<span class="hljs-selector-class">.example-option</span><span class="hljs-selector-attr">[aria-selected=<span class="hljs-string">&#x27;true&#x27;</span>]</span> <span class="hljs-selector-class">.example-checkbox-blank-icon</span> {
+  <span class="hljs-attribute">display</span>: none;
+}
+
+<span class="hljs-selector-class">.example-checkbox-blank-icon</span> {
+  <span class="hljs-attribute">opacity</span>: <span class="hljs-number">0.6</span>;
 }
 
 <span class="hljs-selector-class">.example-selected-icon</span> {
@@ -99,26 +124,17 @@
   <span class="hljs-attribute">visibility</span>: visible;
 }
 
-<span class="hljs-selector-class">.example-option</span><span class="hljs-selector-attr">[inert]</span>,
-<span class="hljs-selector-class">.example-tree-item</span><span class="hljs-selector-attr">[inert]</span> {
-  <span class="hljs-attribute">display</span>: none;
+<span class="hljs-selector-class">.example-option</span><span class="hljs-selector-attr">[aria-selected=<span class="hljs-string">&#x27;true&#x27;</span>]</span> {
+  <span class="hljs-attribute">color</span>: <span class="hljs-built_in">var</span>(--mat-sys-primary);
+  <span class="hljs-attribute">background-color</span>: <span class="hljs-built_in">color-mix</span>(in srgb, <span class="hljs-built_in">var</span>(--mat-sys-primary) <span class="hljs-number">10%</span>, transparent);
+}
+
+<span class="hljs-selector-class">.example-option</span><span class="hljs-selector-pseudo">:hover</span> {
+  <span class="hljs-attribute">background-color</span>: <span class="hljs-built_in">color-mix</span>(in srgb, <span class="hljs-built_in">var</span>(--mat-sys-on-surface) <span class="hljs-number">10%</span>, transparent);
 }
 
 <span class="hljs-selector-class">.example-combobox-container</span><span class="hljs-selector-pseudo">:focus-within</span> <span class="hljs-selector-attr">[data-active=<span class="hljs-string">&#x27;true&#x27;</span>]</span> {
-  <span class="hljs-attribute">background</span>: <span class="hljs-built_in">color-mix</span>(
-    in srgb,
-    <span class="hljs-built_in">var</span>(--mat-sys-on-surface) <span class="hljs-built_in">calc</span>(<span class="hljs-built_in">var</span>(--mat-sys-focus-state-layer-opacity) * <span class="hljs-number">100%</span>),
-    transparent
-  );
-}
-
-<span class="hljs-selector-class">.example-combobox-container</span><span class="hljs-selector-pseudo">:focus-within</span> <span class="hljs-selector-attr">[data-active=<span class="hljs-string">&#x27;true&#x27;</span>]</span><span class="hljs-selector-attr">[aria-selected=<span class="hljs-string">&#x27;true&#x27;</span>]</span> {
-  <span class="hljs-attribute">background</span>: <span class="hljs-built_in">color-mix</span>(
-    in srgb,
-    <span class="hljs-built_in">var</span>(--mat-sys-primary) <span class="hljs-built_in">calc</span>(<span class="hljs-built_in">var</span>(--mat-sys-pressed-state-layer-opacity) * <span class="hljs-number">100%</span>),
-    transparent
-  );
-  <span class="hljs-attribute">color</span>: <span class="hljs-built_in">var</span>(--mat-sys-primary);
+  <span class="hljs-attribute">outline</span>: <span class="hljs-number">2px</span> solid <span class="hljs-built_in">color-mix</span>(in srgb, <span class="hljs-built_in">var</span>(--mat-sys-primary) <span class="hljs-number">80%</span>, transparent);
 }
 
 <span class="hljs-selector-class">.example-tree</span> {

docs-content/examples-highlighted/aria/combobox/combobox-readonly-multiselect/combobox-readonly-multiselect-example-html.html

@@ -0,0 +1,28 @@
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">ngCombobox</span> #<span class="hljs-attr">combobox</span>=<span class="hljs-string">&quot;ngCombobox&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-combobox-container&quot;</span> [<span class="hljs-attr">readonly</span>]=<span class="hljs-string">&quot;true&quot;</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-combobox-input-container&quot;</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">input</span>
+      <span class="hljs-attr">ngComboboxInput</span>
+      <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-combobox-input&quot;</span>
+      <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;Search...&quot;</span>
+      [(<span class="hljs-attr">value</span>)]=<span class="hljs-string">&quot;searchString&quot;</span>
+    /&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;material-symbols-outlined example-icon example-arrow-icon&quot;</span>&gt;</span>arrow_drop_down<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+
+  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">popover</span>=<span class="hljs-string">&quot;manual&quot;</span> #<span class="hljs-attr">popover</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-popover&quot;</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">ng-template</span> <span class="hljs-attr">ngComboboxPopupContainer</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">ngListbox</span> [<span class="hljs-attr">multi</span>]=<span class="hljs-string">&quot;true&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-listbox&quot;</span>&gt;</span>
+        @for (option of options(); track option) {
+          <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-option&quot;</span> <span class="hljs-attr">ngOption</span> [<span class="hljs-attr">value</span>]=<span class="hljs-string">&quot;option&quot;</span> [<span class="hljs-attr">label</span>]=<span class="hljs-string">&quot;option&quot;</span>&gt;</span>
+            <span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>{{option}}<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
+            <span class="hljs-tag">&lt;<span class="hljs-name">span</span>
+              <span class="hljs-attr">aria-hidden</span>=<span class="hljs-string">&quot;true&quot;</span>
+              <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;material-symbols-outlined example-icon example-selected-icon&quot;</span>
+              &gt;</span>check&lt;/span
+            &gt;
+          <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+        }
+      <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+    <span class="hljs-tag">&lt;/<span class="hljs-name">ng-template</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>

docs-content/examples-highlighted/aria/combobox/combobox-readonly-multiselect/combobox-readonly-multiselect-example-ts.html

@@ -0,0 +1,78 @@
+<span class="hljs-comment">/**
+ * <span class="hljs-doctag">@license</span>
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */</span>
+
+<span class="hljs-keyword">import</span> {
+  <span class="hljs-title class_">Combobox</span>,
+  <span class="hljs-title class_">ComboboxInput</span>,
+  <span class="hljs-title class_">ComboboxPopup</span>,
+  <span class="hljs-title class_">ComboboxPopupContainer</span>,
+} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/aria/combobox&#x27;</span>;
+<span class="hljs-keyword">import</span> {<span class="hljs-title class_">Listbox</span>, <span class="hljs-title class_">Option</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/aria/listbox&#x27;</span>;
+<span class="hljs-keyword">import</span> {
+  afterRenderEffect,
+  <span class="hljs-title class_">ChangeDetectionStrategy</span>,
+  <span class="hljs-title class_">Component</span>,
+  <span class="hljs-title class_">ElementRef</span>,
+  signal,
+  viewChild,
+} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/core&#x27;</span>;
+<span class="hljs-keyword">import</span> {<span class="hljs-title class_">FormsModule</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/forms&#x27;</span>;
+
+<span class="hljs-comment">/** <span class="hljs-doctag">@title</span> Readonly multiselectable combobox. */</span>
+<span class="hljs-meta">@Component</span>({
+  <span class="hljs-attr">selector</span>: <span class="hljs-string">&#x27;combobox-readonly-multiselect-example&#x27;</span>,
+  <span class="hljs-attr">templateUrl</span>: <span class="hljs-string">&#x27;combobox-readonly-multiselect-example.html&#x27;</span>,
+  <span class="hljs-attr">styleUrl</span>: <span class="hljs-string">&#x27;../combobox-examples.css&#x27;</span>,
+  <span class="hljs-attr">imports</span>: [
+    <span class="hljs-title class_">Combobox</span>,
+    <span class="hljs-title class_">ComboboxInput</span>,
+    <span class="hljs-title class_">ComboboxPopup</span>,
+    <span class="hljs-title class_">ComboboxPopupContainer</span>,
+    <span class="hljs-title class_">Listbox</span>,
+    <span class="hljs-title class_">Option</span>,
+    <span class="hljs-title class_">FormsModule</span>,
+  ],
+  <span class="hljs-attr">changeDetection</span>: <span class="hljs-title class_">ChangeDetectionStrategy</span>.<span class="hljs-property">OnPush</span>,
+})
+<span class="hljs-keyword">export</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">ComboboxReadonlyMultiselectExample</span> {
+  popover = viewChild&lt;<span class="hljs-title class_">ElementRef</span>&gt;(<span class="hljs-string">&#x27;popover&#x27;</span>);
+  listbox = viewChild&lt;<span class="hljs-title class_">Listbox</span>&lt;<span class="hljs-built_in">any</span>&gt;&gt;(<span class="hljs-title class_">Listbox</span>);
+  combobox = viewChild&lt;<span class="hljs-title class_">Combobox</span>&lt;<span class="hljs-built_in">any</span>&gt;&gt;(<span class="hljs-title class_">Combobox</span>);
+
+  options = <span class="hljs-function">() =&gt;</span> states;
+  searchString = <span class="hljs-title function_">signal</span>(<span class="hljs-string">&#x27;&#x27;</span>);
+
+  <span class="hljs-title function_">constructor</span>(<span class="hljs-params"></span>) {
+    <span class="hljs-title function_">afterRenderEffect</span>(<span class="hljs-function">() =&gt;</span> {
+      <span class="hljs-keyword">const</span> popover = <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">popover</span>()!;
+      <span class="hljs-keyword">const</span> combobox = <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">combobox</span>()!;
+      combobox.<span class="hljs-property">_pattern</span>.<span class="hljs-title function_">expanded</span>() ? <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">showPopover</span>() : popover.<span class="hljs-property">nativeElement</span>.<span class="hljs-title function_">hidePopover</span>();
+
+      <span class="hljs-comment">// TODO(wagnermaciel): Make this easier for developers to do.</span>
+      <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">listbox</span>()?.<span class="hljs-property">_pattern</span>.<span class="hljs-property">inputs</span>.<span class="hljs-title function_">activeItem</span>()?.<span class="hljs-title function_">element</span>()?.<span class="hljs-title function_">scrollIntoView</span>({<span class="hljs-attr">block</span>: <span class="hljs-string">&#x27;nearest&#x27;</span>});
+    });
+  }
+
+  <span class="hljs-title function_">showPopover</span>(<span class="hljs-params"></span>) {
+    <span class="hljs-keyword">const</span> popover = <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">popover</span>()!;
+    <span class="hljs-keyword">const</span> combobox = <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">combobox</span>()!;
+
+    <span class="hljs-keyword">const</span> comboboxRect = combobox.<span class="hljs-property">_pattern</span>.<span class="hljs-property">inputs</span>.<span class="hljs-title function_">inputEl</span>()?.<span class="hljs-title function_">getBoundingClientRect</span>();
+    <span class="hljs-keyword">const</span> popoverEl = popover.<span class="hljs-property">nativeElement</span>;
+
+    <span class="hljs-keyword">if</span> (comboboxRect) {
+      popoverEl.<span class="hljs-property">style</span>.<span class="hljs-property">width</span> = <span class="hljs-string">`<span class="hljs-subst">${comboboxRect.width}</span>px`</span>;
+      popoverEl.<span class="hljs-property">style</span>.<span class="hljs-property">top</span> = <span class="hljs-string">`<span class="hljs-subst">${comboboxRect.bottom + <span class="hljs-number">4</span>}</span>px`</span>;
+      popoverEl.<span class="hljs-property">style</span>.<span class="hljs-property">left</span> = <span class="hljs-string">`<span class="hljs-subst">${comboboxRect.left - <span class="hljs-number">1</span>}</span>px`</span>;
+    }
+
+    popover.<span class="hljs-property">nativeElement</span>.<span class="hljs-title function_">showPopover</span>();
+  }
+}
+
+<span class="hljs-keyword">const</span> states = [<span class="hljs-string">&#x27;Option 1&#x27;</span>, <span class="hljs-string">&#x27;Option 2&#x27;</span>, <span class="hljs-string">&#x27;Option 3&#x27;</span>];

docs-content/examples-highlighted/aria/combobox/combobox-tree-auto-select/combobox-tree-auto-select-example-html.html

@@ -34,6 +34,7 @@
       [<span class="hljs-attr">parent</span>]=<span class="hljs-string">&quot;parent&quot;</span>
       [<span class="hljs-attr">value</span>]=<span class="hljs-string">&quot;node.name&quot;</span>
       [<span class="hljs-attr">label</span>]=<span class="hljs-string">&quot;node.name&quot;</span>
+      [<span class="hljs-attr">selectable</span>]=<span class="hljs-string">&quot;!node.children&quot;</span>
       #<span class="hljs-attr">treeItem</span>=<span class="hljs-string">&quot;ngTreeItem&quot;</span>
       <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-tree-item example-selectable example-stateful&quot;</span>
     &gt;</span>

docs-content/examples-highlighted/aria/combobox/combobox-tree-highlight/combobox-tree-highlight-example-html.html

@@ -34,6 +34,7 @@
       [<span class="hljs-attr">parent</span>]=<span class="hljs-string">&quot;parent&quot;</span>
       [<span class="hljs-attr">value</span>]=<span class="hljs-string">&quot;node.name&quot;</span>
       [<span class="hljs-attr">label</span>]=<span class="hljs-string">&quot;node.name&quot;</span>
+      [<span class="hljs-attr">selectable</span>]=<span class="hljs-string">&quot;!node.children&quot;</span>
       #<span class="hljs-attr">treeItem</span>=<span class="hljs-string">&quot;ngTreeItem&quot;</span>
       <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-tree-item example-selectable example-stateful&quot;</span>
     &gt;</span>

docs-content/examples-highlighted/aria/combobox/combobox-tree-manual/combobox-tree-manual-example-html.html

@@ -34,6 +34,7 @@
       [<span class="hljs-attr">parent</span>]=<span class="hljs-string">&quot;parent&quot;</span>
       [<span class="hljs-attr">value</span>]=<span class="hljs-string">&quot;node.name&quot;</span>
       [<span class="hljs-attr">label</span>]=<span class="hljs-string">&quot;node.name&quot;</span>
+      [<span class="hljs-attr">selectable</span>]=<span class="hljs-string">&quot;!node.children&quot;</span>
       #<span class="hljs-attr">treeItem</span>=<span class="hljs-string">&quot;ngTreeItem&quot;</span>
       <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-tree-item example-selectable example-stateful&quot;</span>
     &gt;</span>