From 5f07efae388c246e9f2d658d29223eb5bd555d33 Mon Sep 17 00:00:00 2001
From: meetup-oleksandr-dudiuk <odudiuk@meetup.com>
Date: Fri, 26 Jan 2024 15:05:22 +0200
Subject: [PATCH] FE Pro Dashboard Accessibility fixes [sc-109316]

---
 assets/css/main.css                           |   7 +-
 src/__snapshots__/footer.test.jsx.snap        |   2 +-
 src/forms/__snapshots__/button.test.jsx.snap  |  10 +-
 .../__snapshots__/tooltip.test.jsx.snap       | 105 +++++++++---------
 4 files changed, 69 insertions(+), 55 deletions(-)

diff --git a/assets/css/main.css b/assets/css/main.css
index 44a233a4b..97359e858 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -3478,13 +3478,16 @@ $('#fadeInLink').on('click', function(e) {
 
 /* with icon */
 [data-swarm-button][data-icon="left"] .svg-icon,
-[data-swarm-button][data-icon="left"] [data-swarm-icon] {
+[data-swarm-button][data-icon="left"] [data-swarm-icon], [data-swarm-link][data-icon="left"] .svg-icon {
   margin-right: var(--space-half); }
 
 [data-swarm-button][data-icon="right"] .svg-icon,
-[data-swarm-button][data-icon="right"] [data-swarm-icon] {
+[data-swarm-button][data-icon="right"] [data-swarm-icon], [data-swarm-link][data-icon="right"] .svg-icon {
   margin-left: var(--space-half); }
 
+[data-swarm-link][data-icon="only"] {
+  padding: var(--space-half); }
+
 /*doc
 ---
 title: Cards
diff --git a/src/__snapshots__/footer.test.jsx.snap b/src/__snapshots__/footer.test.jsx.snap
index 218ebd1c5..4eceeb153 100644
--- a/src/__snapshots__/footer.test.jsx.snap
+++ b/src/__snapshots__/footer.test.jsx.snap
@@ -207,7 +207,7 @@ exports[`Footer exists 1`] = `
           items={
             Array [
               <span>
-                © 2023 Meetup LLC
+                © 2024 Meetup LLC
               </span>,
             ]
           }
diff --git a/src/forms/__snapshots__/button.test.jsx.snap b/src/forms/__snapshots__/button.test.jsx.snap
index 8eae5ab8e..3e65643d2 100644
--- a/src/forms/__snapshots__/button.test.jsx.snap
+++ b/src/forms/__snapshots__/button.test.jsx.snap
@@ -1,3 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Button is a HTML button element exists 1`] = `<Button />`;
+exports[`Button is a HTML button element exists 1`] = `
+<button
+  data-icon="only"
+  data-swarm-button="default"
+  data-swarm-size="default"
+  data-swarm-width="default"
+  type="button"
+/>
+`;
diff --git a/src/interactive/__snapshots__/tooltip.test.jsx.snap b/src/interactive/__snapshots__/tooltip.test.jsx.snap
index 76a82334c..929967212 100644
--- a/src/interactive/__snapshots__/tooltip.test.jsx.snap
+++ b/src/interactive/__snapshots__/tooltip.test.jsx.snap
@@ -78,19 +78,16 @@ exports[`Tooltip tooltip with a close button should render correctly 1`] = `
         <Button
           small={true}
         >
-          <Button
+          <button
+            data-icon="left"
+            data-swarm-button="default"
+            data-swarm-size="small"
+            data-swarm-width="default"
             small={true}
+            type="button"
           >
-            <button
-              data-icon="left"
-              data-swarm-button="default"
-              data-swarm-size="small"
-              data-swarm-width="default"
-              type="button"
-            >
-              Open
-            </button>
-          </Button>
+            Open
+          </button>
         </Button>
       </Button>
     </div>
@@ -140,18 +137,22 @@ exports[`Tooltip tooltip with a close button should render correctly 1`] = `
                         type="button"
                       >
                         <span>
-                          <svg
-                            class="svg svg--cross svg-icon valign--middle"
-                            height="20"
-                            preserveAspectRatio="xMinYMin meet"
-                            role="img"
-                            viewBox="0 0 20 20"
-                            width="20"
-                          >
-                            <use
-                              xlink:href="#icon-cross--small"
-                            />
-                          </svg>
+                          <span>
+                            <span>
+                              <svg
+                                class="svg svg--cross svg-icon valign--middle"
+                                height="20"
+                                preserveAspectRatio="xMinYMin meet"
+                                role="presentation"
+                                viewBox="0 0 20 20"
+                                width="20"
+                              >
+                                <use
+                                  xlink:href="#icon-cross--small"
+                                />
+                              </svg>
+                            </span>
+                          </span>
                         </span>
                       </button>
                       <section
@@ -217,47 +218,49 @@ exports[`Tooltip tooltip with a close button should render correctly 1`] = `
                       reset={true}
                       role="button"
                     >
-                      <Button
+                      <button
                         aria-label="Close"
                         className="tooltip-closeBtn"
-                        icon="cross"
+                        data-icon="only"
+                        data-swarm-button="reset"
+                        data-swarm-size="default"
+                        data-swarm-width="default"
                         onClick={[Function]}
                         reset={true}
                         role="button"
+                        type="button"
                       >
-                        <button
-                          aria-label="Close"
-                          className="tooltip-closeBtn"
-                          data-icon="only"
-                          data-swarm-button="reset"
-                          data-swarm-size="default"
-                          data-swarm-width="default"
-                          onClick={[Function]}
-                          role="button"
-                          type="button"
-                        >
+                        <span>
                           <span>
                             <Icon
                               shape="cross"
                               size="xs"
                             >
-                              <svg
-                                className="svg svg--cross svg-icon valign--middle"
-                                height="20"
-                                preserveAspectRatio="xMinYMin meet"
-                                role="img"
-                                style={Object {}}
-                                viewBox="0 0 20 20"
-                                width="20"
-                              >
-                                <use
-                                  xlinkHref="#icon-cross--small"
-                                />
-                              </svg>
+                              <span>
+                                <Icon
+                                  role="presentation"
+                                  shape="cross"
+                                  size="xs"
+                                >
+                                  <svg
+                                    className="svg svg--cross svg-icon valign--middle"
+                                    height="20"
+                                    preserveAspectRatio="xMinYMin meet"
+                                    role="presentation"
+                                    style={Object {}}
+                                    viewBox="0 0 20 20"
+                                    width="20"
+                                  >
+                                    <use
+                                      xlinkHref="#icon-cross--small"
+                                    />
+                                  </svg>
+                                </Icon>
+                              </span>
                             </Icon>
                           </span>
-                        </button>
-                      </Button>
+                        </span>
+                      </button>
                     </Button>
                   </Button>
                   <Section