fix(a11y): icon button to use button element

jwplayer · Apr 22, 2024 · 7d5beae · 7d5beae
1 parent 0dfa380
commit 7d5beae
Show file tree

Hide file tree

Showing 24 changed files with 68 additions and 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
@@ -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
@@ -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/...ges/ui-react/src/components/DialogBackButton/__snapshots__/DialogBackButton.test.tsx.snap b/...ges/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/...ges/ui-react/src/components/EditPasswordForm/__snapshots__/EditPasswordForm.test.tsx.snap b/...ges/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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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/...ges/ui-react/src/components/ModalCloseButton/__snapshots__/ModalCloseButton.test.tsx.snap b/...ges/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
@@ -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/...ges/ui-react/src/components/RegistrationForm/__snapshots__/RegistrationForm.test.tsx.snap b/...ges/ui-react/src/components/RegistrationForm/__snapshots__/RegistrationForm.test.tsx.snap
@@ -84,12 +84,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"
@@ -101,7 +99,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
@@ -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>