From 748ead7e13bd063ff50cf41ce3d7d807fd8cbe45 Mon Sep 17 00:00:00 2001
From: Wilson Furtado <72563697+wilsonfurtado2000@users.noreply.github.com>
Date: Mon, 30 Dec 2024 21:05:56 +0100
Subject: [PATCH] feat: Added hover styles and added tabIndex to the meeting
 list container instead of the meeting item header  (#15429)

* added hover styles and added tabIndex to the container instead of the meeting heading

* lint error fix
---
 css/_meetings_list.scss                                   | 3 ++-
 react/features/base/react/components/web/MeetingsList.tsx | 6 +++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/css/_meetings_list.scss b/css/_meetings_list.scss
index 563e04bbf2..5096371698 100644
--- a/css/_meetings_list.scss
+++ b/css/_meetings_list.scss
@@ -127,7 +127,8 @@
             cursor: pointer;
         }
 
-        &.with-click-handler:hover {
+        &.with-click-handler:hover,
+        &.with-click-handler:focus {
             background-color: #c7ddff;
         }
 
diff --git a/react/features/base/react/components/web/MeetingsList.tsx b/react/features/base/react/components/web/MeetingsList.tsx
index 5e388f1d8b..ab5cd86d4e 100644
--- a/react/features/base/react/components/web/MeetingsList.tsx
+++ b/react/features/base/react/components/web/MeetingsList.tsx
@@ -227,14 +227,14 @@ class MeetingsList extends Component<IProps> {
             <Container
                 className = { rootClassName }
                 key = { index }
-                onClick = { onPress }>
+                onClick = { onPress }
+                tabIndex = { 0 }>
                 <Container className = 'right-column'>
                     <Text
                         className = 'title'
                         onClick = { onPress }
                         onKeyPress = { onKeyPress }
-                        role = 'button'
-                        tabIndex = { 0 }>
+                        role = 'button'>
                         { title }
                     </Text>
                     {