fix(picker): rename is-focused to is-keyboardFocused

Rather than removing the class, keep it in its renamed form in order
for SWC to still be able to convert it to an attribute and continue
testing it via its Storybook control.

components/picker/index.css

@@ -161,7 +161,8 @@ governing permissions and limitations under the License.
     --highcontrast-picker-content-color-disabled: GrayText;
     --highcontrast-picker-background-color: ButtonFace;
 
-    &:focus-visible {
+    &:focus-visible,
+    &.is-keyboardFocused {
       --highcontrast-picker-border-color-hover: ButtonText;
     }
 
@@ -263,7 +264,8 @@ governing permissions and limitations under the License.
     }
   }
 
-  &:focus-visible {
+  &:focus-visible,
+  &.is-keyboardFocused {
     outline: none;
     background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-key-focus, var(--spectrum-picker-background-color-key-focus)));
     border-color: var(--highcontrast-picker-border-color-default, var(--mod-picker-border-color-key-focus, var(--spectrum-picker-border-color-key-focus)));
@@ -306,7 +308,8 @@ governing permissions and limitations under the License.
       border-color: var(--highcontrast-picker-border-color-hover, var(--mod-picker-border-color-error-hover-open, var(--spectrum-picker-border-color-error-hover-open)));
     }
 
-    &:focus-visible {
+    &:focus-visible,
+    &.is-keyboardFocused {
       border-color: var(--highcontrast-picker-border-color-default, var(--mod-picker-border-color-error-key-focus, var(--spectrum-picker-border-color-error-key-focus)));
     }
   }
@@ -463,7 +466,8 @@ governing permissions and limitations under the License.
     background-color: var(--highcontrast-picker-background-color, transparent);
   }
 
-  &:focus-visible {
+  &:focus-visible,
+  &.is-keyboardFocused {
     background-color: var(--highcontrast-picker-background-color, transparent);
 
     /* Focus indicator changes from a ring to a line underneath. */

components/picker/stories/picker.stories.js

@@ -1,5 +1,4 @@
 import { Default as MenuStories } from "@spectrum-css/menu/stories/menu.stories.js";
-import { within } from "@storybook/testing-library";
 import { Template } from "./template";
 
 export default {
@@ -63,6 +62,15 @@ export default {
 			},
 			control: "boolean",
 		},
+		isKeyboardFocused: {
+			name: "Keyboard focused",
+			type: { name: "boolean" },
+			table: {
+				type: { summary: "boolean" },
+				category: "State",
+			},
+			control: "boolean",
+		},
 		isDisabled: {
 			name: "Disabled",
 			type: { name: "boolean" },
@@ -98,6 +106,7 @@ export default {
 		label: "Country",
 		placeholder: "Select a country",
 		isQuiet: false,
+		isKeyboardFocused: false,
 		isLoading: false,
 		isDisabled: false,
 		isInvalid: false,
@@ -168,14 +177,11 @@ export const Focused = Template.bind({});
 Focused.storyName = "Keyboard Focused";
 Focused.args = {
 	helpText: "Please select a country",
+	isKeyboardFocused: true,
 	content: [
 		() => MenuStories(MenuStories.args)
 	],
 };
-Focused.play = async ({ canvasElement }) => {
-	const canvas = within(canvasElement);
-	await canvas.getByRole("button").focus();
-};
 
 export const WithForcedColors = Template.bind({
   parameters: {

components/picker/stories/template.js

@@ -18,6 +18,7 @@ export const Picker = ({
 	labelPosition,
 	placeholder,
 	isQuiet = false,
+	isKeyboardFocused = false,
 	isOpen = false,
 	isInvalid = false,
 	isLoading = false,
@@ -51,6 +52,7 @@ export const Picker = ({
 				[`is-invalid`]: isInvalid,
 				[`is-open`]: isOpen,
 				[`is-loading`]: isLoading,
+				[`is-keyboardFocused`]: isKeyboardFocused,
 				...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
 			})}
 			?disabled=${isDisabled}
@@ -94,6 +96,7 @@ export const Template = ({
 	placeholder,
 	helpText,
 	isQuiet = false,
+	isKeyboardFocused = false,
 	isOpen = false,
 	isInvalid = false,
 	isLoading = false,
@@ -148,6 +151,7 @@ export const Template = ({
 					size,
 					placeholder,
 					isQuiet,
+					isKeyboardFocused,
 					isOpen,
 					isInvalid,
 					isLoading,
@@ -169,6 +173,7 @@ export const Template = ({
 				size,
 				placeholder,
 				isQuiet,
+				isKeyboardFocused,
 				isOpen,
 				isInvalid,
 				isLoading,