feat(aria/combobox): adds disabled combobox example to dev-app

src/aria/combobox/combobox.ts

@@ -37,6 +37,7 @@ import {toSignal} from '@angular/core/rxjs-interop';
     },
   ],
   host: {
+    '[attr.aria-disabled]': 'disabled()',
     '[attr.data-expanded]': 'pattern.expanded()',
     '(input)': 'pattern.onInput($event)',
     '(keydown)': 'pattern.onKeydown($event)',
@@ -119,6 +120,7 @@ export class Combobox<V> {
     '[attr.aria-controls]': 'combobox.pattern.popupId()',
     '[attr.aria-haspopup]': 'combobox.pattern.hasPopup()',
     '[attr.aria-autocomplete]': 'combobox.pattern.autocomplete()',
+    '[disabled]': 'combobox.disabled()',
   },
 })
 export class ComboboxInput {

src/components-examples/aria/combobox/combobox-disabled/combobox-disabled-example.html

@@ -0,0 +1,17 @@
+<div ngCombobox #combobox="ngCombobox" [disabled]="true" class="example-combobox-container">
+  <div class="example-combobox-input-container">
+    <span class="material-symbols-outlined example-icon example-search-icon" aria-hidden="true">search</span>
+    <input
+      ngComboboxInput
+      placeholder="Search is disabled"
+      aria-label="Search is disabled"
+      [(value)]="searchString"
+      class="example-combobox-input"
+    />
+  </div>
+
+  <div popover="manual" #popover class="example-popover">
+    <ng-template ngComboboxPopupContainer>
+    </ng-template>
+  </div>
+</div>

src/components-examples/aria/combobox/combobox-disabled/combobox-disabled.example.ts

@@ -0,0 +1,21 @@
+/**
+ * @license
+ * 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
+ */
+
+import {Combobox, ComboboxInput, ComboboxPopupContainer} from '@angular/aria/combobox';
+import {Component, signal} from '@angular/core';
+
+/** @title Combobox disabled example. */
+@Component({
+  selector: 'combobox-disabled-example',
+  templateUrl: 'combobox-disabled-example.html',
+  styleUrl: '../combobox-examples.css',
+  imports: [Combobox, ComboboxInput, ComboboxPopupContainer],
+})
+export class ComboboxDisabledExample {
+  searchString = signal('Search is disabled');
+}

src/components-examples/aria/combobox/combobox-examples.css

@@ -147,3 +147,14 @@ ul[role='group'] {
 .example-tree-item[aria-selected='true'] .example-selected-icon {
   visibility: visible;
 }
+
+[ngCombobox][aria-disabled='true'] {
+  opacity: 0.5;
+  pointer-events: none;
+  cursor: default;
+}
+
+[ngCombobox][aria-disabled='true'] input.example-combobox-input {
+  color: var(--mat-sys-on-surface-variant);
+  background-color: var(--mat-sys-surface);
+}

src/components-examples/aria/combobox/index.ts

@@ -4,3 +4,4 @@ export {ComboboxHighlightExample} from './combobox-highlight/combobox-highlight-
 export {ComboboxTreeManualExample} from './combobox-tree-manual/combobox-tree-manual-example';
 export {ComboboxTreeAutoSelectExample} from './combobox-tree-auto-select/combobox-tree-auto-select-example';
 export {ComboboxTreeHighlightExample} from './combobox-tree-highlight/combobox-tree-highlight-example';
+export {ComboboxDisabledExample} from './combobox-disabled/combobox-disabled.example';

src/dev-app/aria-combobox/combobox-demo.html

@@ -29,5 +29,10 @@ <h2>Combobox with tree popup and auto-select filtering</h2>
       <h2>Combobox with tree popup and highlight filtering</h2>
       <combobox-tree-highlight-example></combobox-tree-highlight-example>
     </div>
+
+    <div class="example-combobox-container">
+      <h2>Combobox disabled example</h2>
+      <combobox-disabled-example></combobox-disabled-example>
+    </div>
   </div>
 </div>

src/dev-app/aria-combobox/combobox-demo.ts

@@ -8,6 +8,7 @@
 
 import {
   ComboboxAutoSelectExample,
+  ComboboxDisabledExample,
   ComboboxHighlightExample,
   ComboboxManualExample,
   ComboboxTreeAutoSelectExample,
@@ -26,6 +27,7 @@ import {ChangeDetectionStrategy, Component} from '@angular/core';
     ComboboxTreeManualExample,
     ComboboxTreeAutoSelectExample,
     ComboboxTreeHighlightExample,
+    ComboboxDisabledExample,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })