From b5179a3ab845ec3b643f415c8d4a44c5496c3015 Mon Sep 17 00:00:00 2001
From: Laura Benz <48948963+L-M-K-B@users.noreply.github.com>
Date: Fri, 23 Jun 2023 17:10:37 +0200
Subject: [PATCH] GrafanaUI: Define tooltip or aria-label as required for
IconButton (#69699)
* refactor: modify interfaces to make tooltip or aria-label required
* refactor: change functionality around aria-label and tooltip
* refactor: change and add information in storybook documentation
* refactor: remove default from tooltip
* refactor: IconButton to make tooltip or aria-label required
* refactor: Fix tests
* refactor: Fix tests
* refactor: Fix tests
* refactor: Fix tests
* feat: add migration guide for breaking change
* feat: add latest requirements to storybook docs
* refactor: separate iconbutton story with and without tooltip
* refactor: remove exported baseArgs
* refactor: clean up and restructure original story
* refactor: adjust styling
* refactor: enable control for tooltip
* refactor: clean up
* refactor: enable control for aria-label
* refactor: fix theme getting the wrong theme
* refactor: fix tests
* refactor: adjust story
* refactor: remove confusing story
* refactor: adjust controls for stories
---
.../migration-guide/v10.0.x-v10.1.x/_index.md | 29 +++++
.../src/components/IconButton/IconButton.mdx | 10 +-
.../IconButton/IconButton.story.tsx | 92 ++++++++------
.../src/components/IconButton/IconButton.tsx | 116 ++++++++++--------
.../grafana-ui/src/components/Modal/Modal.tsx | 2 +-
.../src/components/Select/SelectBase.test.tsx | 2 +-
.../src/components/TagsInput/TagItem.tsx | 3 +-
.../Layers/LayerDragDropList.test.tsx | 8 +-
.../components/Layers/LayerDragDropList.tsx | 2 -
.../QueryOperationRowHeader.test.tsx | 4 +-
.../QueryOperationRowHeader.tsx | 1 -
.../BrowseActions/DeleteModal.test.tsx | 2 +-
.../BrowseActions/MoveModal.test.tsx | 2 +-
.../browse-dashboards/components/NameCell.tsx | 2 +-
.../LibraryPanelsSearch.test.tsx | 6 +-
.../query/components/QueryEditorRows.test.tsx | 2 +-
.../query/components/QueryGroup.test.tsx | 4 +-
.../components/ServiceAccountsListItem.tsx | 3 +-
.../DimensionFields.test.tsx | 4 +-
.../components/TracesQueryEditor/Filter.tsx | 2 +-
.../TracesQueryEditor/Filters.test.tsx | 6 +-
.../SearchTraceQLEditor/SearchField.test.tsx | 4 +-
22 files changed, 187 insertions(+), 119 deletions(-)
create mode 100644 docs/sources/developers/plugins/migration-guide/v10.0.x-v10.1.x/_index.md
diff --git a/docs/sources/developers/plugins/migration-guide/v10.0.x-v10.1.x/_index.md b/docs/sources/developers/plugins/migration-guide/v10.0.x-v10.1.x/_index.md
new file mode 100644
index 000000000000..01818e3e5f25
--- /dev/null
+++ b/docs/sources/developers/plugins/migration-guide/v10.0.x-v10.1.x/_index.md
@@ -0,0 +1,29 @@
+---
+description: Guide for migrating plugins from Grafana v10.0.x to v10.1.x
+keywords:
+ - grafana
+ - plugins
+ - migration
+ - plugin
+ - documentation
+title: Migrate plugins from Grafana 10.0.x to 10.1.x
+menutitle: v10.0.x to v10.1.x
+weight: 1900
+---
+
+# Migrate plugins from Grafana version 10.0.x to 10.1.x
+
+## Accessibility update for IconButton component in grafana-ui
+
+We updated the component's TypeScript interface due to an accessibility issue. This change was delivered to the core `grafana` repo with [PR 69699](https://github.com/grafana/grafana/pull/69699).
+
+In case you are using the IconButton component in your plugin you will get TypeScript errors related to the change.
+
+**Recommended actions:**
+
+- Review use cases of IconButton in your plugin.
+- Add a meaningful tooltip which the component will also use as an aria-label.
+- Another option is to set an aria-label. In this case a tooltip will not be shown.
+
+**Please note:**
+The IconButton used to have a property called `ariaLabel` which got deprecated with this change. You can now use the regular property `aria-label` instead.
diff --git a/packages/grafana-ui/src/components/IconButton/IconButton.mdx b/packages/grafana-ui/src/components/IconButton/IconButton.mdx
index c8190bca17cf..8d64adf442b5 100644
--- a/packages/grafana-ui/src/components/IconButton/IconButton.mdx
+++ b/packages/grafana-ui/src/components/IconButton/IconButton.mdx
@@ -1,17 +1,23 @@
import { Meta, ArgTypes } from '@storybook/blocks';
import { IconButton } from './IconButton';
+import { Icon } from '../Icon/Icon';
import { Alert } from '../Alert/Alert';
# IconButton
-This component looks just like an icon but behaves like a button. It fulfils an action when you click it and has hover and focus states. You can choose which icon size you would like to use.
+This component looks just like an icon but behaves like a button. It fulfils an action when you click it and has a hover as well a focus states. You can choose which icon size you would like to use.
`IconButton` is best used when you only want an icon instead of a button with text, for example when you want to place a solitary clickable icon next to text. An example where an `IconButton` is used in Grafana is the hamburger icon at the top left which opens the new navigation.
When using `IconButton` right next to a text element consider wrapping both in a flex container and use `align-items: center;` to make them align properly.
-Always keep in mind to add text for a tooltip and an aria label.
+There are two options to use the IconButton:
+
+- with `Tooltip`: This is the preferred option since we don't want to rely on assumptions when it comes to the meaning an `Icon` has. Add a text for the `Tooltip`. It will be used for the `aria-label` as well.
+- without `Tooltip`: This is an option for use cases where the `Icon` is unambiguous e.g for expanding a folder. Add a text for the `aria-label` and there will **not** be a `Tooltip`.
+
+The IconButton used to have a property called `ariaLabel` which got deprecated. You can now use the regular property `aria-label` instead.
After reviewing this component we would like you to know that there are only 5 sizes available (sizes xs to xl). Sizes
diff --git a/packages/grafana-ui/src/components/IconButton/IconButton.story.tsx b/packages/grafana-ui/src/components/IconButton/IconButton.story.tsx
index 011f3bdafc75..304e7ae96562 100644
--- a/packages/grafana-ui/src/components/IconButton/IconButton.story.tsx
+++ b/packages/grafana-ui/src/components/IconButton/IconButton.story.tsx
@@ -7,13 +7,16 @@ import { IconSize, IconName } from '../../types';
import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
import { HorizontalGroup, VerticalGroup } from '../Layout/Layout';
-import { IconButton, IconButtonVariant, Props as IconButtonProps } from './IconButton';
+import { BasePropsWithTooltip, IconButton, IconButtonVariant, Props as IconButtonProps } from './IconButton';
import mdx from './IconButton.mdx';
interface ScenarioProps {
background: 'canvas' | 'primary' | 'secondary';
}
+const defaultExcludes = ['ariaLabel', 'aria-label'];
+const additionalExcludes = ['size', 'name', 'variant', 'iconType'];
+
const meta: Meta = {
title: 'Buttons/IconButton',
component: IconButton,
@@ -22,6 +25,7 @@ const meta: Meta = {
docs: {
page: mdx,
},
+ controls: { exclude: defaultExcludes },
},
args: {
name: 'apps',
@@ -30,7 +34,8 @@ const meta: Meta = {
tooltip: 'sample tooltip message',
tooltipPlacement: 'top',
variant: 'secondary',
- ariaLabel: 'sample aria-label content',
+ ariaLabel: 'this property is deprecated',
+ ['aria-label']: 'sample aria-label content',
},
argTypes: {
tooltip: {
@@ -43,7 +48,7 @@ export const Basic: StoryFn = (args: IconButtonProps) => {
return ;
};
-export const ExamplesSizes = () => {
+export const ExamplesSizes = (args: BasePropsWithTooltip) => {
const theme = useTheme2();
const sizes: IconSize[] = ['xs', 'sm', 'md', 'lg', 'xl'];
const icons: IconName[] = ['search', 'trash-alt', 'arrow-left', 'times'];
@@ -56,17 +61,22 @@ export const ExamplesSizes = () => {
`;
return (
-
+
{variants.map((variant) => {
return (
-