fix(select): announce readonly flag in screen-reader

Author: spike-rabbit

playwright/snapshots/si-select.spec.ts-snapshots/si-select--si-select--readonly.yaml

@@ -1,15 +1,15 @@
 - heading "Inline" [level=4]
-- combobox "Inline"
+- textbox "Inline"
 - heading "FormControl" [level=4]
-- combobox "FormControl"
+- textbox "FormControl"
 - heading "Multi select" [level=4]
-- combobox "Multi select"
+- textbox "Multi select"
 - heading "Multi-select with groups" [level=4]
-- combobox "Multi-select with groups"
+- textbox "Multi-select with groups"
 - heading "Select with custom template" [level=4]
-- combobox "Select with custom template"
+- textbox "Select with custom template"
 - heading "Select with actions" [level=4]
-- combobox "Select with actions"
+- textbox "Select with actions"
 - text: "Control panel Current value: fair"
 - checkbox "Readonly" [checked]
 - text: Readonly

projects/element-ng/select/select-input/si-select-input.component.ts

@@ -37,13 +37,15 @@ import { SelectOption } from '../si-select.types';
   styleUrl: './si-select-input.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
-    role: 'combobox',
+    // In readonly mode, the select needs to be announced as a textbox.
+    // Otherwise, screen-reader won't announce the readonly state.
     class: 'select focus-none dropdown-toggle d-flex align-items-center ps-4',
     'aria-autocomplete': 'none',
-    'aria-haspopup': 'listbox',
-    '[attr.aria-expanded]': 'open()',
+    '[attr.role]': 'readonly() ? "textbox": "combobox"',
+    '[attr.aria-haspopup]': 'readonly() ? undefined : "listbox"',
+    '[attr.aria-expanded]': 'readonly() ? undefined : open()',
+    '[attr.aria-controls]': 'readonly() ? undefined : controls()',
     '[attr.aria-readonly]': 'readonly()',
-    '[attr.aria-controls]': 'controls()',
     '[attr.aria-labelledby]': 'labeledBy()',
     '[attr.aria-disabled]': 'selectionStrategy.disabled()',
     '[attr.tabindex]': 'selectionStrategy.disabled() ? "-1" : "0"',