diff --git a/apps/web/src/assets/styles/global.scss b/apps/web/src/assets/styles/global.scss index ac3e424..be18879 100644 --- a/apps/web/src/assets/styles/global.scss +++ b/apps/web/src/assets/styles/global.scss @@ -124,3 +124,5 @@ h1 { max-width: 760px; margin: var(--space-3) 0 var(--space-4); font-size: var(- .admin-shell__content { padding: var(--space-6); } .admin-workspace-grid { grid-template-columns: 1fr; } } + +.public-page-focus:focus-visible { outline: var(--border-strong) solid var(--color-focus); outline-offset: -3px; } diff --git a/apps/web/src/components/molecules/ListingCard.stories.js b/apps/web/src/components/molecules/ListingCard.stories.js index f43c395..d4bae3b 100644 --- a/apps/web/src/components/molecules/ListingCard.stories.js +++ b/apps/web/src/components/molecules/ListingCard.stories.js @@ -43,5 +43,6 @@ export const KeyboardReachable = { const canvas = within(canvasElement); await userEvent.tab(); await expect(canvas.getByRole('link')).toHaveFocus(); + await expect(canvas.getByRole('link')).toHaveAttribute('href', '/listings/listing-1'); }, }; \ No newline at end of file diff --git a/apps/web/src/components/molecules/ListingCard.vue b/apps/web/src/components/molecules/ListingCard.vue index e29f36f..0af59c9 100644 --- a/apps/web/src/components/molecules/ListingCard.vue +++ b/apps/web/src/components/molecules/ListingCard.vue @@ -1,4 +1,9 @@