Merge pull request #691 from gympass/feat/web-button-acessibility

feat: add aria label and aria disabled
gympass · Oct 2, 2023 · 9591ea3 · 9591ea3
2 parents 1f3e807 + cbbda49
commit 9591ea3
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 6 deletions.
diff --git a/packages/yoga/src/Button/web/Button.jsx b/packages/yoga/src/Button/web/Button.jsx
@@ -6,6 +6,7 @@ import StyledButton from './StyledButton';
 const Button = forwardRef(
   (
     {
+      ariaLabel,
       children,
       onClick,
       full,
@@ -30,6 +31,8 @@ const Button = forwardRef(
       <StyledButton
         ref={ref}
         disabled={disabled}
+        aria-disabled={disabled}
+        aria-label={ariaLabel}
         full={full}
         inverted={inverted}
         onClick={onClick}
@@ -45,6 +48,7 @@ const Button = forwardRef(
 );
 
 Button.propTypes = {
+  ariaLabel: string,
   children: node,
   disabled: bool,
   full: bool,
@@ -58,8 +62,9 @@ Button.propTypes = {
 };
 
 Button.defaultProps = {
+  ariaLabel: undefined,
   children: 'Button',
-  disabled: false,
+  disabled: undefined,
   full: false,
   inverted: false,
   onClick: () => {},

diff --git a/packages/yoga/src/Button/web/Icon.jsx b/packages/yoga/src/Button/web/Icon.jsx
@@ -1,5 +1,5 @@
 import React, { forwardRef } from 'react';
-import { oneOfType, func, node, bool } from 'prop-types';
+import { oneOfType, func, node, bool, string } from 'prop-types';
 import styled, { withTheme } from 'styled-components';
 
 import StyledButton from './StyledButton';
@@ -38,12 +38,21 @@ const ButtonIcon = forwardRef(
         },
       },
       small,
+      disabled,
+      ariaLabel,
       ...props
     },
     ref,
   ) => {
     return (
-      <IconStyled {...props} ref={ref} small={small}>
+      <IconStyled
+        {...props}
+        ref={ref}
+        small={small}
+        disabled={disabled}
+        aria-disabled={disabled}
+        aria-label={ariaLabel}
+      >
         <Icon
           as={icon}
           size={small ? button.icon.size.small : button.icon.size.default}
@@ -59,14 +68,16 @@ ButtonIcon.propTypes = {
   secondary: bool,
   inverted: bool,
   icon: oneOfType([node, func]),
+  ariaLabel: string,
 };
 
 ButtonIcon.defaultProps = {
   small: false,
-  disabled: false,
+  disabled: undefined,
   secondary: false,
   inverted: false,
   icon: undefined,
+  ariaLabel: undefined,
 };
 
 ButtonIcon.displayName = 'Button.Icon';

diff --git a/packages/yoga/src/Button/web/Link.jsx b/packages/yoga/src/Button/web/Link.jsx
@@ -68,7 +68,9 @@ const Link = styled(Button)`
   }}
 `;
 
-const ButtonLink = props => <Link {...props} />;
+const ButtonLink = ({ disabled, ...props }) => (
+  <Link {...props} disabled={disabled} aria-disabled={disabled} />
+);
 
 ButtonLink.propTypes = {
   disabled: bool,
@@ -79,7 +81,7 @@ ButtonLink.propTypes = {
 };
 
 ButtonLink.defaultProps = {
-  disabled: false,
+  disabled: undefined,
   secondary: false,
   href: undefined,
   icon: undefined,

diff --git a/packages/yoga/src/Button/web/__snapshots__/Button.test.jsx.snap b/packages/yoga/src/Button/web/__snapshots__/Button.test.jsx.snap
@@ -505,6 +505,7 @@ exports[`<Button /> Snapshots disabled buttons With disabled prop should match s
 
 <div>
   <button
+    aria-disabled="true"
     class="c0"
     disabled=""
   >
@@ -586,6 +587,7 @@ exports[`<Button /> Snapshots disabled buttons With disabled prop should match s
 
 <div>
   <button
+    aria-disabled="true"
     class="c0"
     disabled=""
   >
@@ -683,6 +685,7 @@ exports[`<Button /> Snapshots disabled buttons With disabled prop should match s
 
 <div>
   <button
+    aria-disabled="true"
     class="c0"
     disabled=""
   >
@@ -817,6 +820,7 @@ exports[`<Button /> Snapshots disabled buttons With disabled prop should match s
 
 <div>
   <button
+    aria-disabled="true"
     class="c0 c1"
     disabled=""
   >
@@ -941,6 +945,7 @@ exports[`<Button /> Snapshots disabled buttons With disabled prop should match s
 
 <div>
   <button
+    aria-disabled="true"
     class="c0 c1"
     disabled=""
   >
@@ -1065,6 +1070,7 @@ exports[`<Button /> Snapshots disabled buttons With disabled prop should match s
 
 <div>
   <button
+    aria-disabled="true"
     class="c0 c1"
     disabled=""
   >
@@ -1192,6 +1198,7 @@ exports[`<Button /> Snapshots disabled buttons With disabled prop should match s
 
 <div>
   <button
+    aria-disabled="true"
     class="c0 c1"
     disabled=""
   >
@@ -1318,6 +1325,7 @@ exports[`<Button /> Snapshots disabled buttons With disabled prop should match s
 
 <div>
   <button
+    aria-disabled="true"
     class="c0 c1"
     disabled=""
   >
@@ -1400,6 +1408,7 @@ exports[`<Button /> Snapshots primary buttons With disabled prop should match sn
 
 <div>
   <button
+    aria-disabled="true"
     class="c0"
     disabled=""
   >
@@ -1481,6 +1490,7 @@ exports[`<Button /> Snapshots primary buttons With disabled prop should match sn
 
 <div>
   <button
+    aria-disabled="true"
     class="c0"
     disabled=""
   >
@@ -1578,6 +1588,7 @@ exports[`<Button /> Snapshots primary buttons With disabled prop should match sn
 
 <div>
   <button
+    aria-disabled="true"
     class="c0"
     disabled=""
   >
@@ -1712,6 +1723,7 @@ exports[`<Button /> Snapshots primary buttons With disabled prop should match sn
 
 <div>
   <button
+    aria-disabled="true"
     class="c0 c1"
     disabled=""
   >
@@ -1836,6 +1848,7 @@ exports[`<Button /> Snapshots primary buttons With disabled prop should match sn
 
 <div>
   <button
+    aria-disabled="true"
     class="c0 c1"
     disabled=""
   >
@@ -1960,6 +1973,7 @@ exports[`<Button /> Snapshots primary buttons With disabled prop should match sn
 
 <div>
   <button
+    aria-disabled="true"
     class="c0 c1"
     disabled=""
   >
@@ -2087,6 +2101,7 @@ exports[`<Button /> Snapshots primary buttons With disabled prop should match sn
 
 <div>
   <button
+    aria-disabled="true"
     class="c0 c1"
     disabled=""
   >
@@ -2213,6 +2228,7 @@ exports[`<Button /> Snapshots primary buttons With disabled prop should match sn
 
 <div>
   <button
+    aria-disabled="true"
     class="c0 c1"
     disabled=""
   >