feat(combobox): adding keyboard focused state in readonly

Author: aramos-adobe

.changeset/new-doors-fold.md

@@ -2,4 +2,4 @@
 "@spectrum-css/combobox": minor
 ---
 
-Combobox now includes a `read-only` state. Add the `is-readOnly` class to the Combobox to enable this feature. By doing so, this also activates the `readonly` attribute in the `Textfield` component. To ensure the intended user experience please make sure the readonly state in the textfield is enabled by adding the `is-readOnly` class and `readonly` attribute on the input element for this component as well.
+Combobox now includes a `read-only` state. Add the `is-readOnly` class to the Combobox to enable this feature. To ensure the intended user experience, please make sure the readonly state in the textfield is enabled by adding the `is-readOnly` class and `readonly` attribute on the input element for this component as well.

components/combobox/index.css

@@ -223,6 +223,14 @@
 	}
 
 	&.is-readOnly:not(.spectrum-Combobox--quiet) {
+		.spectrum-Combobox-textfield {
+			&.is-keyboardFocused .spectrum-Combobox-input {
+				outline-offset: var(--mod-textfield-focus-indicator-gap);
+				outline: var(--mod-textfield-focus-indicator-width) solid;
+				outline-color: var(--mod-textfield-focus-indicator-color);
+			}
+		}
+
 		.spectrum-Combobox-input:read-only {
 			background-color: var(--spectrum-combobox-readonly-input-background-color);
 			border-color: var(--spectrum-combobox-readonly-input-border-color);

components/combobox/metadata/metadata.json

@@ -67,6 +67,7 @@
     ".spectrum-Combobox.is-readOnly.is-invalid:not(.spectrum-Combobox--quiet) .spectrum-Combobox-input:read-only",
     ".spectrum-Combobox.is-readOnly:not(.spectrum-Combobox--quiet) .spectrum-Combobox-input:read-only",
     ".spectrum-Combobox.is-readOnly:not(.spectrum-Combobox--quiet) .spectrum-Combobox-input:read-only:hover",
+    ".spectrum-Combobox.is-readOnly:not(.spectrum-Combobox--quiet) .spectrum-Combobox-textfield.is-keyboardFocused .spectrum-Combobox-input",
     ".spectrum-Combobox:has(:active) .spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet)",
     ".spectrum-Combobox:has(:active) .spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet)",
     ".spectrum-Combobox:has(:focus) .spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet)",

components/combobox/stories/combobox.stories.js

@@ -171,7 +171,7 @@ QuietGroup.parameters = {
 };
 
 /**
- * Comboboxes have a read-only option for when content in the disabled state still needs to be shown. This allows for content to be copied, but not interacted with or changed. A combobox does not have a read-only option if no selection has been made. To enable this feature, add the `.isReadOnly` class to the combobox. Then within the textfield component, add the `.isReadOnly` class and `readonly` attribute to the `<input>`.
+ * Comboboxes have a read-only option for when content in the disabled state still needs to be shown. This allows for content to be copied, but not interacted with or changed. A combobox does not have a read-only option if no selection has been made. To enable this feature, add the `.isReadOnly` class to the combobox. To enable this feature, add the .isReadOnly class to the combobox. Then within the nested textfield component, add the .isReadOnly class and readonly attribute to the <input> element.
 */
 export const ReadOnly = Template.bind({});
 ReadOnly.tags = ["!dev"];