From 63a7eb60472504bedbdaef238e54497b63efa19a Mon Sep 17 00:00:00 2001 From: plouc Date: Wed, 29 Dec 2021 22:26:06 +0900 Subject: [PATCH] feat(website): add a helper to generate common accessibility props --- website/src/data/components/bar/props.ts | 26 +---------- website/src/data/components/network/props.ts | 39 +++------------- .../src/data/components/radial-bar/props.ts | 40 +++-------------- website/src/data/components/stream/props.ts | 26 +---------- .../src/lib/chart-properties/accessibility.ts | 44 +++++++++++++++++++ website/src/lib/chart-properties/index.ts | 1 + 6 files changed, 62 insertions(+), 114 deletions(-) diff --git a/website/src/data/components/bar/props.ts b/website/src/data/components/bar/props.ts index 95723e20a7..7e0e31e9de 100644 --- a/website/src/data/components/bar/props.ts +++ b/website/src/data/components/bar/props.ts @@ -12,6 +12,7 @@ import { chartGrid, axes, isInteractive, + commonAccessibilityProps, } from '../../../lib/chart-properties' import { ChartProperty, Flavor } from '../../../types' @@ -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'], diff --git a/website/src/data/components/network/props.ts b/website/src/data/components/network/props.ts index 1beaafe2c2..3150fce3fe 100644 --- a/website/src/data/components/network/props.ts +++ b/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'] @@ -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'), ] diff --git a/website/src/data/components/radial-bar/props.ts b/website/src/data/components/radial-bar/props.ts index 9554b8cdc2..ac1dcfd68b 100644 --- a/website/src/data/components/radial-bar/props.ts +++ b/website/src/data/components/radial-bar/props.ts @@ -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'] @@ -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', diff --git a/website/src/data/components/stream/props.ts b/website/src/data/components/stream/props.ts index 8d6ad0739a..9d042bdd4a 100644 --- a/website/src/data/components/stream/props.ts +++ b/website/src/data/components/stream/props.ts @@ -13,6 +13,7 @@ import { chartGrid, axes, isInteractive, + commonAccessibilityProps, } from '../../../lib/chart-properties' import { ChartProperty, Flavor } from '../../../types' @@ -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) diff --git a/website/src/lib/chart-properties/accessibility.ts b/website/src/lib/chart-properties/accessibility.ts index e69de29bb2..548b7ba051 100644 --- a/website/src/lib/chart-properties/accessibility.ts +++ b/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), +] diff --git a/website/src/lib/chart-properties/index.ts b/website/src/lib/chart-properties/index.ts index ddf6ecc123..a91cfeeb0f 100644 --- a/website/src/lib/chart-properties/index.ts +++ b/website/src/lib/chart-properties/index.ts @@ -1,3 +1,4 @@ +export * from './accessibility' export * from './axes' export * from './chart-dimensions' export * from './colors'