From 1f3cf99c57027ab24c9be584574e266097c5d935 Mon Sep 17 00:00:00 2001
From: Melissa Hart <48496458+MelissaDTH@users.noreply.github.com>
Date: Thu, 4 Apr 2024 15:41:55 +0200
Subject: [PATCH] fix(a11y): icon button to use button element

---
 .../__snapshots__/CheckoutForm.test.tsx.snap  |  6 ++---
 .../Dialog/__snapshots__/Dialog.test.tsx.snap |  6 ++---
 .../DialogBackButton.test.tsx.snap            |  6 ++---
 .../EditPasswordForm.test.tsx.snap            | 12 ++++------
 .../Header/__snapshots__/Header.test.tsx.snap | 12 ++++------
 .../src/components/IconButton/IconButton.tsx  | 23 ++++--------------
 .../__snapshots__/IconButton.test.tsx.snap    |  6 ++---
 .../components/LanguageMenu/LanguageMenu.tsx  |  4 ++--
 .../__snapshots__/LanguageMenu.test.tsx.snap  |  6 ++---
 .../__snapshots__/LoginForm.test.tsx.snap     |  6 ++---
 .../ModalCloseButton.test.tsx.snap            |  6 ++---
 .../__snapshots__/PasswordField.test.tsx.snap |  6 ++---
 .../RegistrationForm.test.tsx.snap            |  6 ++---
 .../__snapshots__/SearchBar.test.tsx.snap     |  6 ++---
 .../__snapshots__/Sidebar.test.tsx.snap       | 12 ++++------
 .../Cinema/__snapshots__/Cinema.test.tsx.snap |  6 ++---
 .../Layout/__snapshots__/Layout.test.tsx.snap | 12 ++++------
 .../web/test-e2e/tests/live_channel_test.ts   |  2 +-
 .../test-e2e/tests/payments/coupons_test.ts   |  2 +-
 platforms/web/test-e2e/tests/search_test.ts   |  6 ++---
 .../web/test-e2e/tests/video_detail_test.ts   | 24 +++++++++----------
 .../web/test-e2e/utils/password_utils.ts      |  4 ++--
 platforms/web/test-e2e/utils/steps_file.ts    |  6 ++---
 platforms/web/test-e2e/utils/watch_history.ts |  2 +-
 24 files changed, 68 insertions(+), 119 deletions(-)

diff --git a/packages/ui-react/src/components/CheckoutForm/__snapshots__/CheckoutForm.test.tsx.snap b/packages/ui-react/src/components/CheckoutForm/__snapshots__/CheckoutForm.test.tsx.snap
index ebbee84cb..2c2beb5e7 100644
--- a/packages/ui-react/src/components/CheckoutForm/__snapshots__/CheckoutForm.test.tsx.snap
+++ b/packages/ui-react/src/components/CheckoutForm/__snapshots__/CheckoutForm.test.tsx.snap
@@ -216,11 +216,9 @@ exports[`<CheckoutForm> > renders and matches snapshot 1`] = `
         </form>
       </div>
     </div>
-    <div
+    <button
       aria-label="common:back"
       class="_iconButton_0fef65 _dialogBackButton_248199"
-      role="button"
-      tabindex="0"
     >
       <svg
         aria-hidden="true"
@@ -232,7 +230,7 @@ exports[`<CheckoutForm> > renders and matches snapshot 1`] = `
           d="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z"
         />
       </svg>
-    </div>
+    </button>
   </div>
 </div>
 `;
diff --git a/packages/ui-react/src/components/Dialog/__snapshots__/Dialog.test.tsx.snap b/packages/ui-react/src/components/Dialog/__snapshots__/Dialog.test.tsx.snap
index a46295ebc..fda711396 100644
--- a/packages/ui-react/src/components/Dialog/__snapshots__/Dialog.test.tsx.snap
+++ b/packages/ui-react/src/components/Dialog/__snapshots__/Dialog.test.tsx.snap
@@ -35,11 +35,9 @@ exports[`<Dialog> > renders and matches snapshot 1`] = `
             role="dialog"
           >
             Dialog contents
-            <div
+            <button
               aria-label="close_modal"
               class="_iconButton_0fef65 _modalCloseButton_b92d69"
-              role="button"
-              tabindex="0"
             >
               <svg
                 aria-hidden="true"
@@ -55,7 +53,7 @@ exports[`<Dialog> > renders and matches snapshot 1`] = `
                   fill="none"
                 />
               </svg>
-            </div>
+            </button>
           </div>
         </div>
       </div>
diff --git a/packages/ui-react/src/components/DialogBackButton/__snapshots__/DialogBackButton.test.tsx.snap b/packages/ui-react/src/components/DialogBackButton/__snapshots__/DialogBackButton.test.tsx.snap
index 99e39c033..7a39c7d0e 100644
--- a/packages/ui-react/src/components/DialogBackButton/__snapshots__/DialogBackButton.test.tsx.snap
+++ b/packages/ui-react/src/components/DialogBackButton/__snapshots__/DialogBackButton.test.tsx.snap
@@ -2,11 +2,9 @@
 
 exports[`<DialogBackButton> > renders and matches snapshot 1`] = `
 <div>
-  <div
+  <button
     aria-label="common:back"
     class="_iconButton_0fef65 _dialogBackButton_248199"
-    role="button"
-    tabindex="0"
   >
     <svg
       aria-hidden="true"
@@ -18,6 +16,6 @@ exports[`<DialogBackButton> > renders and matches snapshot 1`] = `
         d="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z"
       />
     </svg>
-  </div>
+  </button>
 </div>
 `;
diff --git a/packages/ui-react/src/components/EditPasswordForm/__snapshots__/EditPasswordForm.test.tsx.snap b/packages/ui-react/src/components/EditPasswordForm/__snapshots__/EditPasswordForm.test.tsx.snap
index 154c0b47c..98520e064 100644
--- a/packages/ui-react/src/components/EditPasswordForm/__snapshots__/EditPasswordForm.test.tsx.snap
+++ b/packages/ui-react/src/components/EditPasswordForm/__snapshots__/EditPasswordForm.test.tsx.snap
@@ -38,12 +38,10 @@ exports[`<EditPasswordForm> > renders and matches snapshot 1`] = `
         <div
           class="_control_e16c1b"
         >
-          <div
+          <button
             aria-label="reset.view_password"
             aria-pressed="false"
             class="_iconButton_0fef65"
-            role="button"
-            tabindex="0"
           >
             <svg
               aria-hidden="true"
@@ -55,7 +53,7 @@ exports[`<EditPasswordForm> > renders and matches snapshot 1`] = `
                 d="M11.83,9L15,12.16C15,12.11 15,12.05 15,12A3,3 0 0,0 12,9C11.94,9 11.89,9 11.83,9M7.53,9.8L9.08,11.35C9.03,11.56 9,11.77 9,12A3,3 0 0,0 12,15C12.22,15 12.44,14.97 12.65,14.92L14.2,16.47C13.53,16.8 12.79,17 12,17A5,5 0 0,1 7,12C7,11.21 7.2,10.47 7.53,9.8M2,4.27L4.28,6.55L4.73,7C3.08,8.3 1.78,10 1,12C2.73,16.39 7,19.5 12,19.5C13.55,19.5 15.03,19.2 16.38,18.66L16.81,19.08L19.73,22L21,20.73L3.27,3M12,7A5,5 0 0,1 17,12C17,12.64 16.87,13.26 16.64,13.82L19.57,16.75C21.07,15.5 22.27,13.86 23,12C21.27,7.61 17,4.5 12,4.5C10.6,4.5 9.26,4.75 8,5.2L10.17,7.35C10.74,7.13 11.35,7 12,7Z"
               />
             </svg>
-          </div>
+          </button>
         </div>
       </div>
       <div
@@ -92,12 +90,10 @@ exports[`<EditPasswordForm> > renders and matches snapshot 1`] = `
         <div
           class="_control_e16c1b"
         >
-          <div
+          <button
             aria-label="reset.view_password"
             aria-pressed="false"
             class="_iconButton_0fef65"
-            role="button"
-            tabindex="0"
           >
             <svg
               aria-hidden="true"
@@ -109,7 +105,7 @@ exports[`<EditPasswordForm> > renders and matches snapshot 1`] = `
                 d="M11.83,9L15,12.16C15,12.11 15,12.05 15,12A3,3 0 0,0 12,9C11.94,9 11.89,9 11.83,9M7.53,9.8L9.08,11.35C9.03,11.56 9,11.77 9,12A3,3 0 0,0 12,15C12.22,15 12.44,14.97 12.65,14.92L14.2,16.47C13.53,16.8 12.79,17 12,17A5,5 0 0,1 7,12C7,11.21 7.2,10.47 7.53,9.8M2,4.27L4.28,6.55L4.73,7C3.08,8.3 1.78,10 1,12C2.73,16.39 7,19.5 12,19.5C13.55,19.5 15.03,19.2 16.38,18.66L16.81,19.08L19.73,22L21,20.73L3.27,3M12,7A5,5 0 0,1 17,12C17,12.64 16.87,13.26 16.64,13.82L19.57,16.75C21.07,15.5 22.27,13.86 23,12C21.27,7.61 17,4.5 12,4.5C10.6,4.5 9.26,4.75 8,5.2L10.17,7.35C10.74,7.13 11.35,7 12,7Z"
               />
             </svg>
-          </div>
+          </button>
         </div>
       </div>
       <div
diff --git a/packages/ui-react/src/components/Header/__snapshots__/Header.test.tsx.snap b/packages/ui-react/src/components/Header/__snapshots__/Header.test.tsx.snap
index baeb35dd9..168f16f1d 100644
--- a/packages/ui-react/src/components/Header/__snapshots__/Header.test.tsx.snap
+++ b/packages/ui-react/src/components/Header/__snapshots__/Header.test.tsx.snap
@@ -17,14 +17,12 @@ exports[`<Header /> > renders header 1`] = `
       <div
         class="_menu_f4f7a7"
       >
-        <div
+        <button
           aria-controls="sidebar"
           aria-expanded="false"
           aria-haspopup="true"
           aria-label="open_menu"
           class="_iconButton_0fef65 _iconButton_f4f7a7"
-          role="button"
-          tabindex="0"
         >
           <svg
             aria-hidden="true"
@@ -40,7 +38,7 @@ exports[`<Header /> > renders header 1`] = `
               d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
             />
           </svg>
-        </div>
+        </button>
       </div>
       <nav
         class="_nav_f4f7a7"
@@ -50,11 +48,9 @@ exports[`<Header /> > renders header 1`] = `
       <div
         class="_actions_f4f7a7"
       >
-        <div
+        <button
           aria-label="Open search"
           class="_iconButton_0fef65 _iconButton_f4f7a7 _actionButton_f4f7a7"
-          role="button"
-          tabindex="0"
         >
           <svg
             aria-hidden="true"
@@ -66,7 +62,7 @@ exports[`<Header /> > renders header 1`] = `
               d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
             />
           </svg>
-        </div>
+        </button>
         <div
           class="_buttonContainer_f4f7a7"
         >
diff --git a/packages/ui-react/src/components/IconButton/IconButton.tsx b/packages/ui-react/src/components/IconButton/IconButton.tsx
index fa5d6b8e4..14d229cb7 100644
--- a/packages/ui-react/src/components/IconButton/IconButton.tsx
+++ b/packages/ui-react/src/components/IconButton/IconButton.tsx
@@ -1,33 +1,20 @@
 import classNames from 'classnames';
-import React, { type AriaAttributes } from 'react';
+import React, { type ButtonHTMLAttributes } from 'react';
 
 import styles from './IconButton.module.scss';
 
-type Props = AriaAttributes & {
+type Props = ButtonHTMLAttributes<HTMLButtonElement> & {
   onClick?: () => void;
   onBlur?: () => void;
   children: JSX.Element;
-  tabIndex?: number;
   className?: string;
 };
 
-const IconButton: React.FC<Props> = ({ children, onClick, tabIndex = 0, className, ...ariaProps }: Props) => {
+const IconButton: React.FC<Props> = ({ children, onClick, className, ...ariaProps }: Props) => {
   return (
-    <div
-      className={classNames(styles.iconButton, className)}
-      onClick={onClick}
-      role="button"
-      tabIndex={tabIndex}
-      onKeyDown={(event: React.KeyboardEvent) => {
-        if ((event.key === 'Enter' || event.key === ' ') && tabIndex >= 0 && onClick) {
-          onClick();
-          event.preventDefault(); // prevent click being called when this component unmounts
-        }
-      }}
-      {...ariaProps}
-    >
+    <button className={classNames(styles.iconButton, className)} onClick={onClick} {...ariaProps}>
       {children}
-    </div>
+    </button>
   );
 };
 
diff --git a/packages/ui-react/src/components/IconButton/__snapshots__/IconButton.test.tsx.snap b/packages/ui-react/src/components/IconButton/__snapshots__/IconButton.test.tsx.snap
index 29886da80..f8e9e64c5 100644
--- a/packages/ui-react/src/components/IconButton/__snapshots__/IconButton.test.tsx.snap
+++ b/packages/ui-react/src/components/IconButton/__snapshots__/IconButton.test.tsx.snap
@@ -2,11 +2,9 @@
 
 exports[`<IconButton> > renders and matches snapshot 1`] = `
 <div>
-  <div
+  <button
     aria-label="Icon button"
     class="_iconButton_0fef65"
-    role="button"
-    tabindex="0"
   >
     <svg
       viewBox="0 0 24 24"
@@ -20,6 +18,6 @@ exports[`<IconButton> > renders and matches snapshot 1`] = `
         fill="none"
       />
     </svg>
-  </div>
+  </button>
 </div>
 `;
diff --git a/packages/ui-react/src/components/LanguageMenu/LanguageMenu.tsx b/packages/ui-react/src/components/LanguageMenu/LanguageMenu.tsx
index 2a11f724a..8463b9df1 100644
--- a/packages/ui-react/src/components/LanguageMenu/LanguageMenu.tsx
+++ b/packages/ui-react/src/components/LanguageMenu/LanguageMenu.tsx
@@ -48,14 +48,14 @@ const LanguageMenu = ({ onClick, className, languages, currentLanguage, language
         aria-controls="language-panel"
         aria-expanded={languageMenuOpen}
         aria-haspopup="menu"
-        className={classNames(styles.iconButton, className)}
+        className={classNames(className)}
         aria-label={t('language_menu')}
         onClick={handleMenuToggle}
         onBlur={closeLanguageMenu}
       >
         <Icon icon={Language} />
       </IconButton>
-      <Popover isOpen={languageMenuOpen} onClose={closeLanguageMenu} aria-expanded={languageMenuOpen}>
+      <Popover isOpen={languageMenuOpen} onClose={closeLanguageMenu}>
         <Panel id="language-panel">
           <ul className={styles.menuItems}>
             {languages.map(({ code, displayName }) => {
diff --git a/packages/ui-react/src/components/LanguageMenu/__snapshots__/LanguageMenu.test.tsx.snap b/packages/ui-react/src/components/LanguageMenu/__snapshots__/LanguageMenu.test.tsx.snap
index e098530c3..5f70ef66e 100644
--- a/packages/ui-react/src/components/LanguageMenu/__snapshots__/LanguageMenu.test.tsx.snap
+++ b/packages/ui-react/src/components/LanguageMenu/__snapshots__/LanguageMenu.test.tsx.snap
@@ -2,15 +2,13 @@
 
 exports[`<LanguageMenu> > renders and matches snapshot 1`] = `
 <div>
-  <div
+  <button
     aria-controls="language-panel"
     aria-expanded="false"
     aria-haspopup="menu"
     aria-label="language_menu"
     class="_iconButton_0fef65"
     data-testid="language-menu-button"
-    role="button"
-    tabindex="0"
   >
     <svg
       aria-hidden="true"
@@ -23,6 +21,6 @@ exports[`<LanguageMenu> > renders and matches snapshot 1`] = `
         fill="currentColor"
       />
     </svg>
-  </div>
+  </button>
 </div>
 `;
diff --git a/packages/ui-react/src/components/LoginForm/__snapshots__/LoginForm.test.tsx.snap b/packages/ui-react/src/components/LoginForm/__snapshots__/LoginForm.test.tsx.snap
index ccb3a2978..d119863b5 100644
--- a/packages/ui-react/src/components/LoginForm/__snapshots__/LoginForm.test.tsx.snap
+++ b/packages/ui-react/src/components/LoginForm/__snapshots__/LoginForm.test.tsx.snap
@@ -85,12 +85,10 @@ exports[`<LoginForm> > renders and matches snapshot 1`] = `
         <div
           class="_control_e16c1b"
         >
-          <div
+          <button
             aria-label="login.view_password"
             aria-pressed="false"
             class="_iconButton_0fef65"
-            role="button"
-            tabindex="0"
           >
             <svg
               aria-hidden="true"
@@ -102,7 +100,7 @@ exports[`<LoginForm> > renders and matches snapshot 1`] = `
                 d="M11.83,9L15,12.16C15,12.11 15,12.05 15,12A3,3 0 0,0 12,9C11.94,9 11.89,9 11.83,9M7.53,9.8L9.08,11.35C9.03,11.56 9,11.77 9,12A3,3 0 0,0 12,15C12.22,15 12.44,14.97 12.65,14.92L14.2,16.47C13.53,16.8 12.79,17 12,17A5,5 0 0,1 7,12C7,11.21 7.2,10.47 7.53,9.8M2,4.27L4.28,6.55L4.73,7C3.08,8.3 1.78,10 1,12C2.73,16.39 7,19.5 12,19.5C13.55,19.5 15.03,19.2 16.38,18.66L16.81,19.08L19.73,22L21,20.73L3.27,3M12,7A5,5 0 0,1 17,12C17,12.64 16.87,13.26 16.64,13.82L19.57,16.75C21.07,15.5 22.27,13.86 23,12C21.27,7.61 17,4.5 12,4.5C10.6,4.5 9.26,4.75 8,5.2L10.17,7.35C10.74,7.13 11.35,7 12,7Z"
               />
             </svg>
-          </div>
+          </button>
         </div>
       </div>
     </div>
diff --git a/packages/ui-react/src/components/ModalCloseButton/__snapshots__/ModalCloseButton.test.tsx.snap b/packages/ui-react/src/components/ModalCloseButton/__snapshots__/ModalCloseButton.test.tsx.snap
index 587364f04..3d1e03c3b 100644
--- a/packages/ui-react/src/components/ModalCloseButton/__snapshots__/ModalCloseButton.test.tsx.snap
+++ b/packages/ui-react/src/components/ModalCloseButton/__snapshots__/ModalCloseButton.test.tsx.snap
@@ -2,11 +2,9 @@
 
 exports[`<ModalCloseButton> > renders and matches snapshot 1`] = `
 <div>
-  <div
+  <button
     aria-label="close_modal"
     class="_iconButton_0fef65 _modalCloseButton_b92d69"
-    role="button"
-    tabindex="0"
   >
     <svg
       aria-hidden="true"
@@ -22,6 +20,6 @@ exports[`<ModalCloseButton> > renders and matches snapshot 1`] = `
         fill="none"
       />
     </svg>
-  </div>
+  </button>
 </div>
 `;
diff --git a/packages/ui-react/src/components/PasswordField/__snapshots__/PasswordField.test.tsx.snap b/packages/ui-react/src/components/PasswordField/__snapshots__/PasswordField.test.tsx.snap
index 0bc26227d..c8b995d96 100644
--- a/packages/ui-react/src/components/PasswordField/__snapshots__/PasswordField.test.tsx.snap
+++ b/packages/ui-react/src/components/PasswordField/__snapshots__/PasswordField.test.tsx.snap
@@ -28,12 +28,10 @@ exports[`<PasswordField> > renders and matches snapshot 1`] = `
       <div
         class="_control_e16c1b"
       >
-        <div
+        <button
           aria-label="reset.view_password"
           aria-pressed="false"
           class="_iconButton_0fef65"
-          role="button"
-          tabindex="0"
         >
           <svg
             aria-hidden="true"
@@ -45,7 +43,7 @@ exports[`<PasswordField> > renders and matches snapshot 1`] = `
               d="M11.83,9L15,12.16C15,12.11 15,12.05 15,12A3,3 0 0,0 12,9C11.94,9 11.89,9 11.83,9M7.53,9.8L9.08,11.35C9.03,11.56 9,11.77 9,12A3,3 0 0,0 12,15C12.22,15 12.44,14.97 12.65,14.92L14.2,16.47C13.53,16.8 12.79,17 12,17A5,5 0 0,1 7,12C7,11.21 7.2,10.47 7.53,9.8M2,4.27L4.28,6.55L4.73,7C3.08,8.3 1.78,10 1,12C2.73,16.39 7,19.5 12,19.5C13.55,19.5 15.03,19.2 16.38,18.66L16.81,19.08L19.73,22L21,20.73L3.27,3M12,7A5,5 0 0,1 17,12C17,12.64 16.87,13.26 16.64,13.82L19.57,16.75C21.07,15.5 22.27,13.86 23,12C21.27,7.61 17,4.5 12,4.5C10.6,4.5 9.26,4.75 8,5.2L10.17,7.35C10.74,7.13 11.35,7 12,7Z"
             />
           </svg>
-        </div>
+        </button>
       </div>
     </div>
     <div
diff --git a/packages/ui-react/src/components/RegistrationForm/__snapshots__/RegistrationForm.test.tsx.snap b/packages/ui-react/src/components/RegistrationForm/__snapshots__/RegistrationForm.test.tsx.snap
index 709bd50c3..073d957b0 100644
--- a/packages/ui-react/src/components/RegistrationForm/__snapshots__/RegistrationForm.test.tsx.snap
+++ b/packages/ui-react/src/components/RegistrationForm/__snapshots__/RegistrationForm.test.tsx.snap
@@ -65,12 +65,10 @@ exports[`<RegistrationForm> > renders and matches snapshot 1`] = `
         <div
           class="_control_e16c1b"
         >
-          <div
+          <button
             aria-label="registration.view_password"
             aria-pressed="false"
             class="_iconButton_0fef65"
-            role="button"
-            tabindex="0"
           >
             <svg
               aria-hidden="true"
@@ -82,7 +80,7 @@ exports[`<RegistrationForm> > renders and matches snapshot 1`] = `
                 d="M11.83,9L15,12.16C15,12.11 15,12.05 15,12A3,3 0 0,0 12,9C11.94,9 11.89,9 11.83,9M7.53,9.8L9.08,11.35C9.03,11.56 9,11.77 9,12A3,3 0 0,0 12,15C12.22,15 12.44,14.97 12.65,14.92L14.2,16.47C13.53,16.8 12.79,17 12,17A5,5 0 0,1 7,12C7,11.21 7.2,10.47 7.53,9.8M2,4.27L4.28,6.55L4.73,7C3.08,8.3 1.78,10 1,12C2.73,16.39 7,19.5 12,19.5C13.55,19.5 15.03,19.2 16.38,18.66L16.81,19.08L19.73,22L21,20.73L3.27,3M12,7A5,5 0 0,1 17,12C17,12.64 16.87,13.26 16.64,13.82L19.57,16.75C21.07,15.5 22.27,13.86 23,12C21.27,7.61 17,4.5 12,4.5C10.6,4.5 9.26,4.75 8,5.2L10.17,7.35C10.74,7.13 11.35,7 12,7Z"
               />
             </svg>
-          </div>
+          </button>
         </div>
       </div>
       <div
diff --git a/packages/ui-react/src/components/SearchBar/__snapshots__/SearchBar.test.tsx.snap b/packages/ui-react/src/components/SearchBar/__snapshots__/SearchBar.test.tsx.snap
index 6ad2ca4f9..6ad06cf58 100644
--- a/packages/ui-react/src/components/SearchBar/__snapshots__/SearchBar.test.tsx.snap
+++ b/packages/ui-react/src/components/SearchBar/__snapshots__/SearchBar.test.tsx.snap
@@ -32,11 +32,9 @@ exports[`<SearchBar> > renders and matches snapshot 1`] = `
         type="search"
         value="My search query"
       />
-      <div
+      <button
         aria-label="search_bar.clear_search_label"
         class="_iconButton_0fef65 _clearButton_3bb1d7"
-        role="button"
-        tabindex="0"
       >
         <svg
           aria-hidden="true"
@@ -48,7 +46,7 @@ exports[`<SearchBar> > renders and matches snapshot 1`] = `
             d="M9 1C4.58 1 1 4.58 1 9s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm4 10.87L11.87 13 9 10.13 6.13 13 5 11.87 7.87 9 5 6.13 6.13 5 9 7.87 11.87 5 13 6.13 10.13 9 13 11.87z"
           />
         </svg>
-      </div>
+      </button>
     </form>
   </div>
 </div>
diff --git a/packages/ui-react/src/components/Sidebar/__snapshots__/Sidebar.test.tsx.snap b/packages/ui-react/src/components/Sidebar/__snapshots__/Sidebar.test.tsx.snap
index 33b7ab28a..92a961242 100644
--- a/packages/ui-react/src/components/Sidebar/__snapshots__/Sidebar.test.tsx.snap
+++ b/packages/ui-react/src/components/Sidebar/__snapshots__/Sidebar.test.tsx.snap
@@ -13,11 +13,9 @@ exports[`<SideBar /> > renders sideBar closed 1`] = `
     <div
       class="_heading_577f70"
     >
-      <div
+      <button
         aria-label="close_menu"
         class="_iconButton_0fef65"
-        role="button"
-        tabindex="0"
       >
         <svg
           aria-hidden="true"
@@ -33,7 +31,7 @@ exports[`<SideBar /> > renders sideBar closed 1`] = `
             fill="none"
           />
         </svg>
-      </div>
+      </button>
     </div>
     <nav
       class="_group_577f70"
@@ -64,11 +62,9 @@ exports[`<SideBar /> > renders sideBar opened 1`] = `
     <div
       class="_heading_577f70"
     >
-      <div
+      <button
         aria-label="close_menu"
         class="_iconButton_0fef65"
-        role="button"
-        tabindex="0"
       >
         <svg
           aria-hidden="true"
@@ -84,7 +80,7 @@ exports[`<SideBar /> > renders sideBar opened 1`] = `
             fill="none"
           />
         </svg>
-      </div>
+      </button>
     </div>
     <nav
       class="_group_577f70"
diff --git a/packages/ui-react/src/containers/Cinema/__snapshots__/Cinema.test.tsx.snap b/packages/ui-react/src/containers/Cinema/__snapshots__/Cinema.test.tsx.snap
index e929cf9ac..ae50a64a6 100644
--- a/packages/ui-react/src/containers/Cinema/__snapshots__/Cinema.test.tsx.snap
+++ b/packages/ui-react/src/containers/Cinema/__snapshots__/Cinema.test.tsx.snap
@@ -38,11 +38,9 @@ exports[`<Cinema> > renders and matches snapshot 1`] = `
                 <div
                   class="_playerContent_555f3c"
                 >
-                  <div
+                  <button
                     aria-label="common:back"
                     class="_iconButton_0fef65 _backButton_555f3c"
-                    role="button"
-                    tabindex="0"
                   >
                     <svg
                       aria-hidden="true"
@@ -54,7 +52,7 @@ exports[`<Cinema> > renders and matches snapshot 1`] = `
                         d="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z"
                       />
                     </svg>
-                  </div>
+                  </button>
                   <div>
                     <h1
                       class="_title_555f3c"
diff --git a/packages/ui-react/src/containers/Layout/__snapshots__/Layout.test.tsx.snap b/packages/ui-react/src/containers/Layout/__snapshots__/Layout.test.tsx.snap
index 1bef0cce5..d625ee018 100644
--- a/packages/ui-react/src/containers/Layout/__snapshots__/Layout.test.tsx.snap
+++ b/packages/ui-react/src/containers/Layout/__snapshots__/Layout.test.tsx.snap
@@ -21,14 +21,12 @@ exports[`<Layout /> > renders layout 1`] = `
           <div
             class="_menu_f4f7a7"
           >
-            <div
+            <button
               aria-controls="sidebar"
               aria-expanded="false"
               aria-haspopup="true"
               aria-label="open_menu"
               class="_iconButton_0fef65 _iconButton_f4f7a7"
-              role="button"
-              tabindex="0"
             >
               <svg
                 aria-hidden="true"
@@ -44,7 +42,7 @@ exports[`<Layout /> > renders layout 1`] = `
                   d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
                 />
               </svg>
-            </div>
+            </button>
           </div>
           <nav
             class="_nav_f4f7a7"
@@ -81,11 +79,9 @@ exports[`<Layout /> > renders layout 1`] = `
       <div
         class="_heading_577f70"
       >
-        <div
+        <button
           aria-label="close_menu"
           class="_iconButton_0fef65"
-          role="button"
-          tabindex="0"
         >
           <svg
             aria-hidden="true"
@@ -101,7 +97,7 @@ exports[`<Layout /> > renders layout 1`] = `
               fill="none"
             />
           </svg>
-        </div>
+        </button>
       </div>
       <nav
         class="_group_577f70"
diff --git a/platforms/web/test-e2e/tests/live_channel_test.ts b/platforms/web/test-e2e/tests/live_channel_test.ts
index d83b4ef4a..6b9473c21 100644
--- a/platforms/web/test-e2e/tests/live_channel_test.ts
+++ b/platforms/web/test-e2e/tests/live_channel_test.ts
@@ -100,7 +100,7 @@ Scenario.skip('I can watch the current live program on the live channel screen',
   // to make sure the back button is visible and can be clicked on
   I.click('video');
 
-  I.click('div[aria-label="Back"]');
+  I.click('button[aria-label="Back"]');
   await I.checkPlayerClosed();
 });
 
diff --git a/platforms/web/test-e2e/tests/payments/coupons_test.ts b/platforms/web/test-e2e/tests/payments/coupons_test.ts
index 4d02b77a4..f95c3b384 100644
--- a/platforms/web/test-e2e/tests/payments/coupons_test.ts
+++ b/platforms/web/test-e2e/tests/payments/coupons_test.ts
@@ -57,7 +57,7 @@ function runTestSuite(props: ProviderProps, providerName: string) {
     I.seeElement('input[name="couponCode"]');
     I.see('Apply');
 
-    I.click('div[aria-label="Close coupon form"]');
+    I.click('button[aria-label="Close coupon form"]');
     I.dontSee('Coupon code');
 
     I.click('Redeem coupon');
diff --git a/platforms/web/test-e2e/tests/search_test.ts b/platforms/web/test-e2e/tests/search_test.ts
index 50c1439df..4bea920a4 100644
--- a/platforms/web/test-e2e/tests/search_test.ts
+++ b/platforms/web/test-e2e/tests/search_test.ts
@@ -4,11 +4,11 @@ import { testConfigs } from '@jwp/ott-testing/constants';
 
 import constants from '#utils/constants';
 
-const openSearchLocator = { css: 'div[aria-label="Open search"]' };
+const openSearchLocator = { css: 'button[aria-label="Open search"]' };
 const searchBarLocator = 'input[type="search"]';
 const emptySearchPrompt = 'Type something in the search box to start searching';
-const clearSearchLocator = { css: 'div[aria-label="Clear search"]' };
-const closeSearchLocator = { css: 'div[aria-label="Close search"]' };
+const clearSearchLocator = { css: 'button[aria-label="Clear search"]' };
+const closeSearchLocator = { css: 'button[aria-label="Close search"]' };
 
 Feature('search').retry(Number(process.env.TEST_RETRY_COUNT) || 0);
 
diff --git a/platforms/web/test-e2e/tests/video_detail_test.ts b/platforms/web/test-e2e/tests/video_detail_test.ts
index e3469d3ba..be446cfb9 100644
--- a/platforms/web/test-e2e/tests/video_detail_test.ts
+++ b/platforms/web/test-e2e/tests/video_detail_test.ts
@@ -46,20 +46,20 @@ function runTestSuite(config: typeof testConfigs.svod, providerName: string) {
       I.seeCssPropertiesOnElements(`text="${constants.agent327Description}"`, { 'max-height': height });
     }
 
-    I.seeElement('div[aria-label="Expand"]');
-    I.dontSeeElement('div[aria-label="Collapse"]');
+    I.seeElement('button[aria-label="Expand"]');
+    I.dontSeeElement('button[aria-label="Collapse"]');
     checkHeight('60px');
 
-    I.click('div[aria-label="Expand"]');
+    I.click('button[aria-label="Expand"]');
 
-    I.seeElement('div[aria-label="Collapse"]');
-    I.dontSeeElement('div[aria-label="Expand"]');
+    I.seeElement('button[aria-label="Collapse"]');
+    I.dontSeeElement('button[aria-label="Expand"]');
     checkHeight('216px');
 
-    I.click('div[aria-label="Collapse"]');
+    I.click('button[aria-label="Collapse"]');
 
-    I.seeElement('div[aria-label="Expand"]');
-    I.dontSeeElement('div[aria-label="Collapse"]');
+    I.seeElement('button[aria-label="Expand"]');
+    I.dontSeeElement('button[aria-label="Collapse"]');
     checkHeight('60px');
   });
 
@@ -68,7 +68,7 @@ function runTestSuite(config: typeof testConfigs.svod, providerName: string) {
   Scenario(`I can return to the video detail screen - ${providerName}`, async ({ I }) => {
     await playBigBuckBunny(I);
 
-    I.click('div[aria-label="Back"]');
+    I.click('button[aria-label="Back"]');
 
     await I.checkPlayerClosed();
     I.see(constants.startWatchingButton);
@@ -103,7 +103,7 @@ function runTestSuite(config: typeof testConfigs.svod, providerName: string) {
     await I.checkPlayerClosed();
     I.waitForText('Email', normalTimeout);
     I.see('Password');
-    I.click('div[aria-label="Close panel"]');
+    I.click('button[aria-label="Close panel"]');
 
     I.click('Trailer');
     await I.waitForPlayerPlaying(`${constants.elephantsDreamTitle} - Trailer`);
@@ -126,7 +126,7 @@ function runTestSuite(config: typeof testConfigs.svod, providerName: string) {
 
     await I.waitForPlayerPlaying(constants.elephantsDreamTitle);
 
-    I.click('div[aria-label="Back"]');
+    I.click('button[aria-label="Back"]');
 
     await I.checkPlayerClosed();
   });
@@ -150,7 +150,7 @@ function runTestSuite(config: typeof testConfigs.svod, providerName: string) {
 
     await I.waitForPlayerPlaying(constants.elephantsDreamTitle);
 
-    I.click('div[aria-label="Back"]');
+    I.click('button[aria-label="Back"]');
 
     await I.checkPlayerClosed();
   });
diff --git a/platforms/web/test-e2e/utils/password_utils.ts b/platforms/web/test-e2e/utils/password_utils.ts
index afbf894d1..dd2e14b39 100644
--- a/platforms/web/test-e2e/utils/password_utils.ts
+++ b/platforms/web/test-e2e/utils/password_utils.ts
@@ -13,12 +13,12 @@ async function testPasswordToggling(I: CodeceptJS.I, name = 'password') {
 
   await checkPasswordType(I, name, 'password');
 
-  I.click(`input[name="${name}"]+div div[aria-label="View password"]`);
+  I.click(`input[name="${name}"]+div button[aria-label="View password"]`);
   await checkPasswordType(I, name, 'text');
 
   await I.writeClipboard('dummy');
 
-  I.click(`input[name="${name}"]+div div[aria-label="View password"]`);
+  I.click(`input[name="${name}"]+div button[aria-label="View password"]`);
   await checkPasswordType(I, name, 'password');
 }
 
diff --git a/platforms/web/test-e2e/utils/steps_file.ts b/platforms/web/test-e2e/utils/steps_file.ts
index fb8f3642f..e7af276e5 100644
--- a/platforms/web/test-e2e/utils/steps_file.ts
+++ b/platforms/web/test-e2e/utils/steps_file.ts
@@ -278,13 +278,13 @@ const stepsObj = {
     return isMobile;
   },
   openMenuDrawer: function (this: CodeceptJS.I) {
-    this.click('div[aria-label="Open menu"]');
+    this.click('button[aria-label="Open menu"]');
   },
   openUserMenu: function (this: CodeceptJS.I) {
-    this.click('div[aria-label="Open user menu"]');
+    this.click('button[aria-label="Open user menu"]');
   },
   clickCloseButton: function (this: CodeceptJS.I) {
-    this.click('div[aria-label="Close panel"]');
+    this.click('button[aria-label="Close panel"]');
   },
   seeAll: function (this: CodeceptJS.I, allStrings: string[]) {
     allStrings.forEach((s) => this.see(s));
diff --git a/platforms/web/test-e2e/utils/watch_history.ts b/platforms/web/test-e2e/utils/watch_history.ts
index 1736e6f73..9007c234a 100644
--- a/platforms/web/test-e2e/utils/watch_history.ts
+++ b/platforms/web/test-e2e/utils/watch_history.ts
@@ -17,7 +17,7 @@ export async function playVideo(I: CodeceptJS.I, seekTo: number, title: string,
     window.jwplayer().seek(seekTo);
   }, seekTo);
   I.clickPlayerContainer();
-  I.click('div[aria-label="Back"]');
+  I.click('button[aria-label="Back"]');
 
   // We need to wait for the player to be removed before proceeding, otherwise race conditions occur when the player is reloaded
   await I.waitForPlayerState('', ['paused']);