Skip to content

Commit

Permalink
feat: #22 acessibility and general fixes (#34)
Browse files Browse the repository at this point in the history 
* fix: resolved rendering of accordion component

* fix: reverted key to index

* chore: renamed storybook main file as warning says v8 esm only

* chore: attempting to resolve storybook issues

* refactor: used story source to compile html of components

* chore: revert changes made debugging memory leak

* refactor: converted to fancy code blocks

* chore: reverted prettier version

* refactor: resolved html source components

* fix: readded argstable for accordion

* refactor: added sources for utilities

* fix: resolve prettier linting issue by reverting eslint-plugin-prettier

* fix: added context to theming html render block

* chore: fix linting of all story components

* refactor: updated argstable to controls for v8

* feat: added aria labels to accordion

* feat: breadcrumb aira labels

* feat: added aria labels to icon, file input and key value list

* feat: added accessibility labels to mobile control component

* feat: added aria labels to modal

* feat: updated snaps with aria labels etc

* feat: added accessibility labels to pagination items

* feat: added roles to placeholder and persistent notification

* feat: added aria labels to progress bar

* feat: tooltip aria labels

* feat: added roles and aria labels to table components

* feat: added role attributes to tabs

* feat: #22 lints files, fixes html renderer

---------

Co-authored-by: Will McVay <wmcvay@reapit.com>
  • Loading branch information
@bashleigh @willmcvay
bashleigh and willmcvay committed Mar 4, 2024
1 parent 288b4c1 commit 9265d09
Show file tree
Hide file tree
Showing 130 changed files with 2,015 additions and 1,805 deletions.
10 changes: 9 additions & 1 deletion .storybook/main.js → .storybook/main.mjs
View file
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
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",
"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
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
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

0 comments on commit 9265d09

Please sign in to comment.