From 3a15f22d1dafa737c631ad1adb1002e9c2437da9 Mon Sep 17 00:00:00 2001
From: Jethary Alcid <66035149+jerader@users.noreply.github.com>
Date: Wed, 11 Sep 2024 15:33:34 -0400
Subject: [PATCH] =?UTF-8?q?feat(components,=20protocol-designer):=20tab=20?=
 =?UTF-8?q?through=20protocol=20onboarding=20=E2=80=A6=20(#16220)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

…flow

closes AUTH-689 AUTH-734
---
 .../src/atoms/buttons/EmptySelectorButton.tsx | 17 ++++++++++---
 components/src/atoms/buttons/RadioButton.tsx  | 24 +++++++++++--------
 .../interaction-enhancers/HandleKeypress.tsx  | 17 ++++++++++++-
 .../localization/en/create_new_protocol.json  |  1 -
 .../CreateNewProtocolWizard/SelectRobot.tsx   |  1 -
 5 files changed, 44 insertions(+), 16 deletions(-)

diff --git a/components/src/atoms/buttons/EmptySelectorButton.tsx b/components/src/atoms/buttons/EmptySelectorButton.tsx
index 98a989e6f99..2726c2045d3 100644
--- a/components/src/atoms/buttons/EmptySelectorButton.tsx
+++ b/components/src/atoms/buttons/EmptySelectorButton.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react'
+import styled from 'styled-components'
 import { Flex } from '../../primitives'
 import {
   BORDERS,
@@ -6,7 +7,6 @@ import {
   Icon,
   SPACING,
   StyledText,
-  Btn,
   JUSTIFY_CENTER,
   JUSTIFY_START,
   ALIGN_CENTER,
@@ -37,8 +37,19 @@ export function EmptySelectorButton(
   } = props
   const buttonSizing = size === 'large' ? '100%' : FLEX_MAX_CONTENT
 
+  const StyledButton = styled.button`
+    border: none;
+    width: ${buttonSizing};
+    height: ${buttonSizing};
+    &:focus-visible {
+      outline: 2px solid ${COLORS.white};
+      box-shadow: 0 0 0 4px ${COLORS.blue50};
+      border-radius: ${BORDERS.borderRadius8};
+    }
+  `
+
   return (
-    <Btn onClick={onClick} width={buttonSizing} height={buttonSizing}>
+    <StyledButton onClick={onClick}>
       <Flex
         gridGap={SPACING.spacing4}
         padding={SPACING.spacing12}
@@ -63,6 +74,6 @@ export function EmptySelectorButton(
         ) : null}
         <StyledText desktopStyle="bodyDefaultSemiBold">{text}</StyledText>
       </Flex>
-    </Btn>
+    </StyledButton>
   )
 }
diff --git a/components/src/atoms/buttons/RadioButton.tsx b/components/src/atoms/buttons/RadioButton.tsx
index 0401da09e67..d9a9502d6c7 100644
--- a/components/src/atoms/buttons/RadioButton.tsx
+++ b/components/src/atoms/buttons/RadioButton.tsx
@@ -84,17 +84,19 @@ export function RadioButton(props: RadioButtonProps): JSX.Element {
   `
 
   const SettingButtonLabel = styled.label`
-      border-radius: ${
-        !largeDesktopBorderRadius
-          ? BORDERS.borderRadius40
-          : BORDERS.borderRadius8
-      };
-      cursor: pointer;
-      padding: ${SPACING.spacing12} ${SPACING.spacing16};
-      width: 100%;
+    border-radius: ${
+      !largeDesktopBorderRadius ? BORDERS.borderRadius40 : BORDERS.borderRadius8
+    };
+    cursor: pointer;
+    padding: ${SPACING.spacing12} ${SPACING.spacing16};
+    width: 100%;
 
-      ${isSelected ? SELECTED_BUTTON_STYLE : AVAILABLE_BUTTON_STYLE}
-      ${disabled && DISABLED_BUTTON_STYLE}
+    ${isSelected ? SELECTED_BUTTON_STYLE : AVAILABLE_BUTTON_STYLE}
+    ${disabled && DISABLED_BUTTON_STYLE}
+
+    &:focus-visible {
+      outline: 2px solid ${COLORS.blue55};
+    }
 
     @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
        cursor: default;
@@ -112,6 +114,7 @@ export function RadioButton(props: RadioButtonProps): JSX.Element {
     <Flex
       css={css`
         width: auto;
+
         @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
           width: 100%;
         }
@@ -126,6 +129,7 @@ export function RadioButton(props: RadioButtonProps): JSX.Element {
         value={buttonValue}
       />
       <SettingButtonLabel
+        tabIndex={0}
         role="label"
         htmlFor={id}
         onMouseEnter={setHovered}
diff --git a/components/src/interaction-enhancers/HandleKeypress.tsx b/components/src/interaction-enhancers/HandleKeypress.tsx
index 10a6b804ab3..6b713dcd178 100644
--- a/components/src/interaction-enhancers/HandleKeypress.tsx
+++ b/components/src/interaction-enhancers/HandleKeypress.tsx
@@ -25,7 +25,22 @@ const matchHandler = (e: KeyboardEvent) => (h: KeypressHandler) =>
  */
 export class HandleKeypress extends React.Component<HandleKeypressProps> {
   handlePressIfKey = (event: KeyboardEvent): void => {
-    this.props.handlers.filter(matchHandler(event)).forEach(h => h.onPress())
+    const pressHandlers = this.props.handlers.filter(matchHandler(event))
+
+    // Check if any element is currently focused
+    const focusedElement = document.activeElement as HTMLElement
+
+    if (pressHandlers.length > 0) {
+      if (
+        focusedElement &&
+        event.key === 'Enter' &&
+        focusedElement.matches(':focus-visible')
+      ) {
+        focusedElement.click()
+      } else if (!focusedElement || !focusedElement.matches(':focus-visible')) {
+        pressHandlers.forEach(h => h.onPress())
+      }
+    }
   }
 
   preventDefaultIfKey = (event: KeyboardEvent): void => {
diff --git a/protocol-designer/src/assets/localization/en/create_new_protocol.json b/protocol-designer/src/assets/localization/en/create_new_protocol.json
index 3a42fe49805..0a832517db9 100644
--- a/protocol-designer/src/assets/localization/en/create_new_protocol.json
+++ b/protocol-designer/src/assets/localization/en/create_new_protocol.json
@@ -22,7 +22,6 @@
   "pip_vol": "Pipette volume",
   "pip": "{{mount}} pipette",
   "quantity": "Quantity",
-  "questions": "We’re going to ask a few questions to help you get started building your protocol.",
   "remove": "Remove",
   "rename_error": "Labware names must be 115 characters or fewer.",
   "rename_labware": "Rename labware",
diff --git a/protocol-designer/src/pages/CreateNewProtocolWizard/SelectRobot.tsx b/protocol-designer/src/pages/CreateNewProtocolWizard/SelectRobot.tsx
index 95193ba9309..68d9856e760 100644
--- a/protocol-designer/src/pages/CreateNewProtocolWizard/SelectRobot.tsx
+++ b/protocol-designer/src/pages/CreateNewProtocolWizard/SelectRobot.tsx
@@ -23,7 +23,6 @@ export function SelectRobot(props: WizardTileProps): JSX.Element {
       <WizardBody
         stepNumber={1}
         header={t('basics')}
-        subHeader={t('questions')}
         disabled={false}
         proceed={() => {
           proceed(1)