Skip to content

Commit

Permalink
feat(components, protocol-designer): tab through protocol onboarding … (
Browse files Browse the repository at this point in the history
#16220)

…flow

closes AUTH-689 AUTH-734
  • Loading branch information
jerader authored Sep 11, 2024
1 parent be58493 commit 3a15f22
Show file tree
Hide file tree
Showing 5 changed files with 44 additions and 16 deletions.
17 changes: 14 additions & 3 deletions components/src/atoms/buttons/EmptySelectorButton.tsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import * as React from 'react'
import styled from 'styled-components'
import { Flex } from '../../primitives'
import {
BORDERS,
COLORS,
Icon,
SPACING,
StyledText,
Btn,
JUSTIFY_CENTER,
JUSTIFY_START,
ALIGN_CENTER,
Expand Down Expand Up @@ -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}
Expand All @@ -63,6 +74,6 @@ export function EmptySelectorButton(
) : null}
<StyledText desktopStyle="bodyDefaultSemiBold">{text}</StyledText>
</Flex>
</Btn>
</StyledButton>
)
}
24 changes: 14 additions & 10 deletions components/src/atoms/buttons/RadioButton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -112,6 +114,7 @@ export function RadioButton(props: RadioButtonProps): JSX.Element {
<Flex
css={css`
width: auto;
@media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
width: 100%;
}
Expand All @@ -126,6 +129,7 @@ export function RadioButton(props: RadioButtonProps): JSX.Element {
value={buttonValue}
/>
<SettingButtonLabel
tabIndex={0}
role="label"
htmlFor={id}
onMouseEnter={setHovered}
Expand Down
17 changes: 16 additions & 1 deletion components/src/interaction-enhancers/HandleKeypress.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down

0 comments on commit 3a15f22

Please sign in to comment.