Merge pull request #873 from gympass/ACS-100

🚀 Feat: ad aria label to right button
gympass · Feb 6, 2025 · 98a43ad · 98a43ad
2 parents d3904da + 2d61b86
commit 98a43ad
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 3 deletions.
diff --git a/packages/yoga/src/Button/web/Button.jsx b/packages/yoga/src/Button/web/Button.jsx
@@ -26,6 +26,7 @@ const Button = forwardRef(
       secondary = false,
       icon: Icon,
       isLoading = false,
+      'aria-label': ariaLabel,
       ...props
     },
     ref,
@@ -49,6 +50,7 @@ const Button = forwardRef(
         small={small}
         secondary={secondary}
         isLoading={isLoading}
+        aria-label={ariaLabel}
         {...finalProps}
       >
         {Icon && <Icon role="img" />}
@@ -65,7 +67,6 @@ const Button = forwardRef(
 );
 
 Button.propTypes = {
-  ariaLabel: string,
   children: node,
   disabled: bool,
   full: bool,
@@ -77,6 +78,7 @@ Button.propTypes = {
   /** an Icon from yoga-icons package */
   icon: oneOfType([node, func]),
   href: string,
+  'aria-label': string,
 };
 
 Button.displayName = 'Button';

diff --git a/packages/yoga/src/Heading/web/Heading.test.jsx b/packages/yoga/src/Heading/web/Heading.test.jsx
@@ -75,6 +75,24 @@ describe('<Heading />', () => {
     expect(container).toMatchSnapshot();
   });
 
+  it('should have aria-label', () => {
+    const { getByLabelText } = render(
+      <ThemeProvider>
+        <Heading noPadding>
+          <Title>Gympass</Title>
+          <BackButton onClick={onClick} />
+          <RightButton
+            icon={Upload2}
+            onClick={onClick}
+            aria-label="labelAriaText"
+          />
+        </Heading>
+      </ThemeProvider>,
+    );
+
+    expect(getByLabelText('labelAriaText')).toBeTruthy();
+  });
+
   it('should override the background color', () => {
     const { container } = render(
       <ThemeProvider>

diff --git a/packages/yoga/src/Heading/web/RightButton.jsx b/packages/yoga/src/Heading/web/RightButton.jsx
@@ -58,8 +58,14 @@ const ButtonIcon = styled(Button)`
   }};
 `;
 
-const RightButton = ({ onClick, icon, ...props }) => (
-  <ButtonIcon onClick={onClick} secondary padding="xxxsmall" {...props}>
+const RightButton = ({ onClick, icon, 'aria-label': ariaLabel, ...props }) => (
+  <ButtonIcon
+    onClick={onClick}
+    secondary
+    padding="xxxsmall"
+    aria-label={ariaLabel}
+    {...props}
+  >
     <Box
       flex={1}
       display="flex"
@@ -77,6 +83,7 @@ const RightButton = ({ onClick, icon, ...props }) => (
 RightButton.propTypes = {
   onClick: PropTypes.func.isRequired,
   icon: PropTypes.elementType.isRequired,
+  'aria-label': PropTypes.string,
 };
 
 RightButton.displayName = 'Heading.RightButton';