Chore: Unskip some more storybook a11y checks (#109452)
* Unskip some more a11y checks * set aria-label correctly in story
This commit is contained in:
Ashley Harrison
@@ -4224,36 +4224,24 @@ exports[`no skipping a11y tests in stories`] = {
|
||||
"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/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/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/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/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/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/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/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/Menu/Menu.story.tsx:5381": [
|
||||
[0, 0, 0, "No skipping of a11y tests in stories. Please fix the component or story instead.", "5381"]
|
||||
],
|
||||
@@ -4284,9 +4272,6 @@ exports[`no skipping a11y tests in stories`] = {
|
||||
"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/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"]
|
||||
]
|
||||
|
||||
@@ -18,12 +18,10 @@ const meta: Meta<typeof ColorPicker> = {
|
||||
controls: {
|
||||
exclude: ['onChange', 'onColorChange'],
|
||||
},
|
||||
// TODO fix a11y issue in story and remove this
|
||||
a11y: { test: 'off' },
|
||||
},
|
||||
args: {
|
||||
enableNamedColors: false,
|
||||
color: '#00ff00',
|
||||
color: '#0000ff',
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
@@ -9,8 +9,6 @@ const meta: Meta<typeof FormField> = {
|
||||
controls: {
|
||||
exclude: ['inputEl'],
|
||||
},
|
||||
// TODO fix a11y issue in story and remove this
|
||||
a11y: { test: 'off' },
|
||||
},
|
||||
args: {
|
||||
inputWidth: 20,
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { css, cx } from '@emotion/css';
|
||||
import { InputHTMLAttributes } from 'react';
|
||||
import { InputHTMLAttributes, useId } from 'react';
|
||||
import * as React from 'react';
|
||||
|
||||
import { InlineFormLabel } from '../FormLabel/FormLabel';
|
||||
@@ -36,13 +36,15 @@ export const FormField = ({
|
||||
...inputProps
|
||||
}: Props) => {
|
||||
const styles = getStyles();
|
||||
const id = useId();
|
||||
return (
|
||||
<div className={cx(styles.formField, className)}>
|
||||
<InlineFormLabel width={labelWidth} tooltip={tooltip} interactive={interactive}>
|
||||
<InlineFormLabel htmlFor={id} width={labelWidth} tooltip={tooltip} interactive={interactive}>
|
||||
{label}
|
||||
</InlineFormLabel>
|
||||
{inputEl || (
|
||||
<input
|
||||
id={id}
|
||||
type="text"
|
||||
className={`gf-form-input ${inputWidth ? `width-${inputWidth}` : ''}`}
|
||||
{...inputProps}
|
||||
|
||||
+3
-5
@@ -14,8 +14,6 @@ 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: {
|
||||
@@ -37,9 +35,9 @@ export const RadioButtons: StoryFn = (args) => {
|
||||
];
|
||||
|
||||
const optionsWithOnlyIcons = [
|
||||
{ description: 'Prometheus', value: 'prometheus', icon: 'gf-interpolation-linear' },
|
||||
{ description: 'Graphite', value: 'graphite', icon: 'gf-interpolation-smooth' },
|
||||
{ description: 'Elastic', value: 'elastic', icon: 'gf-interpolation-step-after' },
|
||||
{ ariaLabel: 'Prometheus', description: 'Prometheus', value: 'prometheus', icon: 'gf-interpolation-linear' },
|
||||
{ ariaLabel: 'Graphite', description: 'Graphite', value: 'graphite', icon: 'gf-interpolation-smooth' },
|
||||
{ ariaLabel: 'Elastic', description: 'Elastic', value: 'elastic', icon: 'gf-interpolation-step-after' },
|
||||
];
|
||||
|
||||
return (
|
||||
|
||||
@@ -15,8 +15,6 @@ const meta: Meta = {
|
||||
page: mdx,
|
||||
},
|
||||
controls: { exclude: ['href', 'external'] },
|
||||
// TODO fix a11y issue in story and remove this
|
||||
a11y: { test: 'off' },
|
||||
},
|
||||
argTypes: {
|
||||
variant: {
|
||||
|
||||
@@ -11,8 +11,6 @@ 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 } },
|
||||
@@ -36,7 +34,7 @@ export const BottomLegend: StoryFn = ({ height, width, legendItems }) => {
|
||||
const legend = (
|
||||
<VizLayout.Legend placement="bottom" maxHeight="30%">
|
||||
{items.map((_, index) => (
|
||||
<div style={{ height: '30px', width: '100%', background: 'blue', marginBottom: '2px' }} key={index}>
|
||||
<div style={{ height: '30px', width: '100%', background: 'lightblue', marginBottom: '2px' }} key={index}>
|
||||
Legend item {index}
|
||||
</div>
|
||||
))}
|
||||
@@ -66,7 +64,10 @@ export const RightLegend: StoryFn = ({ height, width, legendItems, legendWidth }
|
||||
const legend = (
|
||||
<VizLayout.Legend placement="right" maxWidth="50%">
|
||||
{items.map((_, index) => (
|
||||
<div style={{ height: '30px', width: `${legendWidth}px`, background: 'blue', marginBottom: '2px' }} key={index}>
|
||||
<div
|
||||
style={{ height: '30px', width: `${legendWidth}px`, background: 'lightblue', marginBottom: '2px' }}
|
||||
key={index}
|
||||
>
|
||||
Legend item {index}
|
||||
</div>
|
||||
))}
|
||||
|
||||
Reference in New Issue
Block a user