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.

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

Fixed accessibility issues in the current Components #1899

Merged
merged 43 commits into from
Mar 20, 2024
Merged
Show file tree
Hide file tree
Changes from 35 commits
Commits
Show all changes
43 commits
Select commit Hold shift + click to select a range
15cb0a3
Fixed Title component for storybook
Mil4n0r Feb 28, 2024
1cafeba
Fixed styled components dynamic warning
Mil4n0r Feb 28, 2024
06abdab
Fixing accessibility issues in components A-B
Mil4n0r Feb 28, 2024
da94443
Fixing accessibility issues in components C-G
Mil4n0r Feb 29, 2024
dd44a32
Fixing accessibility issues in components H-L
Mil4n0r Feb 29, 2024
c9df705
Fixed jest accessibility test errors
Mil4n0r Feb 29, 2024
183cd03
Fixing accessibility issues in components M-R
Mil4n0r Mar 5, 2024
2b45f25
Fixing accessibility issues in Select Component
Mil4n0r Mar 6, 2024
310ba68
Fixing accessibility issues in components S-Z
Mil4n0r Mar 6, 2024
e40879b
Merge branch 'Mil4n0r/axe-accesibility-playwrightaxe' into Mil4n0r/ac…
Mil4n0r Mar 8, 2024
2796960
Merge branch 'master' of github.com:dxc-technology/halstack-react int…
Mil4n0r Mar 8, 2024
8f6e621
Merge branch 'Mil4n0r/axe-accesibility-playwrightaxe' into Mil4n0r/ac…
Mil4n0r Mar 12, 2024
04f4e45
Merge branch 'Mil4n0r/axe-accesibility-playwrightaxe' into Mil4n0r/ac…
Mil4n0r Mar 12, 2024
a5d4b72
Refactoring accessibility testing settings
Mil4n0r Mar 12, 2024
7eae2ef
Solved all axe-jest accessibility problems
Mil4n0r Mar 13, 2024
f4de79e
Fixed most of the accessibility issues from Storybook
Mil4n0r Mar 13, 2024
c99191c
Fixed remaining accessibility problems
Mil4n0r Mar 14, 2024
140f60c
Merge branch 'master' of github.com:dxc-technology/halstack-react int…
Mil4n0r Mar 14, 2024
d4260a4
Started working on refactoring functional tests
Mil4n0r Mar 14, 2024
421780e
Removed unused dependency
Mil4n0r Mar 14, 2024
7e12f03
Fixed bug with halstack logo
Mil4n0r Mar 14, 2024
db9ef80
Fixed import format
Mil4n0r Mar 14, 2024
c99d424
Fixed format
Mil4n0r Mar 14, 2024
e8e1821
Removed unneeded comment
Mil4n0r Mar 14, 2024
1f41810
Changed aria-label for ProgressBar
Mil4n0r Mar 14, 2024
f7df5e8
Changed aria-label for Spinner
Mil4n0r Mar 14, 2024
63ad655
Removed unneeded comments
Mil4n0r Mar 14, 2024
42f9c40
Merge branch 'master' of github.com:dxc-technology/halstack-react int…
Mil4n0r Mar 14, 2024
b17b94a
Rollback package-lock
Mil4n0r Mar 14, 2024
a1de5fb
Added missing aria-labels
Mil4n0r Mar 14, 2024
11d0709
Added rules to prevent remaining issues
Mil4n0r Mar 15, 2024
4a1fa72
Added GitHub accessibility flows
Mil4n0r Mar 15, 2024
29f5716
Merge branch 'master' of github.com:dxc-technology/halstack-react int…
Mil4n0r Mar 15, 2024
bb1910b
Fixed focusable problem
Mil4n0r Mar 15, 2024
199e7db
Added some alt text for icons
Mil4n0r Mar 18, 2024
d41e13b
Merge branch 'master' of github.com:dxc-technology/halstack-react int…
Mil4n0r Mar 19, 2024
6b4c688
Merge branch 'master' of github.com:dxc-technology/halstack-react int…
Mil4n0r Mar 19, 2024
c3c579e
Added exception rules, fixed jest-axe tests rules, modified pipeline …
Mil4n0r Mar 19, 2024
a7e19aa
Removed unused object 'AdvancedTheme'
Mil4n0r Mar 19, 2024
efa3f15
Added role alert instead of status for Errors
Mil4n0r Mar 19, 2024
da6a023
Removed tabIndex from table
Mil4n0r Mar 19, 2024
59d132e
Added exception rules as a temporal solution for tables scroll
Mil4n0r Mar 20, 2024
6f08baa
Merge branch 'master' into Mil4n0r/accessibility-found-fixes
raquelarrojo Mar 20, 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
14 changes: 7 additions & 7 deletions .github/workflows/chromatic.yml
raquelarrojo marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
Expand Up @@ -36,10 +36,10 @@ jobs:
exitOnceUploaded: true
exitZeroOnChanges: true
workingDir: lib
# - name: Run Storybook Tests
# run: |
# cd lib
# npx playwright install --with-deps
# npm run storybook:accessibility
# env:
# TARGET_URL: "${{ steps.chromatic_publish.outputs.storybookUrl }}"
- name: Run Storybook Tests
run: |
cd lib
npx playwright install --with-deps
npm run storybook:accessibility
env:
TARGET_URL: "${{ steps.chromatic_publish.outputs.storybookUrl }}"
3 changes: 3 additions & 0 deletions .github/workflows/publish-next.yml
raquelarrojo marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,9 @@ jobs:
- name: Test library
run: cd lib && npm run test

- name: Test library accessibility
run: cd lib && npm run test:accessibility

- name: Build website
run: cd website && SITE_VERSION=next npm run build

Expand Down
3 changes: 3 additions & 0 deletions .github/workflows/publish-release.yml
raquelarrojo marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,9 @@ jobs:
- name: Test library
run: cd lib && npm run test

- name: Test library accessibility
run: cd lib && npm run test:accessibility

- name: Publish RELEASE to npm
run: |
sed -i "s#\"version\": \"0.0.0\"#\"version\": \"${TAG_NAME}\"#" ./dist/package.json
Expand Down
4 changes: 2 additions & 2 deletions .github/workflows/pull-request.yml
raquelarrojo marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,8 @@ jobs:
- name: Test library
run: cd lib && npm run test

# - name: Test library accessibility
# run: cd lib && npm run test:accessibility
- name: Test library accessibility
run: cd lib && npm run test:accessibility

- name: Build website
run: cd website && npm run build
4 changes: 2 additions & 2 deletions app/src/pages/Accordion.jsx
raquelarrojo marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
Expand Up @@ -50,10 +50,10 @@ function App() {
enableBackground="new 0 0 24 24"
fill="currentColor"
>
<g id="Bounding_Box">
<g>
<rect fill="none" width="24" height="24" />
</g>
<g id="Master">
<g>
<path d="M19,9.3V4h-3v2.6L12,3L2,12h3v8h5v-6h4v6h5v-8h3L19,9.3z M10,10c0-1.1,0.9-2,2-2s2,0.9,2,2H10z" />
</g>
</svg>
Expand Down
24 changes: 12 additions & 12 deletions app/src/pages/Button.jsx
raquelarrojo marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
Expand Up @@ -66,10 +66,10 @@ function App() {
enableBackground="new 0 0 24 24"
fill="currentColor"
>
<g id="Bounding_Box">
<g>
<rect fill="none" width="24" height="24" />
</g>
<g id="Master">
<g>
<path d="M19,9.3V4h-3v2.6L12,3L2,12h3v8h5v-6h4v6h5v-8h3L19,9.3z M10,10c0-1.1,0.9-2,2-2s2,0.9,2,2H10z" />
</g>
</svg>
Expand All @@ -92,10 +92,10 @@ function App() {
enableBackground="new 0 0 24 24"
fill="currentColor"
>
<g id="Bounding_Box">
<g>
<rect fill="none" width="24" height="24" />
</g>
<g id="Master">
<g>
<path d="M19,9.3V4h-3v2.6L12,3L2,12h3v8h5v-6h4v6h5v-8h3L19,9.3z M10,10c0-1.1,0.9-2,2-2s2,0.9,2,2H10z" />
</g>
</svg>
Expand All @@ -118,10 +118,10 @@ function App() {
enableBackground="new 0 0 24 24"
fill="currentColor"
>
<g id="Bounding_Box">
<g>
<rect fill="none" width="24" height="24" />
</g>
<g id="Master">
<g>
<path d="M19,9.3V4h-3v2.6L12,3L2,12h3v8h5v-6h4v6h5v-8h3L19,9.3z M10,10c0-1.1,0.9-2,2-2s2,0.9,2,2H10z" />
</g>
</svg>
Expand Down Expand Up @@ -286,10 +286,10 @@ function App() {
enableBackground="new 0 0 24 24"
fill="currentColor"
>
<g id="Bounding_Box">
<g>
<rect fill="none" width="24" height="24" />
</g>
<g id="Master">
<g>
<path d="M19,9.3V4h-3v2.6L12,3L2,12h3v8h5v-6h4v6h5v-8h3L19,9.3z M10,10c0-1.1,0.9-2,2-2s2,0.9,2,2H10z" />
</g>
</svg>
Expand Down Expand Up @@ -356,10 +356,10 @@ function App() {
enableBackground="new 0 0 24 24"
fill="yellow"
>
<g id="Bounding_Box">
<g>
<rect fill="none" width="24" height="24" />
</g>
<g id="Master">
<g>
<path d="M19,9.3V4h-3v2.6L12,3L2,12h3v8h5v-6h4v6h5v-8h3L19,9.3z M10,10c0-1.1,0.9-2,2-2s2,0.9,2,2H10z" />
</g>
</svg>
Expand Down Expand Up @@ -484,10 +484,10 @@ function App() {
enableBackground="new 0 0 24 24"
fill="currentColor"
>
<g id="Bounding_Box">
<g>
<rect fill="none" width="24" height="24" />
</g>
<g id="Master">
<g>
<path d="M19,9.3V4h-3v2.6L12,3L2,12h3v8h5v-6h4v6h5v-8h3L19,9.3z M10,10c0-1.1,0.9-2,2-2s2,0.9,2,2H10z" />
</g>
</svg>
Expand Down
4 changes: 2 additions & 2 deletions app/src/pages/Link.jsx
raquelarrojo marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
Expand Up @@ -112,10 +112,10 @@ function App() {
enableBackground="new 0 0 24 24"
fill="currentColor"
>
<g id="Bounding_Box">
<g>
<rect fill="none" width="24" height="24" />
</g>
<g id="Master">
<g>
<path d="M19,9.3V4h-3v2.6L12,3L2,12h3v8h5v-6h4v6h5v-8h3L19,9.3z M10,10c0-1.1,0.9-2,2-2s2,0.9,2,2H10z" />
</g>
</svg>
Expand Down
4 changes: 2 additions & 2 deletions app/src/pages/TextInput.jsx
raquelarrojo marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
Expand Up @@ -372,10 +372,10 @@ function App() {
viewBox="0 0 24 24"
enableBackground="new 0 0 24 24"
>
<g id="Bounding_Box">
<g>
<rect fill="none" width="24" height="24" />
</g>
<g id="Master">
<g>
<path d="M19,9.3V4h-3v2.6L12,3L2,12h3v8h5v-6h4v6h5v-8h3L19,9.3z M10,10c0-1.1,0.9-2,2-2s2,0.9,2,2H10z" />
</g>
</svg>
Expand Down
8 changes: 4 additions & 4 deletions app/src/pages/ToggleGroup.jsx
raquelarrojo marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
Expand Up @@ -64,10 +64,10 @@ function App() {
enableBackground="new 0 0 24 24"
fill="currentColor"
>
<g id="Bounding_Box">
<g>
<rect fill="none" width="24" height="24" />
</g>
<g id="Master">
<g>
<path d="M19,9.3V4h-3v2.6L12,3L2,12h3v8h5v-6h4v6h5v-8h3L19,9.3z M10,10c0-1.1,0.9-2,2-2s2,0.9,2,2H10z" />
</g>
</svg>
Expand All @@ -93,10 +93,10 @@ function App() {
enableBackground="new 0 0 24 24"
fill="currentColor"
>
<g id="Bounding_Box">
<g>
<rect fill="none" width="24" height="24" />
</g>
<g id="Master">
<g>
<path d="M19,9.3V4h-3v2.6L12,3L2,12h3v8h5v-6h4v6h5v-8h3L19,9.3z M10,10c0-1.1,0.9-2,2-2s2,0.9,2,2H10z" />
</g>
</svg>
Expand Down
8 changes: 4 additions & 4 deletions app/src/pages/Wizard.jsx
raquelarrojo marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,10 @@ import homeIcon from "../images/home.svg";
const homeSVG = () => {
return (
<svg width="24px" height="24px" viewBox="0 0 24 24" fill="currentColor">
<g id="Bounding_Box">
<g>
<rect fill="none" width="24" height="24" />
</g>
<g id="Master">
<g>
<path d="M19,9.3V4h-3v2.6L12,3L2,12h3v8h5v-6h4v6h5v-8h3L19,9.3z M10,10c0-1.1,0.9-2,2-2s2,0.9,2,2H10z" />
</g>
</svg>
Expand Down Expand Up @@ -82,10 +82,10 @@ function Wizard() {
viewBox="0 0 24 24"
fill="currentColor"
>
<g id="Bounding_Box">
<g>
<rect fill="none" width="24" height="24" />
</g>
<g id="Master">
<g>
<path d="M19,9.3V4h-3v2.6L12,3L2,12h3v8h5v-6h4v6h5v-8h3L19,9.3z M10,10c0-1.1,0.9-2,2-2s2,0.9,2,2H10z" />
</g>
</svg>
Expand Down
24 changes: 10 additions & 14 deletions lib/.storybook/components/Title.tsx
raquelarrojo marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
Expand Up @@ -2,25 +2,21 @@ import React from "react";
import styled from "styled-components";

type Props = {
title?: string,
theme?: string,
level?: number,
title?: string;
theme?: string;
level?: number;
};

const Title = ({ title, theme, level }: Props): JSX.Element => {
return level === 2 ? (
<SectionTitle theme={theme}>{title}</SectionTitle>
) : (
<ExampleTitle theme={theme}>{title}</ExampleTitle>
const Title = ({ title, theme, level = 4 }: Props): JSX.Element => {
const headingLevel = `h${level}` as keyof JSX.IntrinsicElements;
return (
<SectionTitle theme={theme} as={headingLevel}>
{title}
</SectionTitle>
);
};

const SectionTitle = styled.h2`
font-family: Open Sans, sans-serif;
color: ${(props) => (props.theme === "dark" ? "#FFFFFF" : "#000000")};
`;

const ExampleTitle = styled.h4`
const SectionTitle = styled.div`
font-family: Open Sans, sans-serif;
color: ${(props) => (props.theme === "dark" ? "#FFFFFF" : "#000000")};
`;
Expand Down
7 changes: 7 additions & 0 deletions lib/.storybook/preview.tsx
raquelarrojo marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { HalstackProvider } from "../src/HalstackContext";
import styled from "styled-components";
import type { Preview } from "@storybook/react";
import React from "react";
import { disabledRules } from "../test/accessibility/rules/common/disabledRules";

const preview: Preview = {
parameters: {
Expand All @@ -12,6 +13,12 @@ const preview: Preview = {
date: /Date$/i,
},
},
a11y: {
config: {
rules: disabledRules.map((ruleId) => ({ id: ruleId, enabled: false })),
},
options: {},
},
},
decorators: [
(Story) => (
Expand Down
26 changes: 25 additions & 1 deletion lib/.storybook/test-runner.ts
raquelarrojo marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
@@ -1,10 +1,33 @@
import { injectAxe, checkA11y, configureAxe } from "axe-playwright";

import { getStoryContext, type TestRunnerConfig } from "@storybook/test-runner";
import { ViewportParameters, ViewportStyles } from "./types";

const DEFAULT_VIEWPORT_SIZE = { width: 1280, height: 720 };

const a11yConfig: TestRunnerConfig = {
async preVisit(page) {
async preVisit(page, context) {
await injectAxe(page);

// Get the entire context of a story, including parameters, args, argTypes, etc.
const storyContext = await getStoryContext(page, context);
// Apply viewport handle support
const viewPortParams: ViewportParameters = storyContext.parameters?.viewport;
const defaultViewport = viewPortParams?.defaultViewport;
const viewport = defaultViewport && viewPortParams.viewports[defaultViewport].styles;
const parsedViewportSizes: ViewportStyles = viewport
? Object.entries(viewport).reduce(
(acc, [screen, size]) => ({
...acc,
[screen]: parseInt(size),
}),
{} as ViewportStyles
)
: DEFAULT_VIEWPORT_SIZE;

if (parsedViewportSizes && Object.keys(parsedViewportSizes)?.length !== 0) {
page.setViewportSize(parsedViewportSizes);
}
},
async postVisit(page, context) {
// Get the entire context of a story, including parameters, args, argTypes, etc.
Expand All @@ -13,6 +36,7 @@ const a11yConfig: TestRunnerConfig = {
if (storyContext.parameters?.a11y?.disable) {
return;
}

// Apply story-level a11y rules
await configureAxe(page, {
rules: storyContext.parameters?.a11y?.config?.rules,
Expand Down
17 changes: 17 additions & 0 deletions lib/.storybook/types.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
type Styles = ViewportStyles | ((s: ViewportStyles | undefined) => ViewportStyles) | null;
interface Viewport {
name: string;
styles: Styles;
type: "desktop" | "mobile" | "tablet" | "other";
}
export interface ViewportStyles {
height: number;
width: number;
}
interface ViewportMap {
[key: string]: Viewport;
}
export interface ViewportParameters {
viewports: ViewportMap;
defaultViewport: string;
}
2 changes: 1 addition & 1 deletion lib/jest.config.accessibility.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,5 +6,5 @@ module.exports = {
"^uuid$": "uuid",
},
testMatch: ["**/?(*.)+(accessibility.)(spec|test).[jt]s?(x)"],
setupFilesAfterEnv: ['<rootDir>/setupJestAxe.js']
setupFilesAfterEnv: ["<rootDir>/setupJestAxe.js"],
};
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from "react";
import { render } from "@testing-library/react";
import DxcAccordionGroup from "./AccordionGroup.tsx";
import { axe } from "jest-axe";
import { axe } from "../../test/accessibility/axe-helper.js";

const folderIcon = (
<svg
Expand Down
Loading
Loading