Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
feat(website): add a helper to generate common accessibility props
  • Loading branch information
plouc committed Dec 31, 2021
1 parent 90edbd0 commit 63a7eb6
Show file tree
Hide file tree
Showing 6 changed files with 62 additions and 114 deletions.
26 changes: 2 additions & 24 deletions website/src/data/components/bar/props.ts
Expand Up @@ -12,6 +12,7 @@ import {
chartGrid,
axes,
isInteractive,
commonAccessibilityProps,
} from '../../../lib/chart-properties'
import { ChartProperty, Flavor } from '../../../types'

Expand Down Expand Up @@ -540,30 +541,7 @@ const props: ChartProperty[] = [
type: 'boolean',
control: { type: 'switch' },
},
{
key: 'ariaLabel',
flavors: ['svg'],
required: false,
group: 'Accessibility',
help: 'Main element [aria-label](https://www.w3.org/TR/wai-aria/#aria-label).',
type: 'string',
},
{
key: 'ariaLabelledBy',
flavors: ['svg'],
required: false,
group: 'Accessibility',
help: 'Main element [aria-labelledby](https://www.w3.org/TR/wai-aria/#aria-labelledby).',
type: 'string',
},
{
key: 'ariaDescribedBy',
flavors: ['svg'],
required: false,
group: 'Accessibility',
help: 'Main element [aria-describedby](https://www.w3.org/TR/wai-aria/#aria-describedby).',
type: 'string',
},
...commonAccessibilityProps(['svg']),
{
key: 'barAriaLabel',
flavors: ['svg'],
Expand Down
39 changes: 6 additions & 33 deletions website/src/data/components/network/props.ts
@@ -1,6 +1,10 @@
import { commonDefaultProps } from '@nivo/network'
import { groupProperties, themeProperty, motionProperties } from '../../../lib/componentProperties'
import { chartDimensions, isInteractive } from '../../../lib/chart-properties'
import {
chartDimensions,
isInteractive,
commonAccessibilityProps,
} from '../../../lib/chart-properties'
import { ChartProperty, Flavor } from '../../../types'

const allFlavors: Flavor[] = ['svg', 'canvas']
Expand Down Expand Up @@ -246,38 +250,7 @@ const props: ChartProperty[] = [
defaultValue: commonDefaultProps.layers,
flavors: ['svg', 'canvas'],
},
{
key: 'role',
group: 'Accessibility',
type: 'string',
required: false,
help: 'Main element role attribute.',
flavors: ['svg'],
},
{
key: 'ariaLabel',
group: 'Accessibility',
type: 'string',
required: false,
help: 'Main element [aria-label](https://www.w3.org/TR/wai-aria/#aria-label).',
flavors: ['svg'],
},
{
key: 'ariaLabelledBy',
group: 'Accessibility',
type: 'string',
required: false,
help: 'Main element [aria-labelledby](https://www.w3.org/TR/wai-aria/#aria-labelledby).',
flavors: ['svg'],
},
{
key: 'ariaDescribedBy',
group: 'Accessibility',
type: 'string',
required: false,
help: 'Main element [aria-describedby](https://www.w3.org/TR/wai-aria/#aria-describedby).',
flavors: ['svg'],
},
...commonAccessibilityProps(['svg']),
...motionProperties(['svg'], commonDefaultProps, 'react-spring'),
]

Expand Down
40 changes: 7 additions & 33 deletions website/src/data/components/radial-bar/props.ts
Expand Up @@ -7,7 +7,12 @@ import {
getLegendsProps,
polarAxisProperty,
} from '../../../lib/componentProperties'
import { chartDimensions, ordinalColors, isInteractive } from '../../../lib/chart-properties'
import {
chartDimensions,
ordinalColors,
isInteractive,
commonAccessibilityProps,
} from '../../../lib/chart-properties'
import { ChartProperty, Flavor } from '../../../types'

const allFlavors: Flavor[] = ['svg']
Expand Down Expand Up @@ -445,38 +450,7 @@ const props: ChartProperty[] = [
},
},
},
{
key: 'role',
group: 'Accessibility',
type: 'string',
required: false,
help: 'Main element role attribute.',
flavors: allFlavors,
},
{
key: 'ariaLabel',
group: 'Accessibility',
type: 'string',
required: false,
help: 'Main element [aria-label](https://www.w3.org/TR/wai-aria/#aria-label).',
flavors: allFlavors,
},
{
key: 'ariaLabelledBy',
group: 'Accessibility',
type: 'string',
required: false,
help: 'Main element [aria-labelledby](https://www.w3.org/TR/wai-aria/#aria-labelledby).',
flavors: allFlavors,
},
{
key: 'ariaDescribedBy',
group: 'Accessibility',
type: 'string',
required: false,
help: 'Main element [aria-describedby](https://www.w3.org/TR/wai-aria/#aria-describedby).',
flavors: allFlavors,
},
...commonAccessibilityProps(allFlavors),
...motionProperties(allFlavors, svgDefaultProps, 'react-spring'),
{
key: 'transitionMode',
Expand Down
26 changes: 2 additions & 24 deletions website/src/data/components/stream/props.ts
Expand Up @@ -13,6 +13,7 @@ import {
chartGrid,
axes,
isInteractive,
commonAccessibilityProps,
} from '../../../lib/chart-properties'
import { ChartProperty, Flavor } from '../../../types'

Expand Down Expand Up @@ -321,30 +322,7 @@ const props: ChartProperty[] = [
group: 'Interactivity',
},
...motionProperties(['svg'], defaultProps, 'react-spring'),
{
key: 'ariaLabel',
flavors: ['svg'],
group: 'Accessibility',
help: 'Main element [aria-label](https://www.w3.org/TR/wai-aria/#aria-label).',
type: 'string',
required: false,
},
{
key: 'ariaLabelledBy',
flavors: ['svg'],
group: 'Accessibility',
help: 'Main element [aria-labelledby](https://www.w3.org/TR/wai-aria/#aria-labelledby).',
type: 'string',
required: false,
},
{
key: 'ariaDescribedBy',
flavors: ['svg'],
group: 'Accessibility',
help: 'Main element [aria-describedby](https://www.w3.org/TR/wai-aria/#aria-describedby).',
type: 'string',
required: false,
},
...commonAccessibilityProps(['svg']),
]

export const groups = groupProperties(props)
44 changes: 44 additions & 0 deletions website/src/lib/chart-properties/accessibility.ts
@@ -0,0 +1,44 @@
import { ChartProperty, Flavor } from '../../types'

export const role = (flavors: Flavor[]): ChartProperty => ({
key: 'role',
group: 'Accessibility',
type: 'string',
required: false,
help: 'Main element role attribute.',
flavors,
})

export const ariaLabel = (flavors: Flavor[]): ChartProperty => ({
key: 'ariaLabel',
group: 'Accessibility',
type: 'string',
required: false,
help: 'Main element [aria-label](https://www.w3.org/TR/wai-aria/#aria-label).',
flavors,
})

export const ariaLabelledBy = (flavors: Flavor[]): ChartProperty => ({
key: 'ariaLabelledBy',
group: 'Accessibility',
type: 'string',
required: false,
help: 'Main element [aria-labelledby](https://www.w3.org/TR/wai-aria/#aria-labelledby).',
flavors,
})

export const ariaDescribedBy = (flavors: Flavor[]): ChartProperty => ({
key: 'ariaDescribedBy',
group: 'Accessibility',
type: 'string',
required: false,
help: 'Main element [aria-describedby](https://www.w3.org/TR/wai-aria/#aria-describedby).',
flavors,
})

export const commonAccessibilityProps = (flavors: Flavor[]): ChartProperty[] => [
role(flavors),
ariaLabel(flavors),
ariaLabelledBy(flavors),
ariaDescribedBy(flavors),
]
1 change: 1 addition & 0 deletions website/src/lib/chart-properties/index.ts
@@ -1,3 +1,4 @@
export * from './accessibility'
export * from './axes'
export * from './chart-dimensions'
export * from './colors'
Expand Down

0 comments on commit 63a7eb6

Please sign in to comment.