mirror of
https://github.com/elastic/kibana.git
synced 2025-06-27 10:40:07 -04:00
46b4e1fc6d
## Summary Adds support for wrapping elements. | Code | Turns into | |--------|--------| | <img width="764" alt="Screenshot 2025-04-01 at 09 25 09" src="https://github.com/user-attachments/assets/9b5d2743-3b61-4d21-b726-0a0be9539d99" /> | <img width="827" alt="Screenshot 2025-04-01 at 09 25 20" src="https://github.com/user-attachments/assets/9879d1cb-e22f-4c80-a666-001b273d6d7d" /> | <img width="744" alt="Screenshot 2025-04-01 at 09 25 54" src="https://github.com/user-attachments/assets/c4320ff8-baa2-4fcc-9b3c-f7ab86c1cb23" /> | <img width="838" alt="Screenshot 2025-04-01 at 09 26 07" src="https://github.com/user-attachments/assets/d81a1232-a643-4775-ac83-a1a97bcbc528" /> | **Message** <img width="804" alt="Screenshot 2025-03-25 at 13 59 36" src="https://github.com/user-attachments/assets/8eaa2f54-aee6-4828-b1d5-15d4d2bfb4c0" /> **Exceptions** If elements have a `aria-label`, `aria-labelledby` or `label`, they are not flagged. **Autofix suggestion** - autofixes are translated with `i18n.translate` - if `i18n` is not imported yet, an import statement is added - If a `placeholder` prop is found, it uses that as the `i18n.translate` default message for `aria-label` - If the element has children, it uses the text value of the children as the default message for the `i18n.translate` default message for `aria-label` --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Milosz Marcinkowski <38698566+miloszmarcinkowski@users.noreply.github.com>
84 lines
2.5 KiB
Text
84 lines
2.5 KiB
Text
---
|
|
id: kibDevDocsOpsEslintPluginEuiA11y
|
|
slug: /kibana-dev-docs/ops/kbn-eslint-plugin-eui-a11y
|
|
title: '@kbn/eslint-plugin-eui-a11y'
|
|
description: Custom ESLint rules to support a11y on Eui components in the Kibana repository
|
|
tags: ['kibana', 'dev', 'contributor', 'operations', 'eslint', 'eui-a11y']
|
|
---
|
|
|
|
`@kbn/eslint-plugin-eui-a11y` is an ESLint plugin providing custom rules for validating JSXCode in the Kibana repo for accessibility (a11y) (i.e. aria) tags on Eui components.
|
|
|
|
## `@kbn/eui-a11y/eui_elements_should_have_aria_label_or_aria_labelledby_props`
|
|
|
|
This rule warns engineers to add `aria-label` to certain EUI components, and offers a suggestion for a value.
|
|
|
|
If an `aria-label` or `aria-labelledby` prop is already found, the rule does not warn. Existing values are never overwritten.
|
|
|
|
It is currently set to respond to a subset of EUI components which reasonably need an `aria-label`: `EuiButtonIcon`, `EuiButtonEmpty`, `EuiSelect`, `EuiSuperSelect`.
|
|
|
|
The rule attempts to create a reasonable suggestion for a value depending on the context of the component (i.e. app name, filename, function name, values inside children).
|
|
|
|
It then create a i18.translate function and uses the suggestion for a defaultMessage.
|
|
|
|
### Examples:
|
|
|
|
```
|
|
/* file is in `x-pack/solutions/observability/plugins/apm/public/components/fleet_integration/apm_agents/runtime_attachment/discovery_rule.tsx` */
|
|
|
|
<EuiButtonIcon
|
|
iconType="pencil"
|
|
onClick={() => {
|
|
onEdit(id);
|
|
}}
|
|
/>
|
|
```
|
|
|
|
turns into:
|
|
|
|
```
|
|
<EuiButtonIcon
|
|
aria-label={i18n.translate('xpack.apm.discoveryRule.pencilButton.ariaLabel', {
|
|
defaultMessage: 'Pencil',
|
|
})}
|
|
iconType="pencil"
|
|
onClick={() => {
|
|
onEdit(id);
|
|
}}
|
|
/>
|
|
```
|
|
|
|
Another example:
|
|
|
|
```
|
|
/* file is in: `x-pack/solutions/observability/plugins/infra/public/components/foo.tsx` */
|
|
|
|
const Foo = ({ ... }: Props) => (
|
|
<EuiFormRow>
|
|
<EuiComboBox
|
|
...
|
|
/>
|
|
</EuiFormRow>
|
|
);
|
|
```
|
|
|
|
gets transformed into:
|
|
|
|
```
|
|
const Foo = ({ ... }: Props) => (
|
|
<EuiFormRow aria-label={i18n.translate('xpack.infra.foo.ariaLabel', {
|
|
defaultMessage: 'Foo',
|
|
})}>
|
|
<EuiComboBox
|
|
...
|
|
/>
|
|
</EuiFormRow>
|
|
);
|
|
```
|
|
|
|
### I want to add / remove this behavior for a particular EuiElement
|
|
|
|
See the `EUI_ELEMENTS` array in `packages/kbn-eslint-plugin-eui-a11y/rules/eui_elements_should_have_aria_label_or_aria_labelledby_props.ts` to see or adjust the list.
|
|
|
|
### The autofix provided is not 100% correct!
|
|
|
|
The autofix is provided as a time saver to save you from typing. Feel free to adjust it after applying.
|