refactor(aria/combobox): make input readonly when disabled (#33187)

Author: tjshiu

src/aria/simple-combobox/simple-combobox.spec.ts

@@ -548,6 +548,13 @@ describe('Combobox', () => {
         expect(inputElement.getAttribute('aria-disabled')).toBe('true');
       });
 
+      it('should make the input read-only when disabled and softDisabled is true', () => {
+        fixture.componentInstance.disabled.set(true);
+        fixture.detectChanges();
+
+        expect(inputElement.getAttribute('readonly')).toBe('');
+      });
+
       it('should block interactions when disabled', () => {
         fixture.componentInstance.disabled.set(true);
         fixture.detectChanges();

src/aria/simple-combobox/simple-combobox.ts

@@ -58,6 +58,7 @@ import type {ComboboxPopup} from './simple-combobox-popup';
     '[attr.tabindex]':
       'disabled() && !softDisabled() ? -1 : (tabIndex() !== undefined ? tabIndex() : 0)',
     '[attr.disabled]': 'disabled() && !softDisabled() ? "" : null',
+    '[attr.readonly]': 'disabled() && _pattern.isEditable() ? "" : null',
     '(keydown)': '_pattern.onKeydown($event)',
     '(focusin)': '_pattern.onFocusin()',
     '(focusout)': '_pattern.onFocusout($event)',

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

@@ -34,7 +34,7 @@ export class SimpleComboboxAutocompleteDisabledExample {
   readonly combobox = viewChild(Combobox);
 
   popupExpanded = signal(false);
-  searchString = signal('United States of America');
+  searchString = signal('Select a country');
   selectedOption = signal<string[]>([]);
 
   /** The query string used to filter the list of countries. */