diff --git a/libs/mark-flow-ui/src/components/contest_header.tsx b/libs/mark-flow-ui/src/components/contest_header.tsx index ad6978bfec..70b1ffcb8a 100644 --- a/libs/mark-flow-ui/src/components/contest_header.tsx +++ b/libs/mark-flow-ui/src/components/contest_header.tsx @@ -18,6 +18,7 @@ export interface ContestHeaderProps { children?: React.ReactNode; contest: Contest | MsEitherNeitherContest; district: District; + className?: string; } export interface BreadcrumbMetadata { @@ -27,6 +28,11 @@ export interface BreadcrumbMetadata { const Container = styled.div` padding: 0.25rem 0.5rem 0.5rem; + + &.no-horizontal-padding { + padding-left: 0; + padding-right: 0; + } `; export function Breadcrumbs(props: BreadcrumbMetadata): React.ReactNode { @@ -48,10 +54,10 @@ export function Breadcrumbs(props: BreadcrumbMetadata): React.ReactNode { } export function ContestHeader(props: ContestHeaderProps): JSX.Element { - const { breadcrumbs, children, contest, district } = props; + const { breadcrumbs, children, contest, district, className } = props; return ( - + {/* * NOTE: This is visually rendered elsewhere in the screen footer, but diff --git a/libs/mark-flow-ui/src/components/contest_screen_layout.tsx b/libs/mark-flow-ui/src/components/contest_screen_layout.tsx index c755c0413b..5c455f98cf 100644 --- a/libs/mark-flow-ui/src/components/contest_screen_layout.tsx +++ b/libs/mark-flow-ui/src/components/contest_screen_layout.tsx @@ -5,6 +5,7 @@ export const ContestFooter = styled.div` width: 100%; padding: 0.5rem; `; + export const ChoicesGrid = styled.div.attrs({ 'aria-multiselectable': true, role: 'listbox', diff --git a/libs/mark-flow-ui/src/components/yes_no_contest.test.tsx b/libs/mark-flow-ui/src/components/yes_no_contest.test.tsx index eecb77eb3d..e14dfb8054 100644 --- a/libs/mark-flow-ui/src/components/yes_no_contest.test.tsx +++ b/libs/mark-flow-ui/src/components/yes_no_contest.test.tsx @@ -50,9 +50,11 @@ test('voting for both yes and no', () => { screen.getByRole('heading', { name: contest.title }); - within(screen.getByTestId(MOCK_WITH_SCROLL_BUTTONS_TEST_ID)).getByText( - contest.description - ); + const descriptions = within( + screen.getByTestId(MOCK_WITH_SCROLL_BUTTONS_TEST_ID) + ).getAllByText(contest.description); + // Expect once for AudioOnly component and once for visual component + expect(descriptions.length).toEqual(2); const contestChoices = screen.getByTestId('contest-choices'); userEvent.click(within(contestChoices).getByText('YES').closest('button')!); diff --git a/libs/mark-flow-ui/src/components/yes_no_contest.tsx b/libs/mark-flow-ui/src/components/yes_no_contest.tsx index 78404c229e..63eaa3f3cf 100644 --- a/libs/mark-flow-ui/src/components/yes_no_contest.tsx +++ b/libs/mark-flow-ui/src/components/yes_no_contest.tsx @@ -80,22 +80,23 @@ export function YesNoContest({ return (
- - - - {electionStrings.contestDescription(contest)} - - - - + + + + {electionStrings.contestDescription(contest)} + + + + {electionStrings.contestDescription(contest)}