Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Change hover,focus style for theme card, add screen reader only heading #46

Merged
merged 1 commit into from
Nov 23, 2023
Merged

Change hover,focus style for theme card, add screen reader only heading #46

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions overrides/common/style.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,15 @@ export const hoverStyle = css`
`;

export const focusStyle = css`
// Very subtle outline for mouse
// Very subtle outline for mouse focus
&:focus:not(:focus-visible) {
outline: none
box-shadow: ${themeVal("boxShadow.elevationA")}
}
// Enable outline for keyboard
// More visible outline for keyboard focus
&:focus,
&:focus-visible {
outline: 5px auto ${themeVal("color.base-300")};
outline: 5px auto ${themeVal("color.primary")};
}
`;

Expand Down
7 changes: 6 additions & 1 deletion overrides/components/theme-cards.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,12 @@ const ThemeCard = styled.article`
display: flex;
flex-flow: column nowrap;
border-top: 1px solid ${themeVal("color.base-200a")};
${hoverStyle}

&:hover {
h3 {
text-decoration: underline;
}
}
`;
const ThemeCardImageWrapper = styled.figure`
height: 240px;
Expand Down
15 changes: 13 additions & 2 deletions overrides/theme/content/component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,19 @@
import React from "$veda-ui/react";
import { stories} from "veda";
import ThemeCards from '../../components/theme-cards';
import styled from "$veda-ui/styled-components";
import { stories } from "veda";
import ThemeCards from "../../components/theme-cards";
import { Fold } from "$veda-ui-scripts/components/common/fold";
import { themeLandingPageIds } from "../../common/story-data";

/* Screen reader only h2 for heading hierarchy */
const SrOnlyH2 = styled.h2`
width: 1px;
height: 1px;
left: -10000px;
overflow: hidden;
position: absolute;
top: auto;
`;

const themeData = Object.keys(stories)
.map((key) => stories[key].data)
Expand All @@ -12,6 +22,7 @@ const themeData = Object.keys(stories)
export default function ThemeLandingPage() {
return (
<Fold>
<SrOnlyH2> Nine themes</SrOnlyH2>
<ThemeCards storyIds={themeLandingPageIds} />
</Fold>
);
Expand Down
Loading