feat(IconButton): aria-describedby override

Codecademy · Jun 26, 2024 · 1ac6a16 · 1ac6a16
1 parent 309b0a3
commit 1ac6a16
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 4 deletions.
diff --git a/packages/gamut/src/Button/IconButton.tsx b/packages/gamut/src/Button/IconButton.tsx
@@ -20,7 +20,10 @@ export type IconButtonProps = ComponentProps<typeof IconButtonBase> &
   IconComponentType & {
     'aria-label'?: string;
     tip: string;
-    tipProps?: Omit<ToolTipProps, 'info' | 'id' | 'children' | 'hasLabel'>;
+    tipProps?: Omit<
+      ToolTipProps,
+      'info' | 'id' | 'children' | 'hasRepetitiveLabel'
+    >;
   };
 
 export const IconButton = forwardRef<ButtonBaseElements, IconButtonProps>(

diff --git a/packages/gamut/src/Tip/ToolTip/index.tsx b/packages/gamut/src/Tip/ToolTip/index.tsx
@@ -21,6 +21,10 @@ export type ToolTipProps = TipBaseProps &
      * If your button has a label that is repeated in the first word of the tooltip, you can set this to `true` to avoid repetition. If your info tip is not a string, you cannot do this.
      */
     hasRepetitiveLabel?: boolean;
+    /**
+     * If you would like to forgo the aria-describedby attribute set this to `false`. When using this props, the `aria-label` should always be identical to the `tip`.
+     */
+    hideAriaToolTip?: boolean;
   };
 
 export const ToolTip: React.FC<ToolTipProps> = ({
@@ -30,6 +34,7 @@ export const ToolTip: React.FC<ToolTipProps> = ({
   placement = tipDefaultProps.placement,
   id,
   hasRepetitiveLabel,
+  hideAriaToolTip,
   ...rest
 }) => {
   const wrapperRef = useRef<HTMLDivElement>(null);
@@ -41,15 +46,16 @@ export const ToolTip: React.FC<ToolTipProps> = ({
 
   const isFloating = placement === 'floating';
   const Tip = loaded && isFloating ? FloatingTip : InlineTip;
+
   const adjustedInfo = useMemo(() => {
     return hasRepetitiveLabel && typeof info === 'string'
       ? info.split(' ').slice(1).join(' ')
       : info;
   }, [info, hasRepetitiveLabel]);
 
-  // this should only happen if the button has an aria-label that is the same is and ONLY the content of the tooltip
+  const shouldRenderAriaTip = hideAriaToolTip ? false : adjustedInfo !== '';
 
-  const shouldRenderAriaTip = adjustedInfo !== '';
+  // this should only happen if the button has an aria-label that is the same is and ONLY the content of the tooltip
 
   const tipProps = {
     alignment,

diff --git a/packages/styleguide/stories/Atoms/Button/index.stories.mdx b/packages/styleguide/stories/Atoms/Button/index.stories.mdx
@@ -132,7 +132,7 @@ Writing words for a link or button? Above all else, make sure that the words alo
 
 ## Icon Button
 
-You must pass a string for the `tip` prop to label your icon button. The `tipProps` prop is optional and can be used to customize the tooltip.
+You must pass a string for the `tip` prop to label your icon button. The `tipProps` prop is optional and can be used to customize the tooltip - for more information on `tooltip`s + `IconButton`s see the [ToolTip](../Tooltip/index.stories.mdx) component.
 
 <Canvas>
   <Story name="IconButton">