[v10.0.x] Accessibility: Corrected aria-label for Edit Panel (#68640)

Accessibility: Corrected aria-label for Edit Panel (#67185)

* Accessibility: Corrected aria-label for Edit Panel

* Added data-testid

* Added data-testid

* Added betterer results

(cherry picked from commit 416e347e70)

Co-authored-by: Khushi Jain <57278642+khushijain21@users.noreply.github.com>

.betterer.results

@@ -2233,10 +2233,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"]
     ],

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

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'}
         />
       </ButtonGroup>
     </div>