From 4990f36d8b64d618605cf51d2b8631dc54916e81 Mon Sep 17 00:00:00 2001
From: RoxanaAnamariaTurc
 <106086831+RoxanaAnamariaTurc@users.noreply.github.com>
Date: Wed, 26 Jul 2023 10:23:01 +0100
Subject: [PATCH] A11Y: SelectOptionGroup component fix lint rule about element
 interactions (#72213)

* A11Y: SelectOptionGroup component fix lint rule about element interactions

* Undone changes following feedback received
---
 .../src/components/Select/SelectOptionGroup.tsx           | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/grafana-ui/src/components/Select/SelectOptionGroup.tsx b/packages/grafana-ui/src/components/Select/SelectOptionGroup.tsx
index 368234d99af..08314d41474 100644
--- a/packages/grafana-ui/src/components/Select/SelectOptionGroup.tsx
+++ b/packages/grafana-ui/src/components/Select/SelectOptionGroup.tsx
@@ -81,11 +81,11 @@ class UnthemedSelectOptionGroup extends PureComponent<ExtendedGroupProps, State>
 
     return (
       <div>
-        {/* TODO: fix keyboard a11y */}
-        {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
-        <div className={styles.header} onClick={this.onToggleChildren}>
+        {/*React Select doesn't support focusable option group headers, this will be skipped when using
+      the keyboard */}
+        <div className={styles.header} onClick={this.onToggleChildren} role="presentation">
           <span className={styles.label}>{label}</span>
-          <Icon className={styles.icon} name={expanded ? 'angle-up' : 'angle-down'} />{' '}
+          <Icon className={styles.icon} name={expanded ? 'angle-up' : 'angle-down'} />
         </div>
         {expanded && children}
       </div>