Disabling aria-label enforcement for icon-buttons in Chakra UI Typescript

Having a Chakra UI icon button, I am facing an issue with the aria-label attribute. The IconButton is within an aria-hidden section in the tree; therefore, the label becomes redundant.

If I try to remove the aria-label, TypeScript throws complaints as shown below:

 ../../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.

Is there a way to create a chakra icon button without including an unnecessary aria-label?

typescriptwai-ariachakra-ui

Answer №1

Check out the source code for the <IconButton /> component.

"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 displays 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"

In essence, the IconButton is essentially just a version of the Button with an additional required prop aria-label and enforced padding=0. It does not have its own unique variants or styles. Therefore, if you prefer not to use the aria-label, you can stick with the Button with padding=0 instead.

Answer №2

To change the type declaration of the aria-label attribute for the IconButton component, leverage TypeScript's utility types.

import { IconButton } from "@chakra-ui/react";

// Create a type that represents the props of IconButton excluding aria-label
type IconButtonWithoutAriaLabelProps = Omit<React.ComponentProps<typeof IconButton>, "aria-label">;

// Generate a new component derived from IconButton but without aria-label
const IconButtonWithoutAriaLabel: React.FC<IconButtonWithoutAriaLabelProps> = (props) => {
  // Display IconButton without including aria-label prop
  return <IconButton {...props} />;
};

export default IconButtonWithoutAriaLabel;

Answer №3

When it comes to making a website accessible, the aria-label property is crucial for developers to implement. According to the official ChakraUI documentation, including the aria-label is a requirement and must be included.

Check out the full documentation here:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Resetting the state back to its initial value - which one to use: useState or useReduce?

In order to enhance the functionality of a third-party Authentication service Auth0's useAuth0 hook, I have developed a custom hook called useAuth. This custom hook is responsible for managing local variables that store essential user information like ...

javascriptreactjstypescriptreact-hooks

What is the best way to ensure that a class instance only receives the necessary properties?

In my code, I have a function that takes in an object called DataObject and uses certain properties from it to create instances of a class. To determine which data object items should be assigned to which class properties, I use mappings in the form of a ...

typescriptgenerics

Issue with TypeScript not recognizing node_modules symlink in Docker container

I'm currently working on containerizing an Express app in TypeScript. However, I am facing issues linking node_modules that have been installed outside the container. Even though a volume is mounted for development, I keep encountering errors in my ed ...

node.jstypescriptdockerexpress

Ways to access a property within an object using TypeScript

Can you help me extract the "attributes" array from this object and store it in a new variable? obj = { "_id": "5bf7e1be80c05307d06423c2", "agentId": "awais", "attributes": [ // that array. { "created ...

angulartypescript

Tips on utilizing storage.set() within google.maps.events.addListener(marker, 'dragend', function() { }); in Ionic 3

google.maps.event.addListener(Marker, 'click', (function(Marker) { return function() { this.storage.set('mylocation', this.Marker.getPosition()); } })(Marker)); polyfills.js:3 Uncaught TypeError: Cannot read property 'set ...

typescripteventsionic-frameworkmapsstorage

What TypeScript syntax is similar to Java's "? extends MyClass" when using generics?

How can we indicate the TypeScript equivalent of Java's ? extends MyClass? One possible way to achieve this is: function myFunc <TComponent extends MyBaseClass>(param: ComponentFixture<TComponent>) {} Is there a more concise alternative ...

javatypescriptgenericscovariance

Set the timezone of a Javascript Date to be zero

Is there a way to create a Javascript date without any specific timezone? When I try to do so in Javascript, it automatically sets it to GMT Pacific standard time. let newDate = new Date(new Date().getFullYear(), 0, 2, 0, 0, 0, 0) }, newDate: Sat Feb 01 2 ...

javascripttypescript

How to use sinon to create a mock for an independently imported function

Is there a way to successfully mock the axios import using sinon and then set expectations? Here is my attempted code: import axios from 'axios'; axiosMock = sinon.mock(axios); However, the expectation does not pass: describe('Custom test ...

typescriptmockingsinon

What is the importance of having a reference path for compiling an AngularJS 2 project using gulp-typescript?

I wanted to modify the Angular Tour Of Heros project to utilize gulp from this Github Repository. This is the gulpfile.json file I came up with: const gulp = require('gulp'); const del = require('del'); const typescript = require(&apo ...

angulartypescriptgulp

Problem arises with connecting data in the relationship between a parent and child

Hi there, I am new to Angular 6 and currently encountering an issue with data binding. I have set up a test project with a parent-child relationship for data binding in the heading, but unfortunately, it's not working as expected. Can anyone lend me a ...

angulartypescript

Are you searching for ways to convert an object into an array?

I have a dynamically built object and I need to extract specific fields (the dynamic ones) from it and convert them into an array. In the following code snippet, my goal is to convert towers[X] into an array of objects. {id: "", description: "Teste", tow ...

arraysjsonangulartypescript

Navigate to a new tab using this.router.navigate

Is there a way to redirect the user to a specific page with ${id} opening in a new tab, after clicking a button in an angular material dialog box? I want to leave the dialog box open while querying the new page. Currently, the redirect happens but not in a ...

javascriptangularangularjstypescriptangular-material

The attribute 'XXX' is not found within the type 'IntrinsicAttributes & RefAttributes<any>'

My coding hobby currently involves working on a React website using TypeScript. I recently came across a free Material UI template and decided to integrate it into my existing codebase. The only challenge is that the template was written in JavaScript, cau ...

reactjstypescriptmaterial-ui

WebStorm is not implementing the exclude option as specified in the tsconfig.json file

Is there a way to exclude a directory from TypeScript compilation in WebStorm? Despite specifying the exclusion in the tsconfig.json file, it seems that WebStorm doesn't respect the setting and compiles everything in the root directory. However, runn ...

typescriptwebstormjetbrains-idejetbrains-rider

The Angular service is sending back the error message "undefined" when trying to retrieve data with the ID parameter from the requested

When calling a service from a component, I am encountering a 400 bad request error with the following message: "Invalid data 'undefined' for parameter id" It's worth noting that the getProduct method in the API is functioning correctly. ...

angulartypescriptangular-services

Divide the enhanced document into sections using TypeScript

In my project, I am working with Material UI and TypeScript. I have noticed that I need to declare the Theme interface and ThemeOptions in the same file for it to work properly. Is there a more efficient way to separate these declarations from the main t ...

typescriptmaterial-uitypescript-typings

What is the best way to efficiently filter this list of Outcome data generated by neverthrow?

I am working with an array of Results coming from the neverthrow library. My goal is to check if there are any errors in the array and if so, terminate my function. However, the challenge arises when there are no errors present, as I then want to destructu ...

typescript

Explain a category of instance used in a template parameter

I am currently working on implementing a basic IOC container with type-checking capabilities. My goal is to pass the "register" method an abstract class type along with an instance of a derived type. In the "resolve" function, I aim to provide an abstrac ...

typescriptinterfaceinversion-of-control

The projection of state in NGRX Store.select is not accurately reflected

Every time I run the following code: valueToDisplay$ =store.select('model','sub-model') The value stored in valueToDisplay$ always corresponds to 'model'. Despite trying various approaches to properly project the state, it s ...

angulartypescriptreduxngrx

Check the @versionColumn value for validation prior to the entity save operation in TypeORM

I am currently in the process of saving data in a PostgreSQL database using TypeORM with NestJS integration. The data I am saving includes a version property, which is managed using TypeORM's @VersionColumn feature. This feature increments a number ea ...

node.jstypescriptnestjstypeorm