diff --git a/src/aria/combobox/combobox.ts b/src/aria/combobox/combobox.ts index 8490508f7476..d437ae85514a 100644 --- a/src/aria/combobox/combobox.ts +++ b/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 { '[attr.aria-controls]': 'combobox.pattern.popupId()', '[attr.aria-haspopup]': 'combobox.pattern.hasPopup()', '[attr.aria-autocomplete]': 'combobox.pattern.autocomplete()', + '[disabled]': 'combobox.disabled()', }, }) export class ComboboxInput { diff --git a/src/components-examples/aria/combobox/combobox-disabled/combobox-disabled-example.html b/src/components-examples/aria/combobox/combobox-disabled/combobox-disabled-example.html new file mode 100644 index 000000000000..c8e661e2f9e5 --- /dev/null +++ b/src/components-examples/aria/combobox/combobox-disabled/combobox-disabled-example.html @@ -0,0 +1,17 @@ +
+
+ + +
+ +
+ + +
+
diff --git a/src/components-examples/aria/combobox/combobox-disabled/combobox-disabled.example.ts b/src/components-examples/aria/combobox/combobox-disabled/combobox-disabled.example.ts new file mode 100644 index 000000000000..92793632af31 --- /dev/null +++ b/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'); +} diff --git a/src/components-examples/aria/combobox/combobox-examples.css b/src/components-examples/aria/combobox/combobox-examples.css index 54e96b72490d..01f9237cd28a 100644 --- a/src/components-examples/aria/combobox/combobox-examples.css +++ b/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); +} diff --git a/src/components-examples/aria/combobox/index.ts b/src/components-examples/aria/combobox/index.ts index ca1e1f5c5dde..c026083346c7 100644 --- a/src/components-examples/aria/combobox/index.ts +++ b/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'; diff --git a/src/dev-app/aria-combobox/combobox-demo.html b/src/dev-app/aria-combobox/combobox-demo.html index 2a5bd48182a0..2e30ec044a52 100644 --- a/src/dev-app/aria-combobox/combobox-demo.html +++ b/src/dev-app/aria-combobox/combobox-demo.html @@ -29,5 +29,10 @@

Combobox with tree popup and auto-select filtering

Combobox with tree popup and highlight filtering

+ +
+

Combobox disabled example

+ +
diff --git a/src/dev-app/aria-combobox/combobox-demo.ts b/src/dev-app/aria-combobox/combobox-demo.ts index a013d1dc1f5f..9961d057c20a 100644 --- a/src/dev-app/aria-combobox/combobox-demo.ts +++ b/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, })