chore(a11y): adhere icon button styling & don’t act as a submit button

Co-authored-by: Mike van Veenhuijzen <[email protected]>
jwplayer · Apr 11, 2024 · 4c0a198 · 4c0a198
1 parent 1f3cf99
commit 4c0a198
Show file tree

Hide file tree

Showing 17 changed files with 21 additions and 2 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
@@ -219,6 +219,7 @@ exports[`<CheckoutForm> > renders and matches snapshot 1`] = `
     <button
       aria-label="common:back"
       class="_iconButton_0fef65 _dialogBackButton_248199"
+      type="button"
     >
       <svg
         aria-hidden="true"

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
@@ -38,6 +38,7 @@ exports[`<Dialog> > renders and matches snapshot 1`] = `
             <button
               aria-label="close_modal"
               class="_iconButton_0fef65 _modalCloseButton_b92d69"
+              type="button"
             >
               <svg
                 aria-hidden="true"

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
@@ -5,6 +5,7 @@ exports[`<DialogBackButton> > renders and matches snapshot 1`] = `
   <button
     aria-label="common:back"
     class="_iconButton_0fef65 _dialogBackButton_248199"
+    type="button"
   >
     <svg
       aria-hidden="true"

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
@@ -42,6 +42,7 @@ exports[`<EditPasswordForm> > renders and matches snapshot 1`] = `
             aria-label="reset.view_password"
             aria-pressed="false"
             class="_iconButton_0fef65"
+            type="button"
           >
             <svg
               aria-hidden="true"
@@ -94,6 +95,7 @@ exports[`<EditPasswordForm> > renders and matches snapshot 1`] = `
             aria-label="reset.view_password"
             aria-pressed="false"
             class="_iconButton_0fef65"
+            type="button"
           >
             <svg
               aria-hidden="true"

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
@@ -23,6 +23,7 @@ exports[`<Header /> > renders header 1`] = `
           aria-haspopup="true"
           aria-label="open_menu"
           class="_iconButton_0fef65 _iconButton_f4f7a7"
+          type="button"
         >
           <svg
             aria-hidden="true"
@@ -51,6 +52,7 @@ exports[`<Header /> > renders header 1`] = `
         <button
           aria-label="Open search"
           class="_iconButton_0fef65 _iconButton_f4f7a7 _actionButton_f4f7a7"
+          type="button"
         >
           <svg
             aria-hidden="true"

diff --git a/packages/ui-react/src/components/IconButton/IconButton.tsx b/packages/ui-react/src/components/IconButton/IconButton.tsx
@@ -12,7 +12,7 @@ type Props = ButtonHTMLAttributes<HTMLButtonElement> & {
 
 const IconButton: React.FC<Props> = ({ children, onClick, className, ...ariaProps }: Props) => {
   return (
-    <button className={classNames(styles.iconButton, className)} onClick={onClick} {...ariaProps}>
+    <button className={classNames(styles.iconButton, className)} type="button" onClick={onClick} {...ariaProps}>
       {children}
     </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
@@ -5,6 +5,7 @@ exports[`<IconButton> > renders and matches snapshot 1`] = `
   <button
     aria-label="Icon button"
     class="_iconButton_0fef65"
+    type="button"
   >
     <svg
       viewBox="0 0 24 24"

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
@@ -9,6 +9,7 @@ exports[`<LanguageMenu> > renders and matches snapshot 1`] = `
     aria-label="language_menu"
     class="_iconButton_0fef65"
     data-testid="language-menu-button"
+    type="button"
   >
     <svg
       aria-hidden="true"

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
@@ -89,6 +89,7 @@ exports[`<LoginForm> > renders and matches snapshot 1`] = `
             aria-label="login.view_password"
             aria-pressed="false"
             class="_iconButton_0fef65"
+            type="button"
           >
             <svg
               aria-hidden="true"

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
@@ -5,6 +5,7 @@ exports[`<ModalCloseButton> > renders and matches snapshot 1`] = `
   <button
     aria-label="close_modal"
     class="_iconButton_0fef65 _modalCloseButton_b92d69"
+    type="button"
   >
     <svg
       aria-hidden="true"

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
@@ -32,6 +32,7 @@ exports[`<PasswordField> > renders and matches snapshot 1`] = `
           aria-label="reset.view_password"
           aria-pressed="false"
           class="_iconButton_0fef65"
+          type="button"
         >
           <svg
             aria-hidden="true"

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
@@ -69,6 +69,7 @@ exports[`<RegistrationForm> > renders and matches snapshot 1`] = `
             aria-label="registration.view_password"
             aria-pressed="false"
             class="_iconButton_0fef65"
+            type="button"
           >
             <svg
               aria-hidden="true"

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
@@ -35,6 +35,7 @@ exports[`<SearchBar> > renders and matches snapshot 1`] = `
       <button
         aria-label="search_bar.clear_search_label"
         class="_iconButton_0fef65 _clearButton_3bb1d7"
+        type="button"
       >
         <svg
           aria-hidden="true"

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
@@ -16,6 +16,7 @@ exports[`<SideBar /> > renders sideBar closed 1`] = `
       <button
         aria-label="close_menu"
         class="_iconButton_0fef65"
+        type="button"
       >
         <svg
           aria-hidden="true"
@@ -65,6 +66,7 @@ exports[`<SideBar /> > renders sideBar opened 1`] = `
       <button
         aria-label="close_menu"
         class="_iconButton_0fef65"
+        type="button"
       >
         <svg
           aria-hidden="true"

diff --git a/packages/ui-react/src/components/TextField/TextField.module.scss b/packages/ui-react/src/components/TextField/TextField.module.scss
@@ -48,7 +48,7 @@
   }
 }
 
-.control > div {
+.control > button {
   width: 48px;
   height: 48px;
 }

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
@@ -41,6 +41,7 @@ exports[`<Cinema> > renders and matches snapshot 1`] = `
                   <button
                     aria-label="common:back"
                     class="_iconButton_0fef65 _backButton_555f3c"
+                    type="button"
                   >
                     <svg
                       aria-hidden="true"

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
@@ -27,6 +27,7 @@ exports[`<Layout /> > renders layout 1`] = `
               aria-haspopup="true"
               aria-label="open_menu"
               class="_iconButton_0fef65 _iconButton_f4f7a7"
+              type="button"
             >
               <svg
                 aria-hidden="true"
@@ -82,6 +83,7 @@ exports[`<Layout /> > renders layout 1`] = `
         <button
           aria-label="close_menu"
           class="_iconButton_0fef65"
+          type="button"
         >
           <svg
             aria-hidden="true"