From 416e347e7027d952dd3ecb9fdb16ea5d6254c7ee Mon Sep 17 00:00:00 2001 From: Khushi Jain <57278642+khushijain21@users.noreply.github.com> Date: Wed, 17 May 2023 20:50:38 +0530 Subject: [PATCH] Accessibility: Corrected aria-label for Edit Panel (#67185) * Accessibility: Corrected aria-label for Edit Panel * Added data-testid * Added data-testid * Added betterer results --- .betterer.results | 4 ---- packages/grafana-e2e-selectors/src/selectors/components.ts | 4 ++-- .../components/PanelEditor/VisualizationButton.tsx | 6 ++++-- 3 files changed, 6 insertions(+), 8 deletions(-) diff --git a/.betterer.results b/.betterer.results index dbb5b8b957d..48eb2717000 100644 --- a/.betterer.results +++ b/.betterer.results @@ -2218,10 +2218,6 @@ exports[`better eslint`] = { [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "2"], [0, 0, 0, "Do not use any type assertions.", "3"] ], - "public/app/features/dashboard/components/PanelEditor/VisualizationButton.tsx:5381": [ - [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "0"], - [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "1"] - ], "public/app/features/dashboard/components/PanelEditor/VisualizationSelectPane.tsx:5381": [ [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "0"] ], diff --git a/packages/grafana-e2e-selectors/src/selectors/components.ts b/packages/grafana-e2e-selectors/src/selectors/components.ts index 319d5a438b9..a223ac0460c 100644 --- a/packages/grafana-e2e-selectors/src/selectors/components.ts +++ b/packages/grafana-e2e-selectors/src/selectors/components.ts @@ -141,8 +141,8 @@ export const Components = { content: 'Panel editor data pane content', }, applyButton: 'data-testid Apply changes and go back to dashboard', - toggleVizPicker: 'toggle-viz-picker', - toggleVizOptions: 'toggle-viz-options', + toggleVizPicker: 'data-testid toggle-viz-picker', + toggleVizOptions: 'data-testid toggle-viz-options', toggleTableView: 'toggle-table-view', // [Geomap] Map controls diff --git a/public/app/features/dashboard/components/PanelEditor/VisualizationButton.tsx b/public/app/features/dashboard/components/PanelEditor/VisualizationButton.tsx index 7143623a879..9a89428415a 100644 --- a/public/app/features/dashboard/components/PanelEditor/VisualizationButton.tsx +++ b/public/app/features/dashboard/components/PanelEditor/VisualizationButton.tsx @@ -42,7 +42,8 @@ export const VisualizationButton = ({ panel }: Props) => { imgSrc={plugin.meta.info.logos.small} isOpen={isVizPickerOpen} onClick={onToggleOpen} - aria-label={selectors.components.PanelEditor.toggleVizPicker} + data-testid={selectors.components.PanelEditor.toggleVizPicker} + aria-label="Change Visualization" variant="canvas" fullWidth > @@ -53,7 +54,8 @@ export const VisualizationButton = ({ panel }: Props) => { icon={isPanelOptionsVisible ? 'angle-right' : 'angle-left'} onClick={onToggleOptionsPane} variant="canvas" - aria-label={selectors.components.PanelEditor.toggleVizOptions} + data-testid={selectors.components.PanelEditor.toggleVizOptions} + aria-label={isPanelOptionsVisible ? 'Close options pane' : 'Show options pane'} />