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

fix(FullPageError): accessibility violations #6503

Merged
merged 7 commits into from
Nov 29, 2024
Merged

fix(FullPageError): accessibility violations #6503

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
b7703f1
fix(FullPageError): accessibility voilations
anamikaanu96 Nov 25, 2024
fa8d518
Merge branch 'carbon-design-system:main' into FullPageErrorVoilations
anamikaanu96 Nov 25, 2024
3de20f0
fix(FullPageError): accessibility voilations
anamikaanu96 Nov 25, 2024
8797ed6
Merge branch 'carbon-design-system:main' into FullPageErrorVoilations
anamikaanu96 Nov 26, 2024
5ef9cce
fix(FullPageError): accessibility voilations
anamikaanu96 Nov 27, 2024
06a6041
Merge branch 'carbon-design-system:main' into FullPageErrorVoilations
anamikaanu96 Nov 27, 2024
a91aa8d
Merge branch 'main' into FullPageErrorVoilations
devadula-nandan Nov 28, 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: 2 additions & 1 deletion packages/ibm-products/src/components/FullPageError/FullPageError.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,8 @@ describe(componentName, () => {

it('renders error label', () => {
render(<FullPageError {...defaultProps} />);
expect(screen.getByText('↳ ' + label)).toBeInTheDocument();
const labelElement = screen.getByText(label).closest('span');
expect(labelElement).toContainHTML('<span aria-hidden="true">↳ </span>');
});

it('renders description', () => {
Expand Down
16 changes: 6 additions & 10 deletions packages/ibm-products/src/components/FullPageError/FullPageError.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,25 +82,18 @@ export let FullPageError = React.forwardRef<HTMLDivElement, FullPageErrorProps>(
const errorData = {
403: {
svg: (
<Error403SVG
className={`${blockClass}__svg ${blockClass}__403`}
title={title}
/>
<Error403SVG className={`${blockClass}__svg ${blockClass}__403`} />
),
},
404: {
svg: (
<Error404SVG
className={`${blockClass}__svg ${blockClass}__404`}
title={title}
/>
<Error404SVG className={`${blockClass}__svg ${blockClass}__404`} />
),
},
custom: {
svg: (
<ErrorGenericSVG
className={`${blockClass}__svg ${blockClass}__custom`}
title={title}
/>
),
},
Expand All @@ -117,7 +110,10 @@ export let FullPageError = React.forwardRef<HTMLDivElement, FullPageErrorProps>(
<Grid className={`${blockClass}__grid`}>
<Column sm={4} md={3} lg={6} className={`${blockClass}__column`}>
<h1 className={`${blockClass}__title`}>
<span className={`${blockClass}__label`}>↳ {label}</span>
<span className={`${blockClass}__label`}>
<span aria-hidden="true">↳ </span>
{label}
</span>
<span>{title}</span>
</h1>
<p className={`${blockClass}__description`}>{description}</p>
Expand Down
5 changes: 2 additions & 3 deletions packages/ibm-products/src/components/FullPageError/assets/Error403SVG.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,14 @@ import React from 'react';
// Other standard imports.
import { string } from 'prop-types';

export const Error403SVG = ({ className, title }) => {
export const Error403SVG = ({ className }) => {
return (
<svg
viewBox="0 0 750 570"
fill="none"
className={className}
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
aria-label={title}
>
<g clipPath="url(#clip0_0_2401)">
<path
Expand Down Expand Up @@ -829,5 +829,4 @@ export const Error403SVG = ({ className, title }) => {
// See https://www.npmjs.com/package/prop-types#usage.
Error403SVG.propTypes = {
className: string,
title: string,
};
5 changes: 2 additions & 3 deletions packages/ibm-products/src/components/FullPageError/assets/Error404SVG.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,14 @@ import React from 'react';
// Other standard imports.
import { string } from 'prop-types';

export const Error404SVG = ({ className, title }) => {
export const Error404SVG = ({ className }) => {
return (
<svg
viewBox="0 0 751 549"
fill="none"
className={className}
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
aria-label={title}
>
<g clipPath="url(#clip0_0_2285)">
<path d="M103.296 290.22V153.267H612.488" fill="#F3F3F3" />
Expand Down Expand Up @@ -733,5 +733,4 @@ export const Error404SVG = ({ className, title }) => {
// See https://www.npmjs.com/package/prop-types#usage.
Error404SVG.propTypes = {
className: string,
title: string,
};
5 changes: 2 additions & 3 deletions packages/ibm-products/src/components/FullPageError/assets/ErrorGenericSVG.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,14 @@ import React from 'react';
// Other standard imports.
import { string } from 'prop-types';

export const ErrorGenericSVG = ({ className, title }) => {
export const ErrorGenericSVG = ({ className }) => {
return (
<svg
viewBox="0 0 750 506"
fill="none"
className={className}
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
aria-label={title}
>
<g clipPath="url(#clip0_203_144)">
<path
Expand Down Expand Up @@ -828,5 +828,4 @@ export const ErrorGenericSVG = ({ className, title }) => {
// See https://www.npmjs.com/package/prop-types#usage.
ErrorGenericSVG.propTypes = {
className: string,
title: string,
};
2 changes: 1 addition & 1 deletion packages/ibm-products/src/components/FullPageError/preview-components/UiShell.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ export const UiShell = ({ children }) => {
<Header aria-label="IBM Product">
<SkipToContent />
<HeaderMenuButton
aria-label="Open menu"
aria-label={isSideNavExpanded ? 'Close menu' : 'Open menu'}
onClick={onClickSideNavExpand}
isCollapsible
isActive={isSideNavExpanded}
Expand Down
Loading