SDA-3962 A11y - take screenshot split button accessibility fix

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>
     </>

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;
 }