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

fix: Use visually hidden as utility class only #1269

Merged
merged 2 commits into from
Jun 21, 2024
Merged

fix: Use visually hidden as utility class only #1269

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a0812db
fix: Use visually hidden as utility class only
alimpens Jun 21, 2024
1ee0e05
Fix Avatar in a Header story
alimpens Jun 21, 2024
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
3 changes: 1 addition & 2 deletions packages/react/src/Avatar/Avatar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import { forwardRef } from 'react'
import type { ForwardedRef, HTMLAttributes } from 'react'
import { Icon } from '../Icon'
import { Image } from '../Image'
import { VisuallyHidden } from '../VisuallyHidden'
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is the component itself going to be removed too?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Probably, yeah


export const avatarColors = [
'black',
Expand Down Expand Up @@ -68,7 +67,7 @@ export const Avatar = forwardRef(
ref={ref}
className={clsx('ams-avatar', `ams-avatar--${color}`, imageSrc && 'ams-avatar--has-image', className)}
>
<VisuallyHidden>{a11yLabel}</VisuallyHidden>
<span className="ams-visually-hidden">{a11yLabel}</span>
<AvatarContent imageSrc={imageSrc} initials={initials} />
</span>
)
Expand Down
5 changes: 2 additions & 3 deletions packages/react/src/ErrorMessage/ErrorMessage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@
import clsx from 'clsx'
import { forwardRef } from 'react'
import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react'
import { VisuallyHidden } from '../VisuallyHidden'

export type ErrorMessageProps = {
/** An accessible phrase that screen readers announce before the error message. Should translate to something like ‘input error’. */
Expand All @@ -19,10 +18,10 @@ export const ErrorMessage = forwardRef(
ref: ForwardedRef<HTMLParagraphElement>,
) => (
<p {...restProps} ref={ref} className={clsx('ams-error-message', className)}>
<VisuallyHidden>
<span className="ams-visually-hidden">
{prefix}
{': '}
</VisuallyHidden>
</span>
{children}
</p>
),
Expand Down
3 changes: 1 addition & 2 deletions packages/react/src/Header/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import type { ForwardedRef, HTMLAttributes, ReactNode } from 'react'
import { Heading } from '../Heading'
import { Logo } from '../Logo'
import type { LogoBrand } from '../Logo'
import { VisuallyHidden } from '../VisuallyHidden'

export type HeaderProps = {
/** The name of the application. */
Expand Down Expand Up @@ -44,7 +43,7 @@ export const Header = forwardRef(
<>
<header {...restProps} ref={ref} className={clsx('ams-header', className)}>
<a href={logoLink} className="ams-header__logo-link">
<VisuallyHidden>{logoLinkTitle}</VisuallyHidden>
<span className="ams-visually-hidden">{logoLinkTitle}</span>
<Logo brand={logoBrand} />
</a>
{links && <div className="ams-header__links">{links}</div>}
Expand Down
3 changes: 1 addition & 2 deletions packages/react/src/IconButton/IconButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import clsx from 'clsx'
import { forwardRef } from 'react'
import type { ButtonHTMLAttributes, ForwardedRef } from 'react'
import { Icon } from '../Icon'
import { VisuallyHidden } from '../VisuallyHidden'

export type IconButtonProps = {
/** The accessible text for the button. Will be announced by screen readers. Should describe the button’s action. */
Expand Down Expand Up @@ -36,7 +35,7 @@ export const IconButton = forwardRef(
className,
)}
>
<VisuallyHidden>{label}</VisuallyHidden>
<span className="ams-visually-hidden">{label}</span>
<Icon svg={svg} size={size} square />
</button>
),
Expand Down
3 changes: 1 addition & 2 deletions packages/react/src/SearchField/SearchFieldButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import clsx from 'clsx'
import { forwardRef } from 'react'
import type { ForwardedRef, HTMLAttributes } from 'react'
import { Icon } from '../Icon'
import { VisuallyHidden } from '../VisuallyHidden'

type SearchFieldButtonProps = {
/** Describes the field for screen readers. */
Expand All @@ -20,7 +19,7 @@ type SearchFieldButtonProps = {
export const SearchFieldButton = forwardRef(
({ label = 'Zoeken', className, ...restProps }: SearchFieldButtonProps, ref: ForwardedRef<HTMLButtonElement>) => (
<button {...restProps} ref={ref} className={clsx('ams-search-field__button', className)}>
<VisuallyHidden>{label}</VisuallyHidden>
<span className="ams-visually-hidden">{label}</span>
<Icon svg={SearchIcon} size="level-5" square />
</button>
),
Expand Down
5 changes: 2 additions & 3 deletions packages/react/src/SearchField/SearchFieldInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@
import clsx from 'clsx'
import { forwardRef, useId } from 'react'
import type { ForwardedRef, InputHTMLAttributes } from 'react'
import { VisuallyHidden } from '../VisuallyHidden'

type SearchFieldInputProps = {
/** Whether the value fails a validation rule. */
Expand All @@ -24,8 +23,8 @@ export const SearchFieldInput = forwardRef(

return (
<>
<label htmlFor={id}>
<VisuallyHidden>{label}</VisuallyHidden>
<label htmlFor={id} className="ams-visually-hidden">
{label}
</label>
<input
{...restProps}
Expand Down
3 changes: 1 addition & 2 deletions packages/react/src/TopTaskLink/TopTaskLink.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@
import clsx from 'clsx'
import { forwardRef } from 'react'
import type { AnchorHTMLAttributes, ForwardedRef } from 'react'
import { VisuallyHidden } from '../VisuallyHidden'

export type TopTaskLinkProps = {
/** The title. */
Expand All @@ -20,7 +19,7 @@ export const TopTaskLink = forwardRef(
<a {...restProps} ref={ref} className={clsx('ams-top-task-link', className)}>
<span className="ams-top-task-link__label">{label}</span>
{/* This comma makes screen readers add a slight pause between the label and the description. */}
<VisuallyHidden>,</VisuallyHidden>
<span className="ams-visually-hidden">,</span>
<span className="ams-top-task-link__description">{description}</span>
</a>
),
Expand Down
3 changes: 1 addition & 2 deletions storybook/src/components/Avatar/Avatar.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ export const InAHeader: Story = {
render: (args) => (
<Header
links={
<PageMenu>
<PageMenu alignEnd>
<PageMenu.Link href="#">Contact</PageMenu.Link>
<PageMenu.Link href="#" icon={SearchIcon}>
Zoeken
Expand All @@ -53,7 +53,6 @@ export const InAHeader: Story = {
</li>
</PageMenu>
}
title="Dashboard"
/>
),
}
34 changes: 13 additions & 21 deletions storybook/src/components/Footer/Footer.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,7 @@
* Copyright Gemeente Amsterdam
*/

import {
Footer,
Grid,
Heading,
LinkList,
PageMenu,
Paragraph,
VisuallyHidden,
} from '@amsterdam/design-system-react/src'
import { Footer, Grid, Heading, LinkList, PageMenu, Paragraph } from '@amsterdam/design-system-react/src'
import {
CameraIcon,
ClockIcon,
Expand Down Expand Up @@ -44,9 +36,9 @@ export const Default: Story = {
args: {
children: [
<Footer.Top key="footer-top">
<VisuallyHidden>
<Heading>Colofon</Heading>
</VisuallyHidden>
<Heading className="ams-visually-hidden" inverseColor>
Colofon
</Heading>
<Grid gapVertical="large" paddingVertical="medium">
<Grid.Cell span={4}>
<Heading className="ams-mb--xs" level={2} size="level-4" inverseColor>
Expand Down Expand Up @@ -108,9 +100,9 @@ export const Default: Story = {
</Grid>
</Footer.Top>,
<Footer.Bottom key="footer-bottom">
<VisuallyHidden>
<Heading level={2}>Over deze website</Heading>
</VisuallyHidden>
<Heading className="ams-visually-hidden" level={2}>
Over deze website
</Heading>
<Grid paddingVertical="small">
<Grid.Cell span="all">
<PageMenu>{PageMenuStory.args?.children}</PageMenu>
Expand All @@ -125,9 +117,9 @@ export const Onderzoek: Story = {
args: {
children: [
<Footer.Top key="footer-top">
<VisuallyHidden>
<Heading>Colofon</Heading>
</VisuallyHidden>
<Heading className="ams-visually-hidden" inverseColor>
Colofon
</Heading>
<Grid gapVertical="large" paddingVertical="medium">
<Grid.Cell span={3}>
<Heading className="ams-mb--xs" level={2} size="level-4" inverseColor>
Expand Down Expand Up @@ -186,9 +178,9 @@ export const Onderzoek: Story = {
</Grid>
</Footer.Top>,
<Footer.Bottom key="footer-bottom">
<VisuallyHidden>
<Heading level={2}>Over deze website</Heading>
</VisuallyHidden>
<Heading className="ams-visually-hidden" level={2}>
Over deze website
</Heading>
<Grid paddingVertical="small">
<Grid.Cell span="all">
<PageMenu>{PageMenuStory.args?.children}</PageMenu>
Expand Down
Loading