fix(fuselage): Remove unnecessary aria-label fallback in `IconButto…

…n` (#1150)
RocketChat · Aug 29, 2023 · 48694fa · 48694fa
1 parent bad6a08
commit 48694fa
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 30 deletions.
diff --git a/packages/fuselage/src/components/Avatar/Avatar.tsx b/packages/fuselage/src/components/Avatar/Avatar.tsx
@@ -15,6 +15,7 @@ export const Avatar = ({
   rounded = false,
   objectFit = false,
   url,
+  className,
   ...props
 }: AvatarProps) => {
   const innerClass = [
@@ -27,7 +28,7 @@ export const Avatar = ({
     .join(' ');
 
   return (
-    <AvatarContainer size={size}>
+    <AvatarContainer size={size} className={className}>
       <img src={`${url}`} className={`${innerClass}`} {...props} />
     </AvatarContainer>
   );

diff --git a/packages/fuselage/src/components/Button/IconButton.stories.tsx b/packages/fuselage/src/components/Button/IconButton.stories.tsx
@@ -45,16 +45,17 @@ export default {
 } as ComponentMeta<typeof ButtonGroup>;
 
 export const _IconButton: ComponentStory<typeof IconButton> = () => (
-  <IconButton icon='balloon' />
+  <IconButton icon='balloon' aria-label='balloon' />
 );
 
 export const States = () => (
   <>
     <PropsVariationSection
       component={IconButton}
       common={{
-        icon: 'doner',
-        medium: true,
+        'icon': 'doner',
+        'medium': true,
+        'aria-label': 'balloon',
       }}
       xAxis={{
         default: {},
@@ -114,8 +115,9 @@ export const Variants = () => (
     <PropsVariationSection
       component={IconButton}
       common={{
-        icon: 'doner',
-        medium: true,
+        'icon': 'doner',
+        'medium': true,
+        'aria-label': 'balloon',
       }}
       xAxis={{
         default: {},
@@ -164,49 +166,49 @@ export const Variants = () => (
 
 export const Sizes = () => (
   <ButtonGroup>
-    <IconButton icon='balloon' secondary />
-    <IconButton icon='balloon' secondary medium />
-    <IconButton icon='balloon' secondary small />
-    <IconButton icon='balloon' secondary tiny />
-    <IconButton icon='balloon' secondary mini />
+    <IconButton icon='balloon' aria-label='balloon' secondary />
+    <IconButton icon='balloon' aria-label='balloon' secondary medium />
+    <IconButton icon='balloon' aria-label='balloon' secondary small />
+    <IconButton icon='balloon' aria-label='balloon' secondary tiny />
+    <IconButton icon='balloon' aria-label='balloon' secondary mini />
   </ButtonGroup>
 );
 export const _IconButtonDisabled: ComponentStory<typeof IconButton> = () => (
-  <IconButton icon='balloon' disabled />
+  <IconButton icon='balloon' aria-label='balloon' disabled />
 );
 
 export const _IconButtonWithEmoji: ComponentStory<typeof IconButton> = () => (
-  <IconButton icon={EmojiElement} />
+  <IconButton icon={EmojiElement} aria-label='emoji' />
 );
 
 export const _IconButtonInfo: ComponentStory<typeof IconButton> = () => (
-  <IconButton icon='balloon' info />
+  <IconButton icon='balloon' aria-label='balloon' info />
 );
 
 export const _IconButtonSecondaryInfo: ComponentStory<
   typeof IconButton
-> = () => <IconButton icon='balloon' secondary info />;
+> = () => <IconButton icon='balloon' aria-label='balloon' secondary info />;
 
 export const _IconButtonSuccess: ComponentStory<typeof IconButton> = () => (
-  <IconButton icon='balloon' success />
+  <IconButton icon='balloon' aria-label='balloon' success />
 );
 
 export const _IconButtonSecondarySuccess: ComponentStory<
   typeof IconButton
-> = () => <IconButton icon='balloon' secondary success />;
+> = () => <IconButton icon='balloon' aria-label='balloon' secondary success />;
 
 export const _IconButtonWarning: ComponentStory<typeof IconButton> = () => (
-  <IconButton icon='balloon' warning />
+  <IconButton icon='balloon' aria-label='balloon' warning />
 );
 
 export const _IconButtonSecondaryWarning: ComponentStory<
   typeof IconButton
-> = () => <IconButton icon='balloon' secondary warning />;
+> = () => <IconButton icon='balloon' aria-label='balloon' secondary warning />;
 
 export const _IconButtonDanger: ComponentStory<typeof IconButton> = () => (
-  <IconButton icon='balloon' danger />
+  <IconButton icon='balloon' aria-label='balloon' danger />
 );
 
 export const _IconButtonSecondaryDanger: ComponentStory<
   typeof IconButton
-> = () => <IconButton icon='balloon' secondary danger />;
+> = () => <IconButton icon='balloon' aria-label='balloon' secondary danger />;
diff --git a/packages/fuselage/src/components/Button/IconButton.tsx b/packages/fuselage/src/components/Button/IconButton.tsx
@@ -121,7 +121,6 @@ export const IconButton = forwardRef(
         {...getSizeClass()}
         rcx-button--icon-pressed={pressed}
         ref={ref}
-        aria-label={props['aria-label'] || icon}
         {...props}
       >
         {children}

diff --git a/packages/fuselage/src/components/Modal/__snapshots__/Modal.spec.tsx.snap b/packages/fuselage/src/components/Modal/__snapshots__/Modal.spec.tsx.snap
@@ -26,7 +26,6 @@ exports[`[Modal Component] renders _WithAnnotation without crashing 1`] = `
               </h2>
             </div>
             <button
-              aria-label="cross"
               class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button  rcx-css-trljwa rcx-css-lma364"
               type="button"
             >
@@ -114,7 +113,6 @@ exports[`[Modal Component] renders _WithForm without crashing 1`] = `
               </h2>
             </div>
             <button
-              aria-label="cross"
               class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button  rcx-css-trljwa rcx-css-lma364"
               type="button"
             >
@@ -220,7 +218,6 @@ exports[`[Modal Component] renders _WithHeroImage without crashing 1`] = `
               </h2>
             </div>
             <button
-              aria-label="cross"
               class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button  rcx-css-trljwa rcx-css-lma364"
               type="button"
             >
@@ -321,7 +318,6 @@ exports[`[Modal Component] renders _WithIcon without crashing 1`] = `
               </h2>
             </div>
             <button
-              aria-label="cross"
               class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button  rcx-css-trljwa rcx-css-lma364"
               type="button"
             >
@@ -419,7 +415,6 @@ exports[`[Modal Component] renders _WithIconAndTagline without crashing 1`] = `
               </h2>
             </div>
             <button
-              aria-label="cross"
               class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button  rcx-css-trljwa rcx-css-lma364"
               type="button"
             >
@@ -507,7 +502,6 @@ exports[`[Modal Component] renders _WithTagline without crashing 1`] = `
               </h2>
             </div>
             <button
-              aria-label="cross"
               class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button  rcx-css-trljwa rcx-css-lma364"
               type="button"
             >
@@ -602,7 +596,6 @@ exports[`[Modal Component] renders _WithThumb without crashing 1`] = `
               </h2>
             </div>
             <button
-              aria-label="cross"
               class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button  rcx-css-trljwa rcx-css-lma364"
               type="button"
             >
@@ -685,7 +678,6 @@ exports[`[Modal Component] renders Default without crashing 1`] = `
               </h2>
             </div>
             <button
-              aria-label="cross"
               class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button  rcx-css-trljwa rcx-css-lma364"
               type="button"
             >