Skip to content

Change components to fix click a11y #39

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

Merged
victoriari merged 1 commit into from
Jan 28, 2026
Merged

Change components to fix click a11y #39

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,817 changes: 3,414 additions & 3,403 deletions dist/cspr-design.es.js
View file
Open in desktop

Large diffs are not rendered by default.

50 changes: 25 additions & 25 deletions dist/cspr-design.umd.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/lib/components/confirmation-window/confirmation-window.d.ts.map
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion dist/lib/components/copy/copy.d.ts.map
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion dist/lib/components/modal-header/modal-header.d.ts.map
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion dist/lib/components/navigation/cspr-products-menu/products-menu-item.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,5 +20,5 @@ export declare const ProductItemWrapper: import('styled-components').StyledCompo
disabled: boolean;
}, never>;
export declare const StyledBodyText: import('styled-components').StyledComponent<React.ForwardRefExoticComponent<import('../../..').BodyTextProps & React.RefAttributes<HTMLSpanElement>>, import('styled-components').DefaultTheme, {}, never>;
export declare const ProductsMenuItem: ({ nameLabel, link, icon, descriptionText, selected, newBadgeLabel, comingSoonBadgeLabel, badge, }: ProductsMenuItemProps) => import("react/jsx-runtime").JSX.Element;
export declare const ProductsMenuItem: React.ForwardRefExoticComponent<ProductsMenuItemProps & React.RefAttributes<HTMLSpanElement>>;
//# sourceMappingURL=products-menu-item.d.ts.map
2 changes: 1 addition & 1 deletion dist/lib/components/navigation/cspr-products-menu/products-menu-item.d.ts.map
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 4 additions & 2 deletions dist/lib/components/navigation/dropdown-menu/dropdown-menu-item.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
import { PropsWithChildren } from 'react';
import { default as React } from 'react';
interface DropdownMenuItemProps {
onClick?: () => void;
padding?: string;
}
export declare const DropdownMenuItem: (props: PropsWithChildren<DropdownMenuItemProps>) => import("react/jsx-runtime").JSX.Element;
export declare const DropdownMenuItem: React.ForwardRefExoticComponent<DropdownMenuItemProps & {
children?: React.ReactNode | undefined;
} & React.RefAttributes<HTMLSpanElement>>;
export {};
//# sourceMappingURL=dropdown-menu-item.d.ts.map
2 changes: 1 addition & 1 deletion dist/lib/components/navigation/dropdown-menu/dropdown-menu-item.d.ts.map
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

21 changes: 19 additions & 2 deletions src/lib/components/confirmation-window/confirmation-window.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -217,11 +217,28 @@ export const ConfirmationWindow = ({
justify={'space-between'}
>
{dismissLabel && (
<StyledDismissButton color={'utility'} onClick={onDismiss}>
<StyledDismissButton
color={'utility'}
hasOutline
onClick={onDismiss}
tabIndex={0}
onKeyDown={(e) => {
if (e.key === 'Enter') {
onDismiss();
}
}}>
{dismissLabel}
</StyledDismissButton>
)}
<StyledConfirmButton onClick={onConfirm}>
<StyledConfirmButton
onClick={onConfirm}
hasOutline
tabIndex={0}
onKeyDown={(e) => {
if (e.key === 'Enter') {
onConfirm();
}
}}>
{confirmLabel}
</StyledConfirmButton>
</ButtonsContainer>
Expand Down
10 changes: 9 additions & 1 deletion src/lib/components/copy/copy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,15 @@ export const Copy = ({

return (
<FlexRow style={styles} align="center" itemsSpacing={8}>
<StyledContainer onClick={handleCopy} isCopied={isCopied}>
<StyledContainer
onClick={handleCopy}
isCopied={isCopied}
tabIndex={0}
onKeyDown={(ev) => {
if (ev.key === 'Enter') {
handleCopy();
}
}}>
<StyledSvgIcon
variation={variation}
size={16}
Expand Down
9 changes: 8 additions & 1 deletion src/lib/components/modal-header/modal-header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,14 @@ export const ModalHeader = ({
>
{headerLogo && headerLogo}
{onClose && (
<CloseButton onClick={onClose}>
<CloseButton
onClick={onClose}
tabIndex={0}
onKeyDown={(e) => {
if (e.key === 'Enter') {
onClose && onClose();
}
}}>
<StyledSvgIcon src={CloseIcon} size={20} />
</CloseButton>
)}
Expand Down
53 changes: 31 additions & 22 deletions src/lib/components/navigation/cspr-products-menu/products-menu-item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,14 @@ import React from 'react';
import { Badge, BadgeProps } from '../../badge/badge';
import CaptionText from '../../caption-text/caption-text';
import FlexRow from '../../flex-row/flex-row';
import NavLink from '../../nav-link/nav-link';
import FlexColumn from '../../flex-column/flex-column';
import styled, { useTheme } from 'styled-components';
import { useMatchMedia } from '../../../utils/match-media';
import SvgIcon from '../../svg-icon/svg-icon';
import BodyText from '../../body-text/body-text';

type Ref = HTMLSpanElement;

export interface ProductsMenuItemProps {
comingSoonBadgeLabel?: string;
newBadgeLabel?: string;
Expand Down Expand Up @@ -71,17 +72,22 @@ const defaultIcon = {
[ThemeModeType.dark]: 'assets/icons/ic-sand-clock-dark.svg',
};

export const ProductsMenuItem = ({
nameLabel,
link,
icon,
descriptionText,
selected = false,
newBadgeLabel,
comingSoonBadgeLabel,
badge,
}: ProductsMenuItemProps) => {
const theme = useTheme();
export const ProductsMenuItem = React.forwardRef<Ref, ProductsMenuItemProps>(
function ProductsMenuItem(
{
nameLabel,
link,
icon,
descriptionText,
selected = false,
newBadgeLabel,
comingSoonBadgeLabel,
badge,
...props
},
ref
) {
const theme = useTheme();

let itemBadge;
if (badge) {
Expand Down Expand Up @@ -130,13 +136,16 @@ export const ProductsMenuItem = ({

const productMedia = useMatchMedia([mobile, mobile, desktop], []);

return (
<ProductItemWrapper
onClick={() => !comingSoonBadgeLabel && window.open(link, '_blank')}
selected={selected}
disabled={!!comingSoonBadgeLabel}
>
{productMedia}
</ProductItemWrapper>
);
};
return (
<ProductItemWrapper
onClick={() => !comingSoonBadgeLabel && window.open(link, '_blank')}
selected={selected}
disabled={!!comingSoonBadgeLabel}
{...props}
ref={ref}
>
{productMedia}
</ProductItemWrapper>
);
}
);
22 changes: 12 additions & 10 deletions src/lib/components/navigation/dropdown-menu/dropdown-menu-item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import React, { PropsWithChildren } from 'react';
import styled from 'styled-components';
import FlexRow from '../../flex-row/flex-row';
import { FlexRow } from '../../flex-row/flex-row';

type Ref = HTMLSpanElement;

const ItemContainer = styled(FlexRow)<{ padding?: string }>(({ theme, padding }) => ({
width: '100%',
Expand Down Expand Up @@ -34,12 +36,12 @@ interface DropdownMenuItemProps {
padding?: string;
}

export const DropdownMenuItem = (
props: PropsWithChildren<DropdownMenuItemProps>
) => {
return (
<MenuItemWrapper {...props}>
<ItemContainer padding={props.padding}>{props.children}</ItemContainer>
</MenuItemWrapper>
);
};
export const DropdownMenuItem = React.forwardRef<Ref, PropsWithChildren<DropdownMenuItemProps>>(
function DropdownMenuItem(props, ref) {
return (
<MenuItemWrapper {...props} ref={ref}>
<ItemContainer padding={props.padding}>{props.children}</ItemContainer>
</MenuItemWrapper>
);
}
);