Search code examples
typescriptwai-ariachakra-ui

Chakra ui typescript enforces aria-label for icon-button - how to turn off

So I have a Chakra UI icon button

<IconButton
   aria-label="Left Arrow"

And I want to remove the aria-label - why would I want to do that? Because the IconButton is inside an aria-hidden section of the tree, and as such the label is superfluous.

But if I remove it I get the following typescript complaints

 ../../node_modules/@chakra-ui/button/dist/icon-button.d.ts:23:5
web:tsc:     23     "aria-label": string;
web:tsc:            ~~~~~~~~~~~~
web:tsc:     '"aria-label"' is declared here.

How can I make a chakra icon button without giving it an unnecessary aria-label.

Solution

  • Let's have a look at the source code for the <IconButton />?

    "use client"

import { forwardRef } from "react"
import { Button, ButtonProps } from "./button"

export interface IconButtonProps extends ButtonProps {
  /**
   * A11y: A label that describes the button
   */
  "aria-label": string
}

/**
 * Icon button renders an icon within a button.
 *
 * @see Docs https://chakra-ui.com/docs/components/icon-button
 */
export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
  function IconButton(props, ref) {
    return <Button padding="0" ref={ref} {...props} />
  },
)

IconButton.displayName = "IconButton"

    Essentially, IconButton is just a Button with one mandatory extra prop aria-label and enforced padding=0. As you can see it does not have it's own variants, or styles, or anything. So, if you don't like aria-label you can simply use Button with padding=0.