FE Pro Dashboard Accessibility fixes [sc-109316]

meetuparchive · Jan 26, 2024 · 5f07efa · 5f07efa
1 parent 3f59c2f
commit 5f07efa
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 55 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
-Original file line number
+Diff line change
@@ Expand Up / @@ -207,7 +207,7 @@ exports[`Footer exists 1`] = ` @@
               items={
                 Array [
                   <span>
-                    © 2023 Meetup LLC
+                    © 2024 Meetup LLC
                   </span>,
                 ]
               }
@@ Expand Down @@