From 3f59c2ffc12a4a43b5ccf8d57c701e8aceafe82c Mon Sep 17 00:00:00 2001
From: meetup-oleksandr-dudiuk <odudiuk@meetup.com>
Date: Fri, 26 Jan 2024 15:03:21 +0200
Subject: [PATCH 1/7] FE Pro Dashboard Accessibility fixes [sc-109316]

---
 assets/css/main.css                 |  9 ++++++
 assets/scss/components/_button.scss | 33 +++++++++++++++++++++
 src/forms/Button.jsx                | 46 ++++++++++++++++++++++++++---
 src/navigation/Nav.jsx              | 36 ++++++++++++----------
 4 files changed, 105 insertions(+), 19 deletions(-)

diff --git a/assets/css/main.css b/assets/css/main.css
index 993f22420..44a233a4b 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -3476,6 +3476,15 @@ $('#fadeInLink').on('click', function(e) {
     background-color: #e63a6a !important;
     border: 1px solid #e63a6a !important; }
 
+/* with icon */
+[data-swarm-button][data-icon="left"] .svg-icon,
+[data-swarm-button][data-icon="left"] [data-swarm-icon] {
+  margin-right: var(--space-half); }
+
+[data-swarm-button][data-icon="right"] .svg-icon,
+[data-swarm-button][data-icon="right"] [data-swarm-icon] {
+  margin-left: var(--space-half); }
+
 /*doc
 ---
 title: Cards
diff --git a/assets/scss/components/_button.scss b/assets/scss/components/_button.scss
index 3fa5a8887..78cc9475c 100644
--- a/assets/scss/components/_button.scss
+++ b/assets/scss/components/_button.scss
@@ -239,3 +239,36 @@
 		border: 1px solid $active !important;
 	}
 }
+
+/* with icon */
+%swarm-button-icon-left {
+	margin-right: var(--space-half);
+}
+%swarm-button-icon-right {
+	margin-left: var(--space-half);
+}
+%swarm-button-icon-only {
+	padding: var(--space-half);
+}
+
+[data-swarm-button][data-icon="left"] .svg-icon,
+[data-swarm-button][data-icon="left"] [data-swarm-icon] {
+	@extend %swarm-button-icon-left;
+}
+
+[data-swarm-button][data-icon="right"] .svg-icon,
+[data-swarm-button][data-icon="right"] [data-swarm-icon] {
+	@extend %swarm-button-icon-right;
+}
+
+[data-swarm-link][data-icon="left"] .svg-icon {
+	@extend %swarm-button-icon-left;
+}
+
+[data-swarm-link][data-icon="right"] .svg-icon {
+	@extend %swarm-button-icon-right;
+}
+
+[data-swarm-link][data-icon="only"] {
+	@extend %swarm-button-icon-only;
+}
diff --git a/src/forms/Button.jsx b/src/forms/Button.jsx
index 80da6f654..4fed0cb70 100644
--- a/src/forms/Button.jsx
+++ b/src/forms/Button.jsx
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import Icon from '../media/Icon';
 
-import { Button as SwarmButton, LinkButton as SwarmLink } from '@meetup/swarm-components';
+import { LinkButton as SwarmLink } from '@meetup/swarm-components';
 
 import {
 	getButtonType,
@@ -26,6 +26,11 @@ export class Button extends React.PureComponent {
 			icon,
 			hasHoverShadow, // eslint-disable-line no-unused-vars
 			to,
+			children,
+			iconOnly,
+			forwardedRef,
+			right,
+			iconProps,
 			...other
 		} = this.props;
 
@@ -68,11 +73,11 @@ export class Button extends React.PureComponent {
 						right ? (
 							<React.Fragment>
 								{children}
-								<Icon shape={iconShape} size="xs" />
+								<Icon shape={iconShape} size="xs" {...iconProps} />
 							</React.Fragment>
 						) : (
 							<React.Fragment>
-								<Icon shape={iconShape} size="xs" />
+								<Icon shape={iconShape} size="xs" {...iconProps} />
 								{children}
 							</React.Fragment>
 						)
@@ -85,7 +90,40 @@ export class Button extends React.PureComponent {
 			return <SwarmLink icon={iconShape} grow={fullWidth} {...other} />;
 		}
 
-		return <SwarmButton icon={iconShape} grow={fullWidth} {...other} />;
+		const buttonType = getButtonType(this.props);
+		const width = fullWidth ? 'grow' : 'default';
+
+		return (
+			<button
+				data-swarm-button={buttonType}
+				data-swarm-size={getSwarmSize(this.props)}
+				data-icon={getIconPosition(this.props)}
+				data-swarm-width={width}
+				type="button"
+				ref={forwardedRef}
+				{...other}
+			>
+				{icon ? (
+					<span>
+						{right ? (
+							<span>
+								{children}
+								<Icon shape={iconShape} size="xs" {...iconProps} />
+							</span>
+						) : (
+							<span>
+								<Icon shape={iconShape} size="xs" {...iconProps} />
+								{children}
+							</span>
+						)}
+					</span>
+				) : iconOnly ? (
+					<span>{children}</span>
+				) : (
+					children
+				)}
+			</button>
+		);
 	}
 }
 
diff --git a/src/navigation/Nav.jsx b/src/navigation/Nav.jsx
index 0917df25a..f9072af81 100644
--- a/src/navigation/Nav.jsx
+++ b/src/navigation/Nav.jsx
@@ -1,3 +1,4 @@
+// eslint-disable no-undef
 import PropTypes from 'prop-types';
 import * as React from 'react';
 import cx from 'classnames';
@@ -240,7 +241,7 @@ export class Nav extends React.Component {
 				isNewNavsOrder={
 					isNewNavsOrder && (localeCode ? localeCode.includes('en') : false)
 				}
-				hasNewConnections={connections.hasNewConnections}
+				hasNewConnections={connections && connections.hasNewConnections}
 			/>
 		) : (
 			<DropdownLoader label={dropdownLoaderLabel} />
@@ -282,7 +283,11 @@ export class Nav extends React.Component {
 		};
 
 		const getConnectionsIcon = () => (
-			<img className="proIcon" alt={connections.label} src={CONNECTIONS_ICON} />
+			<img
+				className="proIcon"
+				alt={connections && connections.label}
+				src={CONNECTIONS_ICON}
+			/>
 		);
 
 		const getNotificationsIcon = () => {
@@ -399,19 +404,20 @@ export class Nav extends React.Component {
 				linkClassName: 'navItemLink-pro',
 				isTargetBlank: true,
 			},
-			media.isAtMediumUp && {
-				shrink: true,
-				linkTo: connections.link,
-				label: connections.label,
-				labelClassName: 'navItem-label-pro',
-				className: cx('navItem--connections', CLASS_AUTH_ITEM),
-				linkClassName: 'navItemLink-pro',
-				counterBadgeClassName: 'navItem--counterBadgeConnections',
-				icon: getConnectionsIcon(),
-				hasUpdates: connections.hasNewConnections > 0,
-				updatesLabel: updatesLabel,
-				onLinkClick: messages.onLinkClick,
-			},
+			media.isAtMediumUp &&
+				!!connections && {
+					shrink: true,
+					linkTo: connections.link,
+					label: connections.label,
+					labelClassName: 'navItem-label-pro',
+					className: cx('navItem--connections', CLASS_AUTH_ITEM),
+					linkClassName: 'navItemLink-pro',
+					counterBadgeClassName: 'navItem--counterBadgeConnections',
+					icon: getConnectionsIcon(),
+					hasUpdates: connections.hasNewConnections > 0,
+					updatesLabel: updatesLabel,
+					onLinkClick: messages.onLinkClick,
+				},
 			{
 				shrink: true,
 				linkTo: messages.link,

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 2/7] 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

From 99c60262cadcca23d26774e07412bfec36d9841b Mon Sep 17 00:00:00 2001
From: meetup-oleksandr-dudiuk <odudiuk@meetup.com>
Date: Fri, 26 Jan 2024 15:12:42 +0200
Subject: [PATCH 3/7] some changes

---
 src/forms/Button.jsx                          |  8 +-
 .../__snapshots__/tooltip.test.jsx.snap       | 76 +++++++++----------
 2 files changed, 40 insertions(+), 44 deletions(-)

diff --git a/src/forms/Button.jsx b/src/forms/Button.jsx
index 4fed0cb70..647013ddb 100644
--- a/src/forms/Button.jsx
+++ b/src/forms/Button.jsx
@@ -106,15 +106,15 @@ export class Button extends React.PureComponent {
 				{icon ? (
 					<span>
 						{right ? (
-							<span>
+							<React.Fragment>
 								{children}
 								<Icon shape={iconShape} size="xs" {...iconProps} />
-							</span>
+							</React.Fragment>
 						) : (
-							<span>
+							<React.Fragment>
 								<Icon shape={iconShape} size="xs" {...iconProps} />
 								{children}
-							</span>
+							</React.Fragment>
 						)}
 					</span>
 				) : iconOnly ? (
diff --git a/src/interactive/__snapshots__/tooltip.test.jsx.snap b/src/interactive/__snapshots__/tooltip.test.jsx.snap
index 929967212..c881ffe31 100644
--- a/src/interactive/__snapshots__/tooltip.test.jsx.snap
+++ b/src/interactive/__snapshots__/tooltip.test.jsx.snap
@@ -138,20 +138,18 @@ exports[`Tooltip tooltip with a close button should render correctly 1`] = `
                       >
                         <span>
                           <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>
+                            <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>
                       </button>
@@ -231,34 +229,32 @@ exports[`Tooltip tooltip with a close button should render correctly 1`] = `
                         type="button"
                       >
                         <span>
-                          <span>
-                            <Icon
-                              shape="cross"
-                              size="xs"
-                            >
-                              <span>
-                                <Icon
+                          <Icon
+                            shape="cross"
+                            size="xs"
+                          >
+                            <span>
+                              <Icon
+                                role="presentation"
+                                shape="cross"
+                                size="xs"
+                              >
+                                <svg
+                                  className="svg svg--cross svg-icon valign--middle"
+                                  height="20"
+                                  preserveAspectRatio="xMinYMin meet"
                                   role="presentation"
-                                  shape="cross"
-                                  size="xs"
+                                  style={Object {}}
+                                  viewBox="0 0 20 20"
+                                  width="20"
                                 >
-                                  <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>
+                                  <use
+                                    xlinkHref="#icon-cross--small"
+                                  />
+                                </svg>
+                              </Icon>
+                            </span>
+                          </Icon>
                         </span>
                       </button>
                     </Button>

From d717182309bb82595b01464bda429c40ec14f36d Mon Sep 17 00:00:00 2001
From: meetup-oleksandr-dudiuk <odudiuk@meetup.com>
Date: Fri, 26 Jan 2024 15:28:13 +0200
Subject: [PATCH 4/7] fix toggle

---
 src/forms/ToggleSwitch.jsx                                 | 7 +++++++
 src/interactive/__snapshots__/accordionPanel.test.jsx.snap | 2 ++
 2 files changed, 9 insertions(+)

diff --git a/src/forms/ToggleSwitch.jsx b/src/forms/ToggleSwitch.jsx
index cc2a9b195..afca096b0 100644
--- a/src/forms/ToggleSwitch.jsx
+++ b/src/forms/ToggleSwitch.jsx
@@ -21,6 +21,7 @@ class ToggleSwitch extends React.Component {
 			id,
 			name,
 			disabled,
+			ariaLabel,
 			...other
 		} = this.props;
 
@@ -40,6 +41,12 @@ class ToggleSwitch extends React.Component {
 					aria-checked={checked}
 					aria-readonly={disabled}
 					disabled={disabled}
+					aria-label={
+						ariaLabel ||
+						(typeof label === 'string'
+							? `${label} - toggle switch`
+							: 'toggle switch')
+					}
 					{...labelProps}
 					{...other}
 				>
diff --git a/src/interactive/__snapshots__/accordionPanel.test.jsx.snap b/src/interactive/__snapshots__/accordionPanel.test.jsx.snap
index c8280701d..6f19529d0 100644
--- a/src/interactive/__snapshots__/accordionPanel.test.jsx.snap
+++ b/src/interactive/__snapshots__/accordionPanel.test.jsx.snap
@@ -218,6 +218,7 @@ exports[`AccordionPanel Locked panel with toggle switch renders locked toggle pa
                       <div>
                         <button
                           aria-checked={false}
+                          aria-label="toggle switch"
                           aria-labelledby="label-firstsection"
                           aria-readonly={false}
                           className="toggleSwitch"
@@ -703,6 +704,7 @@ exports[`AccordionPanel Panel with toggle switch exists and renders a toggle swi
                       <div>
                         <button
                           aria-checked={false}
+                          aria-label="toggle switch"
                           aria-labelledby="label-firstsection"
                           aria-readonly={false}
                           className="toggleSwitch"

From 463695a9a185aaac3b77a33689673d3bedb51d43 Mon Sep 17 00:00:00 2001
From: meetup-oleksandr-dudiuk <odudiuk@meetup.com>
Date: Mon, 29 Jan 2024 14:54:11 +0200
Subject: [PATCH 5/7] refactor

---
 src/forms/Button.jsx                          | 70 ++++++++++---------
 src/forms/__snapshots__/button.test.jsx.snap  |  6 +-
 src/forms/button.story.jsx                    |  6 +-
 .../__snapshots__/tooltip.test.jsx.snap       | 56 ++++++++-------
 src/navigation/Nav.jsx                        |  2 +-
 5 files changed, 79 insertions(+), 61 deletions(-)

diff --git a/src/forms/Button.jsx b/src/forms/Button.jsx
index 647013ddb..df20b1dea 100644
--- a/src/forms/Button.jsx
+++ b/src/forms/Button.jsx
@@ -10,6 +10,24 @@ import {
 	getIconPosition,
 } from '@meetup/swarm-components/lib/utils/buttonUtils';
 
+const ChildrenWithIcon = ({ children, right, iconShape, iconProps, iconOnly }) => {
+	if (iconShape) {
+		return right ? (
+			<React.Fragment>
+				{children}
+				<Icon shape={iconShape} size="xs" {...iconProps} />
+			</React.Fragment>
+		) : (
+			<React.Fragment>
+				<Icon shape={iconShape} size="xs" {...iconProps} />
+				{children}
+			</React.Fragment>
+		);
+	}
+
+	return children;
+};
+
 import DeprecationWarning from '../utils/components/DeprecationWarning';
 /**
  * @module Button
@@ -69,21 +87,15 @@ export class Button extends React.PureComponent {
 					to={to}
 					{...linkProps}
 				>
-					{icon ? (
-						right ? (
-							<React.Fragment>
-								{children}
-								<Icon shape={iconShape} size="xs" {...iconProps} />
-							</React.Fragment>
-						) : (
-							<React.Fragment>
-								<Icon shape={iconShape} size="xs" {...iconProps} />
-								{children}
-							</React.Fragment>
-						)
-					) : (
-						children
-					)}
+					<span>
+						<ChildrenWithIcon
+							children={children}
+							iconShape={iconShape}
+							right={right}
+							iconProps={iconProps}
+							iconOnly={iconOnly}
+						/>
+					</span>
 				</Component>
 			);
 		} else if (component === 'a') {
@@ -103,25 +115,15 @@ export class Button extends React.PureComponent {
 				ref={forwardedRef}
 				{...other}
 			>
-				{icon ? (
-					<span>
-						{right ? (
-							<React.Fragment>
-								{children}
-								<Icon shape={iconShape} size="xs" {...iconProps} />
-							</React.Fragment>
-						) : (
-							<React.Fragment>
-								<Icon shape={iconShape} size="xs" {...iconProps} />
-								{children}
-							</React.Fragment>
-						)}
-					</span>
-				) : iconOnly ? (
-					<span>{children}</span>
-				) : (
-					children
-				)}
+				<span>
+					<ChildrenWithIcon
+						children={children}
+						iconShape={iconShape}
+						right={right}
+						iconProps={iconProps}
+						iconOnly={iconOnly}
+					/>
+				</span>
 			</button>
 		);
 	}
diff --git a/src/forms/__snapshots__/button.test.jsx.snap b/src/forms/__snapshots__/button.test.jsx.snap
index 3e65643d2..35b74dd9f 100644
--- a/src/forms/__snapshots__/button.test.jsx.snap
+++ b/src/forms/__snapshots__/button.test.jsx.snap
@@ -7,5 +7,9 @@ exports[`Button is a HTML button element exists 1`] = `
   data-swarm-size="default"
   data-swarm-width="default"
   type="button"
-/>
+>
+  <span>
+    <ChildrenWithIcon />
+  </span>
+</button>
 `;
diff --git a/src/forms/button.story.jsx b/src/forms/button.story.jsx
index 4c5802cf3..4b7874089 100644
--- a/src/forms/button.story.jsx
+++ b/src/forms/button.story.jsx
@@ -192,6 +192,10 @@ storiesOf('Forms/Button', module)
 		</Button>
 	))
 	.add('Icon Only', () => (
-		<Button onClick={action('clicked')} icon={<Icon shape="search" size="xxs" />} />
+		<Button
+			onClick={action('clicked')}
+			icon={<Icon shape="search" size="xxs" />}
+			iconOnly
+		/>
 	))
 	.add('No Label', () => <Button />);
diff --git a/src/interactive/__snapshots__/tooltip.test.jsx.snap b/src/interactive/__snapshots__/tooltip.test.jsx.snap
index c881ffe31..5325f69a9 100644
--- a/src/interactive/__snapshots__/tooltip.test.jsx.snap
+++ b/src/interactive/__snapshots__/tooltip.test.jsx.snap
@@ -86,7 +86,11 @@ exports[`Tooltip tooltip with a close button should render correctly 1`] = `
             small={true}
             type="button"
           >
-            Open
+            <span>
+              <ChildrenWithIcon>
+                Open
+              </ChildrenWithIcon>
+            </span>
           </button>
         </Button>
       </Button>
@@ -229,32 +233,36 @@ exports[`Tooltip tooltip with a close button should render correctly 1`] = `
                         type="button"
                       >
                         <span>
-                          <Icon
-                            shape="cross"
-                            size="xs"
+                          <ChildrenWithIcon
+                            iconShape="cross"
                           >
-                            <span>
-                              <Icon
-                                role="presentation"
-                                shape="cross"
-                                size="xs"
-                              >
-                                <svg
-                                  className="svg svg--cross svg-icon valign--middle"
-                                  height="20"
-                                  preserveAspectRatio="xMinYMin meet"
+                            <Icon
+                              shape="cross"
+                              size="xs"
+                            >
+                              <span>
+                                <Icon
                                   role="presentation"
-                                  style={Object {}}
-                                  viewBox="0 0 20 20"
-                                  width="20"
+                                  shape="cross"
+                                  size="xs"
                                 >
-                                  <use
-                                    xlinkHref="#icon-cross--small"
-                                  />
-                                </svg>
-                              </Icon>
-                            </span>
-                          </Icon>
+                                  <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>
+                          </ChildrenWithIcon>
                         </span>
                       </button>
                     </Button>
diff --git a/src/navigation/Nav.jsx b/src/navigation/Nav.jsx
index f9072af81..961d20f5b 100644
--- a/src/navigation/Nav.jsx
+++ b/src/navigation/Nav.jsx
@@ -285,7 +285,7 @@ export class Nav extends React.Component {
 		const getConnectionsIcon = () => (
 			<img
 				className="proIcon"
-				alt={connections && connections.label}
+				alt={connections ? connections.label : 'Connections icon'}
 				src={CONNECTIONS_ICON}
 			/>
 		);

From 11373c9d91e99cfcf46e2d00225a905cad0b26a4 Mon Sep 17 00:00:00 2001
From: meetup-oleksandr-dudiuk <odudiuk@meetup.com>
Date: Mon, 29 Jan 2024 14:57:31 +0200
Subject: [PATCH 6/7] refactor

---
 src/forms/Button.jsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/forms/Button.jsx b/src/forms/Button.jsx
index df20b1dea..798391e1e 100644
--- a/src/forms/Button.jsx
+++ b/src/forms/Button.jsx
@@ -10,7 +10,7 @@ import {
 	getIconPosition,
 } from '@meetup/swarm-components/lib/utils/buttonUtils';
 
-const ChildrenWithIcon = ({ children, right, iconShape, iconProps, iconOnly }) => {
+const ChildrenWithIcon = ({ children, right, iconShape, iconProps }) => {
 	if (iconShape) {
 		return right ? (
 			<React.Fragment>
@@ -45,7 +45,6 @@ export class Button extends React.PureComponent {
 			hasHoverShadow, // eslint-disable-line no-unused-vars
 			to,
 			children,
-			iconOnly,
 			forwardedRef,
 			right,
 			iconProps,
@@ -93,7 +92,6 @@ export class Button extends React.PureComponent {
 							iconShape={iconShape}
 							right={right}
 							iconProps={iconProps}
-							iconOnly={iconOnly}
 						/>
 					</span>
 				</Component>
@@ -121,7 +119,6 @@ export class Button extends React.PureComponent {
 						iconShape={iconShape}
 						right={right}
 						iconProps={iconProps}
-						iconOnly={iconOnly}
 					/>
 				</span>
 			</button>

From 2ca74a60e2de8ed6ea5569fb526b49a98c57e9e9 Mon Sep 17 00:00:00 2001
From: meetup-oleksandr-dudiuk <odudiuk@meetup.com>
Date: Mon, 29 Jan 2024 15:02:51 +0200
Subject: [PATCH 7/7] refactor

---
 src/forms/Button.jsx                          | 28 +++---
 src/forms/__snapshots__/button.test.jsx.snap  |  4 +-
 src/forms/button.story.jsx                    |  6 +-
 .../__snapshots__/tooltip.test.jsx.snap       | 90 +++++++++----------
 4 files changed, 56 insertions(+), 72 deletions(-)

diff --git a/src/forms/Button.jsx b/src/forms/Button.jsx
index 798391e1e..028deb98c 100644
--- a/src/forms/Button.jsx
+++ b/src/forms/Button.jsx
@@ -86,14 +86,12 @@ export class Button extends React.PureComponent {
 					to={to}
 					{...linkProps}
 				>
-					<span>
-						<ChildrenWithIcon
-							children={children}
-							iconShape={iconShape}
-							right={right}
-							iconProps={iconProps}
-						/>
-					</span>
+					<ChildrenWithIcon
+						children={children}
+						iconShape={iconShape}
+						right={right}
+						iconProps={iconProps}
+					/>
 				</Component>
 			);
 		} else if (component === 'a') {
@@ -113,14 +111,12 @@ export class Button extends React.PureComponent {
 				ref={forwardedRef}
 				{...other}
 			>
-				<span>
-					<ChildrenWithIcon
-						children={children}
-						iconShape={iconShape}
-						right={right}
-						iconProps={iconProps}
-					/>
-				</span>
+				<ChildrenWithIcon
+					children={children}
+					iconShape={iconShape}
+					right={right}
+					iconProps={iconProps}
+				/>
 			</button>
 		);
 	}
diff --git a/src/forms/__snapshots__/button.test.jsx.snap b/src/forms/__snapshots__/button.test.jsx.snap
index 35b74dd9f..c505a6327 100644
--- a/src/forms/__snapshots__/button.test.jsx.snap
+++ b/src/forms/__snapshots__/button.test.jsx.snap
@@ -8,8 +8,6 @@ exports[`Button is a HTML button element exists 1`] = `
   data-swarm-width="default"
   type="button"
 >
-  <span>
-    <ChildrenWithIcon />
-  </span>
+  <ChildrenWithIcon />
 </button>
 `;
diff --git a/src/forms/button.story.jsx b/src/forms/button.story.jsx
index 4b7874089..4c5802cf3 100644
--- a/src/forms/button.story.jsx
+++ b/src/forms/button.story.jsx
@@ -192,10 +192,6 @@ storiesOf('Forms/Button', module)
 		</Button>
 	))
 	.add('Icon Only', () => (
-		<Button
-			onClick={action('clicked')}
-			icon={<Icon shape="search" size="xxs" />}
-			iconOnly
-		/>
+		<Button onClick={action('clicked')} icon={<Icon shape="search" size="xxs" />} />
 	))
 	.add('No Label', () => <Button />);
diff --git a/src/interactive/__snapshots__/tooltip.test.jsx.snap b/src/interactive/__snapshots__/tooltip.test.jsx.snap
index 5325f69a9..a0d0e2179 100644
--- a/src/interactive/__snapshots__/tooltip.test.jsx.snap
+++ b/src/interactive/__snapshots__/tooltip.test.jsx.snap
@@ -86,11 +86,9 @@ exports[`Tooltip tooltip with a close button should render correctly 1`] = `
             small={true}
             type="button"
           >
-            <span>
-              <ChildrenWithIcon>
-                Open
-              </ChildrenWithIcon>
-            </span>
+            <ChildrenWithIcon>
+              Open
+            </ChildrenWithIcon>
           </button>
         </Button>
       </Button>
@@ -141,20 +139,18 @@ exports[`Tooltip tooltip with a close button should render correctly 1`] = `
                         type="button"
                       >
                         <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>
+                          <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>
                       </button>
                       <section
@@ -232,38 +228,36 @@ exports[`Tooltip tooltip with a close button should render correctly 1`] = `
                         role="button"
                         type="button"
                       >
-                        <span>
-                          <ChildrenWithIcon
-                            iconShape="cross"
+                        <ChildrenWithIcon
+                          iconShape="cross"
+                        >
+                          <Icon
+                            shape="cross"
+                            size="xs"
                           >
-                            <Icon
-                              shape="cross"
-                              size="xs"
-                            >
-                              <span>
-                                <Icon
+                            <span>
+                              <Icon
+                                role="presentation"
+                                shape="cross"
+                                size="xs"
+                              >
+                                <svg
+                                  className="svg svg--cross svg-icon valign--middle"
+                                  height="20"
+                                  preserveAspectRatio="xMinYMin meet"
                                   role="presentation"
-                                  shape="cross"
-                                  size="xs"
+                                  style={Object {}}
+                                  viewBox="0 0 20 20"
+                                  width="20"
                                 >
-                                  <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>
-                          </ChildrenWithIcon>
-                        </span>
+                                  <use
+                                    xlinkHref="#icon-cross--small"
+                                  />
+                                </svg>
+                              </Icon>
+                            </span>
+                          </Icon>
+                        </ChildrenWithIcon>
                       </button>
                     </Button>
                   </Button>