diff --git a/app/src/atoms/MenuList/DropdownMenu.tsx b/app/src/atoms/MenuList/DropdownMenu.tsx index ec383bf0ead..5d9d82d7d7f 100644 --- a/app/src/atoms/MenuList/DropdownMenu.tsx +++ b/app/src/atoms/MenuList/DropdownMenu.tsx @@ -28,14 +28,24 @@ export interface DropdownOption { export type DropdownBorder = 'rounded' | 'neutral' export interface DropdownMenuProps { + /** dropdown options */ filterOptions: DropdownOption[] + /** click handler */ onClick: (value: string) => void + /** current selected option */ currentOption: DropdownOption + /** dropdown */ width?: string + /** dropdown style type */ dropdownType?: DropdownBorder + /** dropdown title */ title?: string + /** dropdown item caption */ caption?: string | null + /** text for tooltip */ tooltipText?: string + /** html tabindex property */ + tabIndex?: number } // TODO: (smb: 4/15/22) refactor this to use html select for accessibility @@ -50,6 +60,7 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element { title, caption, tooltipText, + tabIndex = 0, } = props const [targetProps, tooltipProps] = useHoverTooltip() const [showDropdownMenu, setShowDropdownMenu] = React.useState(false) @@ -130,6 +141,7 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element { toggleSetShowDropdownMenu() }} css={DROPDOWN_STYLE} + tabIndex={tabIndex} > - - {t('parameters')} - + {hasRunTimeParameters ? ( + + {t('parameters')} + + ) : null} {hasRunTimeParameters ? ( {hasCustomRunTimeParameterValues diff --git a/app/src/organisms/Devices/ProtocolRun/__tests__/ProtocolRunRuntimeParameters.test.tsx b/app/src/organisms/Devices/ProtocolRun/__tests__/ProtocolRunRuntimeParameters.test.tsx index 4be025a491e..e2398fb084c 100644 --- a/app/src/organisms/Devices/ProtocolRun/__tests__/ProtocolRunRuntimeParameters.test.tsx +++ b/app/src/organisms/Devices/ProtocolRun/__tests__/ProtocolRunRuntimeParameters.test.tsx @@ -169,7 +169,7 @@ describe('ProtocolRunRuntimeParameters', () => { runTimeParameters: [] as RunTimeParameter[], } as CompletedProtocolAnalysis) render(props) - screen.getByText('Parameters') + expect(screen.queryByText('Parameters')).not.toBeInTheDocument() expect(screen.queryByText('Default values')).not.toBeInTheDocument() screen.getByText('mock InfoScreen') }) diff --git a/app/src/organisms/ProtocolDetails/ProtocolLiquidsDetails.tsx b/app/src/organisms/ProtocolDetails/ProtocolLiquidsDetails.tsx index 5aff2a28ea4..52ddf497bb7 100644 --- a/app/src/organisms/ProtocolDetails/ProtocolLiquidsDetails.tsx +++ b/app/src/organisms/ProtocolDetails/ProtocolLiquidsDetails.tsx @@ -76,7 +76,7 @@ export const ProtocolLiquidsDetails = ( borderRadius={BORDERS.borderRadius8} >