From a6e3412f80d814ccd06bc199dbaf68edecb960ff Mon Sep 17 00:00:00 2001
From: sbenmoussati <51402489+sbenmoussati@users.noreply.github.com>
Date: Mon, 19 Dec 2022 16:10:44 +0100
Subject: [PATCH] SDA-3962 A11y - take screenshot split button accessibility
 fix

---
 src/renderer/components/menu-button.tsx | 13 ++++++-------
 src/renderer/styles/snipping-tool.less  | 10 ++++++++--
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/renderer/components/menu-button.tsx b/src/renderer/components/menu-button.tsx
index c57e2679..6eee51b9 100644
--- a/src/renderer/components/menu-button.tsx
+++ b/src/renderer/components/menu-button.tsx
@@ -16,7 +16,7 @@ const MenuButton: React.FunctionComponent<IMenuButtonProps> = ({
 }) => {
   //#region State
   const [isDisplay, setDisplay] = useState(false);
-  const listRef = useRef<HTMLUListElement>(document.createElement('ul'));
+  const listRef = useRef<HTMLDivElement>(document.createElement('div'));
   const menuButtonRef = useRef<HTMLButtonElement>(
     document.createElement('button'),
   );
@@ -75,15 +75,14 @@ const MenuButton: React.FunctionComponent<IMenuButtonProps> = ({
       };
 
       return (
-        <li
-          data-testid={`${id}_${listItem.dataTestId}`}
-          className='list-item general-font'
+        <button
+          className='general-font list-item'
           lang={i18n.getLocale()}
           onClick={sendClick}
           key={listItem.event}
         >
           {listItem.name}
-        </li>
+        </button>
       );
     });
   };
@@ -107,9 +106,9 @@ const MenuButton: React.FunctionComponent<IMenuButtonProps> = ({
           />
         </button>
         {isDisplay && (
-          <ul className='menu' ref={listRef}>
+          <div className='menu' ref={listRef}>
             {renderListItems()}
-          </ul>
+          </div>
         )}
       </div>
     </>
diff --git a/src/renderer/styles/snipping-tool.less b/src/renderer/styles/snipping-tool.less
index b53c5f4d..8aa8c0d5 100644
--- a/src/renderer/styles/snipping-tool.less
+++ b/src/renderer/styles/snipping-tool.less
@@ -273,7 +273,11 @@ body.using-mouse :focus {
   list-style-type: none;
   width: 100%;
   box-sizing: border-box;
+  border: none;
   padding: 12px 14px;
+  background-color: transparent;
+  width: 100%;
+  text-align: left;
 }
 
 .list-item:hover {
@@ -281,11 +285,13 @@ body.using-mouse :focus {
   background-color: @graphite-60;
 }
 
-.list-item:hover:first-of-type {
+.list-item:hover:first-of-type,
+.list-item:focus:first-of-type {
   border-radius: 8px 8px 0 0;
 }
 
-.list-item:hover:last-of-type {
+.list-item:hover:last-of-type,
+.list-item:focus:last-of-type {
   border-radius: 0 0 8px 8px;
 }