fix(BBButton): ensure acessibility and stacked layout displacement

Ensures that the button has accessibility tags by indicating the label
tag in stacked layout via `aria-labelledBy` attribute.
Additionaly, corrects a malformed css style that caused the stacked
layout button to render its icons out of place when `helperOnClick` prop
is specified.

Author: Arthurk12

src/components/Button/component.tsx

@@ -71,8 +71,10 @@ function Button(props: ButtonProps): JSX.Element {
     'aria-labelledby'?: string;
     'aria-describedby'?: string;
   } = {};
-  if (ariaLabel) accessibilityProps['aria-label'] = ariaLabel;
-  if (ariaLabelledBy) accessibilityProps['aria-labelledby'] = ariaLabelledBy;
+  const generatedId = useId();
+  const defaultLabelId = `${id || generatedId}-label`;
+  accessibilityProps['aria-label'] = ariaLabel || label;
+  accessibilityProps['aria-labelledby'] = ariaLabelledBy || defaultLabelId;
   if (ariaDescribedBy) accessibilityProps['aria-describedby'] = ariaDescribedBy;
 
   const buttonElement = (() => {
@@ -121,11 +123,12 @@ function Button(props: ButtonProps): JSX.Element {
             disabled={disabled}
           >
             {!hideHelperIcon && (
-              <Styled.helperIconContainer
+              <Styled.HelperIconContainer
                 // Add this property only when there is a onClick function for the auxiliary icon.
                 // It controls whether the auxiliary button is going to have an independent hover state.
                 {...(helperOnClick && { 'data-is-aux-icon': true })}
-                role="button"
+                {...(helperOnClick && { 'aria-label': accessibilityProps['aria-label'] + ' helper' })}
+                {...(helperOnClick && { role: "button" })}
                 $hover={helperOnClick !== null}
                 $color={color}
                 $variant={variant}
@@ -137,12 +140,12 @@ function Button(props: ButtonProps): JSX.Element {
                   }
                 }}
               >
-                <Styled.helperIcon>{helperIcon}</Styled.helperIcon>
-              </Styled.helperIconContainer>
+                <Styled.HelperIcon>{helperIcon}</Styled.HelperIcon>
+              </Styled.HelperIconContainer>
             )}
             {icon && <Styled.IconWrapper>{icon}</Styled.IconWrapper>}
           </Styled.Button>
-          <Styled.ButtonText>{label}</Styled.ButtonText>
+          <Styled.ButtonText id={defaultLabelId}>{label}</Styled.ButtonText>
         </Styled.ButtonWrapper>
       );
     }
@@ -164,7 +167,7 @@ function Button(props: ButtonProps): JSX.Element {
         disabled={disabled}
       >
         {iconStart && iconStart}
-        {label && <span>{label}</span>}
+        {label && <span id={defaultLabelId}>{label}</span>}
         {children}
         {iconEnd && iconEnd}
       </Styled.Button>

src/components/Button/styles.ts

@@ -163,16 +163,22 @@ export const Button = styled.button<StyledButtonProps>`
   }}
 `;
 
-export const helperIconContainer = styled.div<StyledHelperIconContainer>`
-  ${({ $hover, $variant, $color }) => $hover && `
-    &&:hover,
-    &&:active,
-      background-color: ${CSS_COLOR_PROPERTIES[$variant][$color].hoverBackground};
-    }
-    &&:focus {
-      outline: 1px solid ${CSS_COLOR_PROPERTIES[$variant][$color].outline};
-    }
-  `}
+export const HelperIconContainer = styled.div<StyledHelperIconContainer>`
+  ${({ $hover, $variant, $color }) => {
+    if (!$hover) return null;
+
+    return css`
+      &&:hover,
+      &&:active {
+        ${CSS_COLOR_PROPERTIES[$variant][$color].hoverBackground &&
+        `background-color: ${CSS_COLOR_PROPERTIES[$variant][$color].hoverBackground};`}
+      }
+
+      &&:focus {
+        outline: 1px solid ${CSS_COLOR_PROPERTIES[$variant][$color].outline};
+      }
+    `;
+  }}
   border-radius: 50%;
   padding: 0.2rem;
   position: absolute;
@@ -183,7 +189,7 @@ export const helperIconContainer = styled.div<StyledHelperIconContainer>`
   }
 `;
 
-export const helperIcon = styled.div`
+export const HelperIcon = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;