mirror of
https://github.com/grafana/grafana.git
synced 2026-02-03 20:49:50 -05:00
Accessibility: Add storybook a11y tests that run in CI (#108543)
* add test runner and start experimenting with storybook a11y tests * skip currently failing a11y tests * first attempt at github action * fix CODEOWNERS, fix copy assets * no caching? * make wait-on better * increase timeout and add verbose logging * kick CI * remove verbose logging, try different runner * remove commented out code in copyAssets * try maxWorkers 2 * turn on verbose logging, run as part of same step * test storybook verify * try setting LANG * tidy up * add betterer test
This commit is contained in:
Ashley Harrison
GitHub
parent
512a553723
commit
2be4e44a02
60 changed files with 1353 additions and 66 deletions
|
|
@ -4226,6 +4226,164 @@ exports[`no undocumented stories`] = {
|
|||
}`
|
||||
};
|
||||
|
||||
exports[`no skipping a11y tests in stories`] = {
|
||||
value: `{
|
||||
"packages/grafana-alerting/src/grafana/contactPoints/components/ContactPointSelector/ContactPointSelector.story.tsx:5381": [
|
||||
[0, 0, 0, "No skipping of a11y tests in stories. Please fix the component or story instead.", "5381"]
|
||||
],
|
||||
"packages/grafana-ui/src/components/AutoSaveField/AutoSaveField.story.tsx:5381": [
|
||||
[0, 0, 0, "No skipping of a11y tests in stories. Please fix the component or story instead.", "5381"]
|
||||
],
|
||||
"packages/grafana-ui/src/components/Button/Button.story.tsx:5381": [
|
||||
[0, 0, 0, "No skipping of a11y tests in stories. Please fix the component or story instead.", "5381"]
|
||||
],
|
||||
"packages/grafana-ui/src/components/Carousel/Carousel.story.tsx:5381": [
|
||||
[0, 0, 0, "No skipping of a11y tests in stories. Please fix the component or story instead.", "5381"]
|
||||
],
|
||||
"packages/grafana-ui/src/components/Cascader/Cascader.story.tsx:5381": [
|
||||
[0, 0, 0, "No skipping of a11y tests in stories. Please fix the component or story instead.", "5381"]
|
||||
],
|
||||
"packages/grafana-ui/src/components/ColorPicker/ColorPicker.story.tsx:5381": [
|
||||
[0, 0, 0, "No skipping of a11y tests in stories. Please fix the component or story instead.", "5381"]
|
||||
],
|
||||
"packages/grafana-ui/src/components/ColorPicker/ColorPickerInput.story.tsx:5381": [
|
||||
[0, 0, 0, "No skipping of a11y tests in stories. Please fix the component or story instead.", "5381"]
|
||||
],
|
||||
"packages/grafana-ui/src/components/Combobox/MultiCombobox.story.tsx:5381": [
|
||||
[0, 0, 0, "No skipping of a11y tests in stories. Please fix the component or story instead.", "5381"]
|
||||
],
|
||||
"packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.story.tsx:5381": [
|
||||
[0, 0, 0, "No skipping of a11y tests in stories. Please fix the component or story instead.", "5381"]
|
||||
],
|
||||
"packages/grafana-ui/src/components/ContextMenu/ContextMenu.story.tsx:5381": [
|
||||
[0, 0, 0, "No skipping of a11y tests in stories. Please fix the component or story instead.", "5381"]
|
||||
],
|
||||
"packages/grafana-ui/src/components/DateTimePickers/TimeOfDayPicker.story.tsx:5381": [
|
||||
[0, 0, 0, "No skipping of a11y tests in stories. Please fix the component or story instead.", "5381"]
|
||||
],
|
||||
"packages/grafana-ui/src/components/FileDropzone/FileDropzone.story.tsx:5381": [
|
||||
[0, 0, 0, "No skipping of a11y tests in stories. Please fix the component or story instead.", "5381"]
|
||||
],
|
||||
"packages/grafana-ui/src/components/FormField/FormField.story.tsx:5381": [
|
||||
[0, 0, 0, "No skipping of a11y tests in stories. Please fix the component or story instead.", "5381"]
|
||||
],
|
||||
"packages/grafana-ui/src/components/Forms/Checkbox.story.tsx:5381": [
|
||||
[0, 0, 0, "No skipping of a11y tests in stories. Please fix the component or story instead.", "5381"]
|
||||
],
|
||||
"packages/grafana-ui/src/components/Forms/Field.story.tsx:5381": [
|
||||
[0, 0, 0, "No skipping of a11y tests in stories. Please fix the component or story instead.", "5381"]
|
||||
],
|
||||
"packages/grafana-ui/src/components/Forms/FieldArray.story.tsx:5381": [
|
||||
[0, 0, 0, "No skipping of a11y tests in stories. Please fix the component or story instead.", "5381"]
|
||||
],
|
||||
"packages/grafana-ui/src/components/Forms/FieldSet.story.tsx:5381": [
|
||||
[0, 0, 0, "No skipping of a11y tests in stories. Please fix the component or story instead.", "5381"]
|
||||
],
|
||||
"packages/grafana-ui/src/components/Forms/Form.story.tsx:5381": [
|
||||
[0, 0, 0, "No skipping of a11y tests in stories. Please fix the component or story instead.", "5381"]
|
||||
],
|
||||
"packages/grafana-ui/src/components/Forms/InlineField.story.tsx:5381": [
|
||||
[0, 0, 0, "No skipping of a11y tests in stories. Please fix the component or story instead.", "5381"]
|
||||
],
|
||||
"packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.story.tsx:5381": [
|
||||
[0, 0, 0, "No skipping of a11y tests in stories. Please fix the component or story instead.", "5381"]
|
||||
],
|
||||
"packages/grafana-ui/src/components/InlineToast/InlineToast.story.tsx:5381": [
|
||||
[0, 0, 0, "No skipping of a11y tests in stories. Please fix the component or story instead.", "5381"]
|
||||
],
|
||||
"packages/grafana-ui/src/components/Input/Input.story.tsx:5381": [
|
||||
[0, 0, 0, "No skipping of a11y tests in stories. Please fix the component or story instead.", "5381"]
|
||||
],
|
||||
"packages/grafana-ui/src/components/InteractiveTable/InteractiveTable.story.tsx:5381": [
|
||||
[0, 0, 0, "No skipping of a11y tests in stories. Please fix the component or story instead.", "5381"]
|
||||
],
|
||||
"packages/grafana-ui/src/components/Layout/Grid/Grid.story.tsx:5381": [
|
||||
[0, 0, 0, "No skipping of a11y tests in stories. Please fix the component or story instead.", "5381"]
|
||||
],
|
||||
"packages/grafana-ui/src/components/Layout/Stack/Stack.story.tsx:5381": [
|
||||
[0, 0, 0, "No skipping of a11y tests in stories. Please fix the component or story instead.", "5381"]
|
||||
],
|
||||
"packages/grafana-ui/src/components/Link/TextLink.story.tsx:5381": [
|
||||
[0, 0, 0, "No skipping of a11y tests in stories. Please fix the component or story instead.", "5381"]
|
||||
],
|
||||
"packages/grafana-ui/src/components/LoadingBar/LoadingBar.story.tsx:5381": [
|
||||
[0, 0, 0, "No skipping of a11y tests in stories. Please fix the component or story instead.", "5381"]
|
||||
],
|
||||
"packages/grafana-ui/src/components/Menu/Menu.story.tsx:5381": [
|
||||
[0, 0, 0, "No skipping of a11y tests in stories. Please fix the component or story instead.", "5381"]
|
||||
],
|
||||
"packages/grafana-ui/src/components/Modal/Modal.story.tsx:5381": [
|
||||
[0, 0, 0, "No skipping of a11y tests in stories. Please fix the component or story instead.", "5381"]
|
||||
],
|
||||
"packages/grafana-ui/src/components/PageLayout/PageToolbar.story.tsx:5381": [
|
||||
[0, 0, 0, "No skipping of a11y tests in stories. Please fix the component or story instead.", "5381"]
|
||||
],
|
||||
"packages/grafana-ui/src/components/PanelChrome/PanelChrome.story.tsx:5381": [
|
||||
[0, 0, 0, "No skipping of a11y tests in stories. Please fix the component or story instead.", "5381"]
|
||||
],
|
||||
"packages/grafana-ui/src/components/QueryField/QueryField.story.tsx:5381": [
|
||||
[0, 0, 0, "No skipping of a11y tests in stories. Please fix the component or story instead.", "5381"]
|
||||
],
|
||||
"packages/grafana-ui/src/components/ScrollContainer/ScrollContainer.story.tsx:5381": [
|
||||
[0, 0, 0, "No skipping of a11y tests in stories. Please fix the component or story instead.", "5381"]
|
||||
],
|
||||
"packages/grafana-ui/src/components/Segment/Segment.story.tsx:5381": [
|
||||
[0, 0, 0, "No skipping of a11y tests in stories. Please fix the component or story instead.", "5381"]
|
||||
],
|
||||
"packages/grafana-ui/src/components/Segment/SegmentAsync.story.tsx:5381": [
|
||||
[0, 0, 0, "No skipping of a11y tests in stories. Please fix the component or story instead.", "5381"]
|
||||
],
|
||||
"packages/grafana-ui/src/components/Segment/SegmentInput.story.tsx:5381": [
|
||||
[0, 0, 0, "No skipping of a11y tests in stories. Please fix the component or story instead.", "5381"]
|
||||
],
|
||||
"packages/grafana-ui/src/components/Select/Select.story.tsx:5381": [
|
||||
[0, 0, 0, "No skipping of a11y tests in stories. Please fix the component or story instead.", "5381"]
|
||||
],
|
||||
"packages/grafana-ui/src/components/Select/SelectPerf.story.tsx:5381": [
|
||||
[0, 0, 0, "No skipping of a11y tests in stories. Please fix the component or story instead.", "5381"]
|
||||
],
|
||||
"packages/grafana-ui/src/components/Slider/RangeSlider.story.tsx:5381": [
|
||||
[0, 0, 0, "No skipping of a11y tests in stories. Please fix the component or story instead.", "5381"]
|
||||
],
|
||||
"packages/grafana-ui/src/components/Slider/Slider.story.tsx:5381": [
|
||||
[0, 0, 0, "No skipping of a11y tests in stories. Please fix the component or story instead.", "5381"]
|
||||
],
|
||||
"packages/grafana-ui/src/components/StatsPicker/StatsPicker.story.tsx:5381": [
|
||||
[0, 0, 0, "No skipping of a11y tests in stories. Please fix the component or story instead.", "5381"]
|
||||
],
|
||||
"packages/grafana-ui/src/components/Switch/Switch.story.tsx:5381": [
|
||||
[0, 0, 0, "No skipping of a11y tests in stories. Please fix the component or story instead.", "5381"]
|
||||
],
|
||||
"packages/grafana-ui/src/components/Table/Table.story.tsx:5381": [
|
||||
[0, 0, 0, "No skipping of a11y tests in stories. Please fix the component or story instead.", "5381"]
|
||||
],
|
||||
"packages/grafana-ui/src/components/TableInputCSV/TableInputCSV.story.tsx:5381": [
|
||||
[0, 0, 0, "No skipping of a11y tests in stories. Please fix the component or story instead.", "5381"]
|
||||
],
|
||||
"packages/grafana-ui/src/components/Tags/TagList.story.tsx:5381": [
|
||||
[0, 0, 0, "No skipping of a11y tests in stories. Please fix the component or story instead.", "5381"]
|
||||
],
|
||||
"packages/grafana-ui/src/components/Text/Text.story.tsx:5381": [
|
||||
[0, 0, 0, "No skipping of a11y tests in stories. Please fix the component or story instead.", "5381"]
|
||||
],
|
||||
"packages/grafana-ui/src/components/ThemeDemos/ThemeDemo.story.tsx:5381": [
|
||||
[0, 0, 0, "No skipping of a11y tests in stories. Please fix the component or story instead.", "5381"]
|
||||
],
|
||||
"packages/grafana-ui/src/components/ThemeDemos/Typography.story.tsx:5381": [
|
||||
[0, 0, 0, "No skipping of a11y tests in stories. Please fix the component or story instead.", "5381"]
|
||||
],
|
||||
"packages/grafana-ui/src/components/ToolbarButton/ToolbarButton.story.tsx:5381": [
|
||||
[0, 0, 0, "No skipping of a11y tests in stories. Please fix the component or story instead.", "5381"]
|
||||
],
|
||||
"packages/grafana-ui/src/components/VizLayout/VizLayout.story.tsx:5381": [
|
||||
[0, 0, 0, "No skipping of a11y tests in stories. Please fix the component or story instead.", "5381"]
|
||||
],
|
||||
"packages/grafana-ui/src/components/VizLegend/VizLegend.story.tsx:5381": [
|
||||
[0, 0, 0, "No skipping of a11y tests in stories. Please fix the component or story instead.", "5381"]
|
||||
]
|
||||
}`
|
||||
};
|
||||
|
||||
exports[`no gf-form usage`] = {
|
||||
value: `{
|
||||
"packages/grafana-prometheus/src/components/PromExploreExtraField.tsx:5381": [
|
||||
|
|
|
|||
24
.betterer.ts
24
.betterer.ts
|
|
@ -17,13 +17,35 @@ export default {
|
|||
countEslintErrors()
|
||||
.include('**/*.{ts,tsx}')
|
||||
.exclude(new RegExp(eslintPathsToIgnore.join('|'))),
|
||||
'no undocumented stories': () => countUndocumentedStories().include('**/!(*.internal).story.tsx'),
|
||||
'no undocumented stories': () => countUndocumentedStories().include('**/*.story.tsx'),
|
||||
'no skipping a11y tests in stories': () => countSkippedA11yTestStories().include('**/*.story.tsx'),
|
||||
'no gf-form usage': () =>
|
||||
regexp(/gf-form/gm, 'gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.')
|
||||
.include('**/*.{ts,tsx,html}')
|
||||
.exclude(new RegExp('packages/grafana-ui/src/themes/GlobalStyles')),
|
||||
};
|
||||
|
||||
function countSkippedA11yTestStories() {
|
||||
return new BettererFileTest(async (filePaths, fileTestResult) => {
|
||||
await Promise.all(
|
||||
filePaths.map(async (filePath) => {
|
||||
// look for skipped a11y tests
|
||||
const skipRegex = new RegExp("a11y: { test: 'off' }", 'gm');
|
||||
|
||||
const fileText = await fs.readFile(filePath, 'utf8');
|
||||
|
||||
const hasSkip = skipRegex.test(fileText);
|
||||
if (hasSkip) {
|
||||
// In this case the file contents don't matter:
|
||||
const file = fileTestResult.addFile(filePath, '');
|
||||
// Add the issue to the first character of the file:
|
||||
file.addIssue(0, 0, 'No skipping of a11y tests in stories. Please fix the component or story instead.');
|
||||
}
|
||||
})
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
function countUndocumentedStories() {
|
||||
return new BettererFileTest(async (filePaths, fileTestResult) => {
|
||||
await Promise.all(
|
||||
|
|
|
|||
1
.github/CODEOWNERS
vendored
1
.github/CODEOWNERS
vendored
|
|
@ -999,6 +999,7 @@ embed.go @grafana/grafana-as-code
|
|||
/.github/workflows/publish-technical-documentation-release.yml @grafana/docs-tooling
|
||||
/.github/workflows/scripts/json-file-to-job-output.js @grafana/plugins-platform-frontend
|
||||
/.github/workflows/stale.yml @grafana/grafana-developer-enablement-squad
|
||||
/.github/workflows/storybook-a11y.yml @grafana/grafana-frontend-platform
|
||||
/.github/workflows/storybook-verification.yml @grafana/grafana-frontend-platform
|
||||
/.github/workflows/storybook-verification-playwright.yml @grafana/grafana-frontend-platform
|
||||
/.github/workflows/update-make-docs.yml @grafana/docs-tooling
|
||||
|
|
|
|||
57
.github/workflows/storybook-a11y.yml
vendored
Normal file
57
.github/workflows/storybook-a11y.yml
vendored
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
name: Run Storybook a11y tests
|
||||
on:
|
||||
pull_request:
|
||||
push:
|
||||
branches:
|
||||
- main
|
||||
- release-*.*.*
|
||||
|
||||
permissions: {}
|
||||
|
||||
jobs:
|
||||
detect-changes:
|
||||
name: Detect whether code changed
|
||||
runs-on: ubuntu-latest
|
||||
permissions:
|
||||
contents: read
|
||||
outputs:
|
||||
changed: ${{ steps.detect-changes.outputs.frontend }}
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
with:
|
||||
persist-credentials: true # required to get more history in the changed-files action
|
||||
fetch-depth: 2
|
||||
- name: Detect changes
|
||||
id: detect-changes
|
||||
uses: ./.github/actions/change-detection
|
||||
with:
|
||||
self: .github/workflows/storybook-a11y.yml
|
||||
|
||||
test-storybook-a11y:
|
||||
runs-on: ubuntu-latest-8-cores
|
||||
permissions:
|
||||
contents: read
|
||||
id-token: write
|
||||
needs: detect-changes
|
||||
if: needs.detect-changes.outputs.changed == 'true'
|
||||
name: "Run Storybook a11y tests"
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
with:
|
||||
persist-credentials: false
|
||||
- uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version-file: '.nvmrc'
|
||||
- run: yarn install --immutable --check-cache
|
||||
- name: Install Playwright browsers
|
||||
run: npx playwright install --with-deps
|
||||
- name: Start Storybook
|
||||
run: yarn storybook &
|
||||
- name: Run tests
|
||||
# the chromium browser used by Playwright sets its locale to "en_US@posix" by default
|
||||
# this is not a valid language code, and causes some stories to fail to load!
|
||||
# instead, we set the LANG environment variable to en_US to override this
|
||||
# see https://github.com/microsoft/playwright/issues/34046
|
||||
env:
|
||||
LANG: en_US
|
||||
run: npx wait-on --timeout 120000 http://localhost:9001 && yarn test:storybook
|
||||
|
|
@ -30,6 +30,7 @@
|
|||
"e2e:plugin:build:dev": "nx run-many -t dev --projects='@test-plugins/*' --maxParallel=100",
|
||||
"test": "jest --notify --watch",
|
||||
"test:coverage": "jest --coverage",
|
||||
"test:storybook": "yarn workspace @grafana/ui storybook:test",
|
||||
"test:coverage:changes": "jest --coverage --changedSince=origin/main",
|
||||
"test:accessibility-report": "./scripts/generate-a11y-report.sh",
|
||||
"test:ci": "mkdir -p reports/junit && JEST_JUNIT_OUTPUT_DIR=reports/junit jest --ci --reporters=default --reporters=jest-junit -w ${TEST_MAX_WORKERS:-100%} --shard=${TEST_SHARD:-1}/${TEST_SHARD_TOTAL:-1}",
|
||||
|
|
|
|||
|
|
@ -14,6 +14,8 @@ const meta: Meta<typeof ContactPointSelector> = {
|
|||
docs: {
|
||||
page: mdx,
|
||||
},
|
||||
// TODO fix a11y issue in story and remove this
|
||||
a11y: { test: 'off' },
|
||||
},
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
// when publishing new storybook.
|
||||
// Note: Storybook has a static copying feature but it copies entire directories which can contain thousands of icons.
|
||||
|
||||
import { copySync, emptyDirSync, lstatSync } from 'fs-extra';
|
||||
import { existsSync, copySync, lstatSync } from 'fs-extra';
|
||||
import { resolve } from 'node:path';
|
||||
|
||||
// avoid importing from @grafana/data to prevent error: window is not defined
|
||||
|
|
@ -52,16 +52,13 @@ export function copyAssetsSync() {
|
|||
},
|
||||
];
|
||||
|
||||
const staticDir = resolve(__dirname, 'static', 'public');
|
||||
|
||||
emptyDirSync(staticDir);
|
||||
|
||||
for (const asset of assets) {
|
||||
const fromPath = resolve(__dirname, asset.from);
|
||||
const toPath = resolve(__dirname, asset.to);
|
||||
|
||||
copySync(fromPath, toPath, {
|
||||
filter: (src) => !lstatSync(src).isSymbolicLink(),
|
||||
});
|
||||
if (!existsSync(toPath)) {
|
||||
copySync(fromPath, toPath, {
|
||||
filter: (src) => !lstatSync(src).isSymbolicLink(),
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -64,6 +64,7 @@ const preview: Preview = {
|
|||
docs: {
|
||||
container: ThemedDocsContainer,
|
||||
},
|
||||
a11y: { test: 'error' },
|
||||
knobs: {
|
||||
disable: true,
|
||||
},
|
||||
|
|
|
|||
|
|
@ -53,6 +53,7 @@
|
|||
"clean": "rimraf ./dist ./compiled ./unstable ./package.tgz",
|
||||
"storybook": "storybook dev -p 9001 -c .storybook --no-open",
|
||||
"storybook:build": "storybook build -o ./dist/storybook -c .storybook",
|
||||
"storybook:test": "test-storybook --url http://localhost:9001",
|
||||
"typecheck": "tsc --emitDeclarationOnly false --noEmit",
|
||||
"prepack": "cp package.json package.json.bak && ALIAS_PACKAGE_NAME=unstable node ../../scripts/prepare-npm-package.js",
|
||||
"postpack": "mv package.json.bak package.json && rimraf ./unstable"
|
||||
|
|
@ -152,6 +153,7 @@
|
|||
"@storybook/preview-api": "^8.6.2",
|
||||
"@storybook/react": "^8.6.2",
|
||||
"@storybook/react-webpack5": "^8.6.2",
|
||||
"@storybook/test-runner": "^0.23.0",
|
||||
"@storybook/theming": "^8.6.2",
|
||||
"@testing-library/dom": "10.4.0",
|
||||
"@testing-library/jest-dom": "6.6.3",
|
||||
|
|
|
|||
|
|
@ -35,6 +35,8 @@ const meta: Meta = {
|
|||
'validationMessageHorizontalOverflow',
|
||||
],
|
||||
},
|
||||
// TODO fix a11y issue in story and remove this
|
||||
a11y: { test: 'off' },
|
||||
},
|
||||
argTypes: {
|
||||
saveErrorMessage: { control: 'text' },
|
||||
|
|
|
|||
|
|
@ -18,6 +18,8 @@ export default {
|
|||
docs: {
|
||||
page: mdx,
|
||||
},
|
||||
// TODO fix a11y issue in story and remove this
|
||||
a11y: { test: 'off' },
|
||||
},
|
||||
argTypes: {
|
||||
size: {
|
||||
|
|
|
|||
|
|
@ -19,6 +19,8 @@ const meta: Meta<typeof Carousel> = {
|
|||
component: Carousel,
|
||||
parameters: {
|
||||
docs: { page: mdx },
|
||||
// TODO fix a11y issue in story and remove this
|
||||
a11y: { test: 'off' },
|
||||
},
|
||||
argTypes: {
|
||||
images: {
|
||||
|
|
|
|||
|
|
@ -49,6 +49,8 @@ const meta: Meta<typeof Cascader> = {
|
|||
'formatCreateLabel',
|
||||
],
|
||||
},
|
||||
// TODO fix a11y issue in story and remove this
|
||||
a11y: { test: 'off' },
|
||||
},
|
||||
args: {
|
||||
onSelect,
|
||||
|
|
|
|||
|
|
@ -18,6 +18,8 @@ const meta: Meta<typeof ColorPicker> = {
|
|||
controls: {
|
||||
exclude: ['onChange', 'onColorChange'],
|
||||
},
|
||||
// TODO fix a11y issue in story and remove this
|
||||
a11y: { test: 'off' },
|
||||
},
|
||||
args: {
|
||||
enableNamedColors: false,
|
||||
|
|
|
|||
|
|
@ -11,6 +11,8 @@ const meta: Meta<typeof ColorPickerInput> = {
|
|||
controls: {
|
||||
exclude: ['onChange', 'onColorChange'],
|
||||
},
|
||||
// TODO fix a11y issue in story and remove this
|
||||
a11y: { test: 'off' },
|
||||
},
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -17,6 +17,8 @@ const meta: Meta<typeof MultiCombobox> = {
|
|||
docs: {
|
||||
page: mdx,
|
||||
},
|
||||
// TODO fix a11y issue in story and remove this
|
||||
a11y: { test: 'off' },
|
||||
},
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -21,6 +21,8 @@ const meta: Meta = {
|
|||
controls: {
|
||||
exclude: ['className', 'onClick', 'onCancel', 'onConfirm'],
|
||||
},
|
||||
// TODO fix a11y issue in story and remove this
|
||||
a11y: { test: 'off' },
|
||||
},
|
||||
args: {
|
||||
buttonText: 'Edit',
|
||||
|
|
|
|||
|
|
@ -19,6 +19,8 @@ const meta: Meta<typeof ContextMenu> = {
|
|||
controls: {
|
||||
exclude: ['renderMenuItems', 'renderHeader', 'onClose', 'children'],
|
||||
},
|
||||
// TODO fix a11y issue in story and remove this
|
||||
a11y: { test: 'off' },
|
||||
},
|
||||
args: {
|
||||
x: 200,
|
||||
|
|
|
|||
|
|
@ -13,6 +13,8 @@ const meta: Meta<typeof TimeOfDayPicker> = {
|
|||
controls: {
|
||||
exclude: ['onChange'],
|
||||
},
|
||||
// TODO fix a11y issue in story and remove this
|
||||
a11y: { test: 'off' },
|
||||
},
|
||||
args: {
|
||||
value: dateTime(Date.now()),
|
||||
|
|
|
|||
|
|
@ -10,6 +10,8 @@ const meta: Meta<typeof FileDropzone> = {
|
|||
docs: {
|
||||
page: mdx,
|
||||
},
|
||||
// TODO fix a11y issue in story and remove this
|
||||
a11y: { test: 'off' },
|
||||
},
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -9,6 +9,8 @@ const meta: Meta<typeof FormField> = {
|
|||
controls: {
|
||||
exclude: ['inputEl'],
|
||||
},
|
||||
// TODO fix a11y issue in story and remove this
|
||||
a11y: { test: 'off' },
|
||||
},
|
||||
args: {
|
||||
inputWidth: 20,
|
||||
|
|
|
|||
|
|
@ -18,6 +18,8 @@ const meta: Meta<typeof Checkbox> = {
|
|||
controls: {
|
||||
exclude: ['value', 'htmlValue'],
|
||||
},
|
||||
// TODO fix a11y issue in story and remove this
|
||||
a11y: { test: 'off' },
|
||||
},
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -26,6 +26,8 @@ const meta: Meta<typeof Field> = {
|
|||
controls: {
|
||||
exclude: ['children', 'className'],
|
||||
},
|
||||
// TODO fix a11y issue in story and remove this
|
||||
a11y: { test: 'off' },
|
||||
},
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -21,6 +21,8 @@ const meta: Meta = {
|
|||
controls: {
|
||||
exclude: ['name', 'keyName', 'control', 'shouldUnregister'],
|
||||
},
|
||||
// TODO fix a11y issue in story and remove this
|
||||
a11y: { test: 'off' },
|
||||
},
|
||||
argTypes: {
|
||||
containerWidth: { control: { type: 'range', min: 100, max: 500, step: 10 } },
|
||||
|
|
|
|||
|
|
@ -21,6 +21,8 @@ const meta: Meta<typeof FieldSet> = {
|
|||
controls: {
|
||||
exclude: ['children'],
|
||||
},
|
||||
// TODO fix a11y issue in story and remove this
|
||||
a11y: { test: 'off' },
|
||||
},
|
||||
argTypes: {
|
||||
label: { control: 'text' },
|
||||
|
|
|
|||
|
|
@ -23,6 +23,8 @@ export default {
|
|||
docs: {
|
||||
page: mdx,
|
||||
},
|
||||
// TODO fix a11y issue in story and remove this
|
||||
a11y: { test: 'off' },
|
||||
},
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -23,6 +23,8 @@ const meta: Meta<typeof InlineField> = {
|
|||
controls: {
|
||||
exclude: ['htmlFor', 'className', 'children'],
|
||||
},
|
||||
// TODO fix a11y issue in story and remove this
|
||||
a11y: { test: 'off' },
|
||||
},
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -14,6 +14,8 @@ const meta: Meta = {
|
|||
controls: {
|
||||
exclude: ['className', 'options', 'value', 'onChange', 'onClick', 'id'],
|
||||
},
|
||||
// TODO fix a11y issue in story and remove this
|
||||
a11y: { test: 'off' },
|
||||
},
|
||||
argTypes: {
|
||||
disabledOptions: {
|
||||
|
|
|
|||
|
|
@ -14,6 +14,8 @@ const story: Meta = {
|
|||
docs: {
|
||||
page: mdx,
|
||||
},
|
||||
// TODO fix a11y issue in story and remove this
|
||||
a11y: { test: 'off' },
|
||||
},
|
||||
argTypes: {
|
||||
referenceElement: {
|
||||
|
|
|
|||
|
|
@ -31,6 +31,8 @@ const meta: Meta = {
|
|||
controls: {
|
||||
exclude: ['prefix', 'suffix', 'addonBefore', 'addonAfter'],
|
||||
},
|
||||
// TODO fix a11y issue in story and remove this
|
||||
a11y: { test: 'off' },
|
||||
},
|
||||
args: {
|
||||
type: 'text',
|
||||
|
|
|
|||
|
|
@ -112,6 +112,8 @@ const meta: Meta<typeof InteractiveTable<CarData>> = {
|
|||
controls: {
|
||||
exclude: EXCLUDED_PROPS,
|
||||
},
|
||||
// TODO fix a11y issue in story and remove this
|
||||
a11y: { test: 'off' },
|
||||
},
|
||||
args: {
|
||||
columns: [
|
||||
|
|
|
|||
|
|
@ -17,6 +17,8 @@ const meta: Meta<typeof Grid> = {
|
|||
docs: {
|
||||
page: mdx,
|
||||
},
|
||||
// TODO fix a11y issue in story and remove this
|
||||
a11y: { test: 'off' },
|
||||
},
|
||||
args: {
|
||||
gap: 1,
|
||||
|
|
|
|||
|
|
@ -16,6 +16,8 @@ const meta: Meta<typeof Stack> = {
|
|||
docs: {
|
||||
page: mdx,
|
||||
},
|
||||
// TODO fix a11y issue in story and remove this
|
||||
a11y: { test: 'off' },
|
||||
},
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -15,6 +15,8 @@ const meta: Meta = {
|
|||
page: mdx,
|
||||
},
|
||||
controls: { exclude: ['href', 'external'] },
|
||||
// TODO fix a11y issue in story and remove this
|
||||
a11y: { test: 'off' },
|
||||
},
|
||||
argTypes: {
|
||||
variant: {
|
||||
|
|
|
|||
|
|
@ -17,6 +17,8 @@ const meta: Meta<typeof LoadingBar> = {
|
|||
docs: {
|
||||
page: mdx,
|
||||
},
|
||||
// TODO fix a11y issue in story and remove this
|
||||
a11y: { test: 'off' },
|
||||
},
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -24,6 +24,8 @@ const meta: Meta<typeof Menu> = {
|
|||
actions: {
|
||||
disabled: true,
|
||||
},
|
||||
// TODO fix a11y issue in story and remove this
|
||||
a11y: { test: 'off' },
|
||||
},
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -21,6 +21,8 @@ const meta: Meta = {
|
|||
controls: {
|
||||
exclude: ['className', 'contentClassName', 'onDismiss', 'onClickBackdrop'],
|
||||
},
|
||||
// TODO fix a11y issue in story and remove this
|
||||
a11y: { test: 'off' },
|
||||
},
|
||||
args: {
|
||||
body: oneLineTrim(`Id incididunt do pariatur qui labore. Sint culpa irure cillum et ullamco proident. Deserunt ipsum velit dolore est enim proident dolore consectetur. Et cillum tempor pariatur et. Est tempor cillum ad id nulla. Cillum ut proident
|
||||
|
|
|
|||
|
|
@ -11,7 +11,10 @@ import { PageToolbar } from './PageToolbar';
|
|||
const meta: Meta<typeof PageToolbar> = {
|
||||
title: 'Navigation/Deprecated/PageToolbar',
|
||||
component: PageToolbar,
|
||||
parameters: {},
|
||||
parameters: {
|
||||
// TODO fix a11y issue in story and remove this
|
||||
a11y: { test: 'off' },
|
||||
},
|
||||
};
|
||||
|
||||
export const Examples = () => {
|
||||
|
|
|
|||
|
|
@ -31,6 +31,8 @@ const meta: Meta<typeof PanelChrome> = {
|
|||
docs: {
|
||||
page: mdx,
|
||||
},
|
||||
// TODO fix a11y issue in story and remove this
|
||||
a11y: { test: 'off' },
|
||||
},
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -24,6 +24,8 @@ const meta: Meta<typeof QueryField> = {
|
|||
'syntaxLoaded',
|
||||
],
|
||||
},
|
||||
// TODO fix a11y issue in story and remove this
|
||||
a11y: { test: 'off' },
|
||||
},
|
||||
argTypes: {
|
||||
query: {
|
||||
|
|
|
|||
|
|
@ -14,6 +14,8 @@ const meta: Meta<typeof ScrollContainer> = {
|
|||
docs: {
|
||||
page: mdx,
|
||||
},
|
||||
// TODO fix a11y issue in story and remove this
|
||||
a11y: { test: 'off' },
|
||||
},
|
||||
argTypes: {},
|
||||
args: {
|
||||
|
|
|
|||
|
|
@ -62,6 +62,10 @@ export const ArrayOptions = () => {
|
|||
const meta: Meta<typeof Segment> = {
|
||||
title: 'Inputs/Segment',
|
||||
component: Segment,
|
||||
parameters: {
|
||||
// TODO fix a11y issue in story and remove this
|
||||
a11y: { test: 'off' },
|
||||
},
|
||||
};
|
||||
|
||||
export const ArrayOptionsWithPrimitiveValue = () => {
|
||||
|
|
|
|||
|
|
@ -63,6 +63,10 @@ export const ArrayOptions = () => {
|
|||
const meta: Meta<typeof SegmentAsync> = {
|
||||
title: 'Inputs/SegmentAsync',
|
||||
component: SegmentAsync,
|
||||
parameters: {
|
||||
// TODO fix a11y issue in story and remove this
|
||||
a11y: { test: 'off' },
|
||||
},
|
||||
};
|
||||
|
||||
export const ArrayOptionsWithPrimitiveValue = () => {
|
||||
|
|
|
|||
|
|
@ -32,6 +32,10 @@ export const BasicInput = () => {
|
|||
const meta: Meta<typeof SegmentInput> = {
|
||||
title: 'Inputs/SegmentInput',
|
||||
component: SegmentInput,
|
||||
parameters: {
|
||||
// TODO fix a11y issue in story and remove this
|
||||
a11y: { test: 'off' },
|
||||
},
|
||||
};
|
||||
|
||||
export const BasicInputWithPlaceholder = () => {
|
||||
|
|
|
|||
|
|
@ -72,6 +72,8 @@ const meta: Meta = {
|
|||
'value',
|
||||
],
|
||||
},
|
||||
// TODO fix a11y issue in story and remove this
|
||||
a11y: { test: 'off' },
|
||||
},
|
||||
args: {
|
||||
width: 0,
|
||||
|
|
|
|||
|
|
@ -16,6 +16,10 @@ const meta: Meta = {
|
|||
control: { type: 'number' },
|
||||
},
|
||||
},
|
||||
parameters: {
|
||||
// TODO fix a11y issue in story and remove this
|
||||
a11y: { test: 'off' },
|
||||
},
|
||||
};
|
||||
|
||||
export default meta;
|
||||
|
|
|
|||
|
|
@ -9,6 +9,8 @@ const meta: Meta<typeof RangeSlider> = {
|
|||
controls: {
|
||||
exclude: ['tooltipAlwaysVisible'],
|
||||
},
|
||||
// TODO fix a11y issue in story and remove this
|
||||
a11y: { test: 'off' },
|
||||
},
|
||||
argTypes: {
|
||||
orientation: { control: { type: 'select', options: ['horizontal', 'vertical'] } },
|
||||
|
|
|
|||
|
|
@ -12,6 +12,8 @@ const meta: Meta<typeof Slider> = {
|
|||
knobs: {
|
||||
disabled: true,
|
||||
},
|
||||
// TODO fix a11y issue in story and remove this
|
||||
a11y: { test: 'off' },
|
||||
},
|
||||
argTypes: {
|
||||
orientation: { control: { type: 'select', options: ['horizontal', 'vertical'] } },
|
||||
|
|
|
|||
|
|
@ -43,6 +43,8 @@ const meta: Meta<typeof StatsPicker> = {
|
|||
controls: {
|
||||
exclude: ['onChange', 'stats', 'defaultStat', 'className'],
|
||||
},
|
||||
// TODO fix a11y issue in story and remove this
|
||||
a11y: { test: 'off' },
|
||||
},
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -16,6 +16,8 @@ const meta: Meta<typeof Switch> = {
|
|||
docs: {
|
||||
page: mdx,
|
||||
},
|
||||
// TODO fix a11y issue in story and remove this
|
||||
a11y: { test: 'off' },
|
||||
},
|
||||
args: {
|
||||
disabled: false,
|
||||
|
|
|
|||
|
|
@ -32,6 +32,8 @@ const meta: Meta<typeof Table> = {
|
|||
docs: {
|
||||
page: mdx,
|
||||
},
|
||||
// TODO fix a11y issue in story and remove this
|
||||
a11y: { test: 'off' },
|
||||
},
|
||||
args: {
|
||||
width: 700,
|
||||
|
|
|
|||
|
|
@ -8,6 +8,10 @@ import { TableInputCSV } from './TableInputCSV';
|
|||
const meta: Meta<typeof TableInputCSV> = {
|
||||
title: 'Inputs/Deprecated/TableInputCSV',
|
||||
component: TableInputCSV,
|
||||
parameters: {
|
||||
// TODO fix a11y issue in story and remove this
|
||||
a11y: { test: 'off' },
|
||||
},
|
||||
};
|
||||
|
||||
export const basic: StoryFn<typeof TableInputCSV> = () => {
|
||||
|
|
|
|||
|
|
@ -14,6 +14,8 @@ const meta: Meta<typeof TagList> = {
|
|||
controls: {
|
||||
exclude: ['className', 'onClick', 'getAriaLabel'],
|
||||
},
|
||||
// TODO fix a11y issue in story and remove this
|
||||
a11y: { test: 'off' },
|
||||
},
|
||||
args: {
|
||||
displayMax: 3,
|
||||
|
|
|
|||
|
|
@ -13,6 +13,8 @@ const meta: Meta = {
|
|||
docs: {
|
||||
page: mdx,
|
||||
},
|
||||
// TODO fix a11y issue in story and remove this
|
||||
a11y: { test: 'off' },
|
||||
},
|
||||
argTypes: {
|
||||
variant: {
|
||||
|
|
|
|||
|
|
@ -11,6 +11,8 @@ const meta: Meta = {
|
|||
showPanel: false,
|
||||
},
|
||||
docs: {},
|
||||
// TODO fix a11y issue in story and remove this
|
||||
a11y: { test: 'off' },
|
||||
},
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -9,6 +9,10 @@ import { Text } from '../Text/Text';
|
|||
|
||||
const meta: Meta = {
|
||||
title: 'Developers/Typography',
|
||||
parameters: {
|
||||
// TODO fix a11y issue in story and remove this
|
||||
a11y: { test: 'off' },
|
||||
},
|
||||
};
|
||||
|
||||
const FONT_WEIGHTS = [/*100, 200, 300, */ 400, 500 /*600, 700, 800, 900*/];
|
||||
|
|
|
|||
|
|
@ -18,6 +18,8 @@ const meta: Meta<typeof ToolbarButton> = {
|
|||
controls: {
|
||||
exclude: ['imgSrc', 'imgAlt', 'narrow'],
|
||||
},
|
||||
// TODO fix a11y issue in story and remove this
|
||||
a11y: { test: 'off' },
|
||||
},
|
||||
args: {
|
||||
variant: 'default',
|
||||
|
|
|
|||
|
|
@ -11,6 +11,8 @@ const meta: Meta = {
|
|||
controls: {
|
||||
exclude: ['legend'],
|
||||
},
|
||||
// TODO fix a11y issue in story and remove this
|
||||
a11y: { test: 'off' },
|
||||
},
|
||||
argTypes: {
|
||||
width: { control: { type: 'range', min: 100, max: 1000 } },
|
||||
|
|
|
|||
|
|
@ -16,6 +16,10 @@ const meta: Meta = {
|
|||
containerWidth: '100%',
|
||||
seriesCount: 5,
|
||||
},
|
||||
parameters: {
|
||||
// TODO fix a11y issue in story and remove this
|
||||
a11y: { test: 'off' },
|
||||
},
|
||||
argTypes: {
|
||||
containerWidth: {
|
||||
control: {
|
||||
|
|
|
|||
Loading…
Reference in a new issue