Skip to content

feat: #22 acessibility and general fixes #34

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
merged 28 commits into from
Feb 28, 2024
Merged

feat: #22 acessibility and general fixes #34

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
28 commits
Select commit Hold shift + click to select a range
8738b52
fix: resolved rendering of accordion component
bashleigh Feb 26, 2024
cbf27ac
fix: reverted key to index
bashleigh Feb 26, 2024
76adfb8
chore: renamed storybook main file as warning says v8 esm only
bashleigh Feb 27, 2024
856d648
chore: attempting to resolve storybook issues
bashleigh Feb 27, 2024
9dc2106
refactor: used story source to compile html of components
bashleigh Feb 27, 2024
0995db8
chore: revert changes made debugging memory leak
bashleigh Feb 27, 2024
f06e79d
refactor: converted to fancy code blocks
bashleigh Feb 27, 2024
2ada4d7
chore: reverted prettier version
bashleigh Feb 27, 2024
563bb04
refactor: resolved html source components
bashleigh Feb 27, 2024
81a143f
fix: readded argstable for accordion
bashleigh Feb 27, 2024
8d84cca
refactor: added sources for utilities
bashleigh Feb 27, 2024
bd19008
fix: resolve prettier linting issue by reverting eslint-plugin-prettier
bashleigh Feb 27, 2024
aecfc93
fix: added context to theming html render block
bashleigh Feb 27, 2024
3be5133
chore: fix linting of all story components
bashleigh Feb 27, 2024
c29da24
refactor: updated argstable to controls for v8
bashleigh Feb 28, 2024
311b255
feat: added aria labels to accordion
bashleigh Feb 28, 2024
9140398
feat: breadcrumb aira labels
bashleigh Feb 28, 2024
c4dbc14
feat: added aria labels to icon, file input and key value list
bashleigh Feb 28, 2024
cc8b108
feat: added accessibility labels to mobile control component
bashleigh Feb 28, 2024
040721f
feat: added aria labels to modal
bashleigh Feb 28, 2024
84ffcd8
feat: updated snaps with aria labels etc
bashleigh Feb 28, 2024
ce46c72
feat: added accessibility labels to pagination items
bashleigh Feb 28, 2024
d09c9d6
feat: added roles to placeholder and persistent notification
bashleigh Feb 28, 2024
33f7732
feat: added aria labels to progress bar
bashleigh Feb 28, 2024
f4f0fc4
feat: tooltip aria labels
bashleigh Feb 28, 2024
6c3e6f7
feat: added roles and aria labels to table components
bashleigh Feb 28, 2024
aead4a1
feat: added role attributes to tabs
bashleigh Feb 28, 2024
006e964
feat: #22 lints files, fixes html renderer
willmcvay Feb 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
10 changes: 9 additions & 1 deletion .storybook/main.js → .storybook/main.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,13 +23,21 @@ module.exports = {
},
},
],
core: {
builder: '@storybook/builder-vite',
},
loader: { '.js': 'jsx' },
async viteFinal(config, { configType }) {
if (configType === 'DEVELOPMENT') {
config.optimizeDeps.include = [...config?.optimizeDeps?.include, 'jest-mock']
}

config.plugins.push(linaria(), svgrPlugin({ icon: true }))
config.plugins.push(
linaria(),
svgrPlugin({
icon: true,
}),
)

config.define = {
...config.define,
Expand Down
7 changes: 4 additions & 3 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,7 @@
"@storybook/addon-storysource": "^7.6.17",
"@storybook/addons": "^7.6.17",
"@storybook/blocks": "^7.6.17",
"@storybook/builder-vite": "^7.6.17",
"@storybook/cli": "^7.6.17",
"@storybook/csf": "^0.1.2",
"@storybook/react": "^7.6.17",
Expand Down Expand Up @@ -102,7 +103,7 @@
"dashify": "2.0.0",
"eslint": "8.54.0",
"eslint-config-prettier": "^8.10.0",
"eslint-plugin-prettier": "^5.1.3",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-react": "^7.33.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-storybook": "^0.6.15",
Expand All @@ -113,7 +114,7 @@
"node-polyfill-webpack-plugin": "^1.1.4",
"postcss": "^8.4.31",
"postcss-flexbugs-fixes": "^5.0.2",
"prettier": "^3.2.5",
"prettier": "2.2.1",
Copy link
Contributor

Choose a reason for hiding this comment

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

So you didn't upgrade prettier in the end?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

no 😭

"react": "^18.0.2",
"react-docgen-typescript-loader": "^3.7.2",
"react-dom": "^18.0.2",
Expand All @@ -128,7 +129,7 @@
"tslib": "^2.6.2",
"typescript": "4.9.5",
"url-loader": "^4.1.1",
"vite": "^5.0.12",
"vite": "^5.1.4",
"vite-plugin-svgr": "^4.2.0"
},
"peerDependencies": {
Expand Down
60 changes: 56 additions & 4 deletions src/components/accordion/__tests__/__snapshots__/accordion.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ exports[`Accordion basic usage should match a snapshot 1`] = `
classname="mock-css.
margin-right: 0.25rem;
"
role="img"
>
<svg />
</mock-styled.span>
Expand All @@ -26,6 +27,7 @@ exports[`Accordion basic usage should match a snapshot 1`] = `
classname="mock-css.
margin-right: 0.25rem;
"
role="img"
>
<svg />
</mock-styled.span>
Expand All @@ -34,6 +36,7 @@ exports[`Accordion basic usage should match a snapshot 1`] = `
<mock-styled.div>
<mock-styled.span
classname=""
role="img"
>
<svg />
</mock-styled.span>
Expand All @@ -55,6 +58,7 @@ exports[`Accordion basic usage should match a snapshot 1`] = `
classname="mock-css.
margin-right: 0.25rem;
"
role="img"
>
<svg />
</mock-styled.span>
Expand All @@ -65,6 +69,7 @@ exports[`Accordion basic usage should match a snapshot 1`] = `
classname="mock-css.
margin-right: 0.25rem;
"
role="img"
>
<svg />
</mock-styled.span>
Expand All @@ -73,6 +78,7 @@ exports[`Accordion basic usage should match a snapshot 1`] = `
<mock-styled.div>
<mock-styled.span
classname=""
role="img"
>
<svg />
</mock-styled.span>
Expand All @@ -97,6 +103,7 @@ exports[`Accordion basic usage should match a snapshot 1`] = `
classname="mock-css.
margin-right: 0.25rem;
"
role="img"
>
<svg />
</mock-styled.span>
Expand All @@ -107,6 +114,7 @@ exports[`Accordion basic usage should match a snapshot 1`] = `
classname="mock-css.
margin-right: 0.25rem;
"
role="img"
>
<svg />
</mock-styled.span>
Expand All @@ -115,6 +123,7 @@ exports[`Accordion basic usage should match a snapshot 1`] = `
<mock-styled.div>
<mock-styled.span
classname=""
role="img"
>
<svg />
</mock-styled.span>
Expand All @@ -136,6 +145,7 @@ exports[`Accordion basic usage should match a snapshot 1`] = `
classname="mock-css.
margin-right: 0.25rem;
"
role="img"
>
<svg />
</mock-styled.span>
Expand All @@ -146,6 +156,7 @@ exports[`Accordion basic usage should match a snapshot 1`] = `
classname="mock-css.
margin-right: 0.25rem;
"
role="img"
>
<svg />
</mock-styled.span>
Expand All @@ -154,6 +165,7 @@ exports[`Accordion basic usage should match a snapshot 1`] = `
<mock-styled.div>
<mock-styled.span
classname=""
role="img"
>
<svg />
</mock-styled.span>
Expand Down Expand Up @@ -225,7 +237,10 @@ exports[`Accordion react shorthand should match a snapshot 1`] = `
"baseElement": <body>
<div>
<mock-styled.div>
<mock-styled.div>
<mock-styled.div
aria-controls=":r0:-0"
id=":r1:-0"
>
<mock-styled.div>
Accordion Item 1
</mock-styled.div>
Expand All @@ -235,6 +250,7 @@ exports[`Accordion react shorthand should match a snapshot 1`] = `
classname="mock-css.
margin-right: 0.25rem;
"
role="img"
>
<svg />
</mock-styled.span>
Expand All @@ -245,6 +261,7 @@ exports[`Accordion react shorthand should match a snapshot 1`] = `
classname="mock-css.
margin-right: 0.25rem;
"
role="img"
>
<svg />
</mock-styled.span>
Expand All @@ -255,6 +272,7 @@ exports[`Accordion react shorthand should match a snapshot 1`] = `
classname="mock-css. mock-css.
font-size: 1.5rem;
"
role="img"
style="font-size: 1.25rem;"
>
<svg
Expand All @@ -265,11 +283,18 @@ exports[`Accordion react shorthand should match a snapshot 1`] = `
</mock-styled.div>
</mock-styled.div>
<mock-styled.div
aria-expanded="false"
aria-labelledby=":r1:-0"
classname=""
id=":r0:-0"
role="region"
>
Accordion Content 1
</mock-styled.div>
<mock-styled.div>
<mock-styled.div
aria-controls=":r0:-1"
id=":r1:-1"
>
<mock-styled.div>
Accordion Item 2
</mock-styled.div>
Expand All @@ -279,6 +304,7 @@ exports[`Accordion react shorthand should match a snapshot 1`] = `
classname="mock-css.
margin-right: 0.25rem;
"
role="img"
>
<svg />
</mock-styled.span>
Expand All @@ -289,6 +315,7 @@ exports[`Accordion react shorthand should match a snapshot 1`] = `
classname="mock-css.
margin-right: 0.25rem;
"
role="img"
>
<svg />
</mock-styled.span>
Expand All @@ -299,6 +326,7 @@ exports[`Accordion react shorthand should match a snapshot 1`] = `
classname="mock-css. mock-css.
font-size: 1.5rem;
"
role="img"
style="font-size: 1.25rem;"
>
<svg
Expand All @@ -309,7 +337,11 @@ exports[`Accordion react shorthand should match a snapshot 1`] = `
</mock-styled.div>
</mock-styled.div>
<mock-styled.div
aria-expanded="false"
aria-labelledby=":r1:-1"
classname=""
id=":r0:-1"
role="region"
>
Accordion Content 2
</mock-styled.div>
Expand All @@ -318,7 +350,10 @@ exports[`Accordion react shorthand should match a snapshot 1`] = `
</body>,
"container": <div>
<mock-styled.div>
<mock-styled.div>
<mock-styled.div
aria-controls=":r0:-0"
id=":r1:-0"
>
<mock-styled.div>
Accordion Item 1
</mock-styled.div>
Expand All @@ -328,6 +363,7 @@ exports[`Accordion react shorthand should match a snapshot 1`] = `
classname="mock-css.
margin-right: 0.25rem;
"
role="img"
>
<svg />
</mock-styled.span>
Expand All @@ -338,6 +374,7 @@ exports[`Accordion react shorthand should match a snapshot 1`] = `
classname="mock-css.
margin-right: 0.25rem;
"
role="img"
>
<svg />
</mock-styled.span>
Expand All @@ -348,6 +385,7 @@ exports[`Accordion react shorthand should match a snapshot 1`] = `
classname="mock-css. mock-css.
font-size: 1.5rem;
"
role="img"
style="font-size: 1.25rem;"
>
<svg
Expand All @@ -358,11 +396,18 @@ exports[`Accordion react shorthand should match a snapshot 1`] = `
</mock-styled.div>
</mock-styled.div>
<mock-styled.div
aria-expanded="false"
aria-labelledby=":r1:-0"
classname=""
id=":r0:-0"
role="region"
>
Accordion Content 1
</mock-styled.div>
<mock-styled.div>
<mock-styled.div
aria-controls=":r0:-1"
id=":r1:-1"
>
<mock-styled.div>
Accordion Item 2
</mock-styled.div>
Expand All @@ -372,6 +417,7 @@ exports[`Accordion react shorthand should match a snapshot 1`] = `
classname="mock-css.
margin-right: 0.25rem;
"
role="img"
>
<svg />
</mock-styled.span>
Expand All @@ -382,6 +428,7 @@ exports[`Accordion react shorthand should match a snapshot 1`] = `
classname="mock-css.
margin-right: 0.25rem;
"
role="img"
>
<svg />
</mock-styled.span>
Expand All @@ -392,6 +439,7 @@ exports[`Accordion react shorthand should match a snapshot 1`] = `
classname="mock-css. mock-css.
font-size: 1.5rem;
"
role="img"
style="font-size: 1.25rem;"
>
<svg
Expand All @@ -402,7 +450,11 @@ exports[`Accordion react shorthand should match a snapshot 1`] = `
</mock-styled.div>
</mock-styled.div>
<mock-styled.div
aria-expanded="false"
aria-labelledby=":r1:-1"
classname=""
id=":r0:-1"
role="region"
>
Accordion Content 2
</mock-styled.div>
Expand Down
22 changes: 9 additions & 13 deletions src/components/accordion/accordion.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Meta, Story, Canvas, ArgsTable } from '@storybook/blocks'
import { Meta, Story, Canvas, Source, Controls } from '@storybook/blocks'
import { Accordion } from './index'
import { RenderHtmlMarkup } from '../../storybook/render-html-markup'
import * as AccordionStories from './accordion.stories'
Expand All @@ -13,28 +13,24 @@ To open the accordion for vanilla usage, you will need to both toggle the `elIsA

## Basic Usage

<Canvas>
<Story of={AccordionStories.BasicUsage} />
</Canvas>
<Canvas of={AccordionStories.BasicUsage} />

<RenderHtmlMarkup component="Accordion" story="Basic Usage" />
<RenderHtmlMarkup of={AccordionStories.BasicUsage} />

## React Usage

The React shorthand version of the Accordion handles the toggling of active classes for you. The props accepted by the `AccordionItem` are below along with the `AccordionItemProps` interface.
<Controls />

<ArgsTable of={Accordion} />
The React shorthand version of the Accordion handles the toggling of active classes for you. The props accepted by the `AccordionItem` are below along with the `AccordionItemProps` interface.

```ts
<Source code={`
export interface AccordionItemProps {
title: string
titleItems?: ReactNode[]
content: ReactNode
}
```
`} language="typescript" />

<Canvas>
<Story of={AccordionStories.ReactUsage} />
</Canvas>
<Canvas of={AccordionStories.ReactUsage} />

<RenderHtmlMarkup component="Accordion" story="React Usage" />
<RenderHtmlMarkup of={AccordionStories.ReactUsage} />
Loading