All props are required warning in typescript

[mrjones03650]

🐛 Bug report

Current Behavior

When using @reach/combobox with typescript 4.4.3 typescript warns on all props "doesn't have required attribute..."

Expected behavior

No warning should be issued

Your environment

Software	Name(s)	Version
Reach Package	combobox	0.16.1
React		17.0.2
Typescript		4.4.3

[indiesquidge]

@mrjones03650 Can you please provide a working sandbox example of the errors you are seeing?

[chaance]

Closing for now. If you can provide a reproduction of the issue I can reopen and investigate.

[bezgodov]

@chaance Some info, tried with typescript version 4.3.4 and 4.5.4. I'm using PhpStorm

[bezgodov]

@chaance I downgraded @reach/dialog to 0.12.1 and warnings disappeared

[ralvapil]

I'm having this same problem with:
"@reach/listbox": "^0.16.2", "@reach/visually-hidden": "^0.16.0",

[lortimer]

@chaance I ran into this as well, but with @reach/alert-dialog. The first version to have the problem is 0.15.2. I don't see the problem at 0.15.0, and I couldn't install @reach/alert-dialog at 0.15.1.

Here is a link to a repo that demonstrates the issue. It uses the example code from the docs. Edit: Since Reach is no longer maintained and this is almost 2 years old, I've deleted this repo to unclutter my Github repositories. If you want to recreate it, this was just a repo made with create-react-app with reach installed.

You'll need to install a Jetbrains IDE like Webstorm to see the issue. Webstorm has a 30-day trial license you can use, as well as free licenses for open-source projects.

All you have to do is clone the project, open it in Webstorm, run npm i, and open App.tsx.

The <AlertDialog>, <AlertDialogLabel>, and <AlertDialogDescription> tags have around 100 warnings on them saying that required attributes are missing, but the warnings are repeated so I think there are only 25 unique attributes missing.

Oddly enough, the "missing" attributes look like they're methods belonging to the JavaScript String prototype - they include toLocaleLowerCase, trimLeft, replace, and substring. EDIT: some of the "missing" attributes are not strictly string methods, like fontcolor, fontsize, and italics.

The app runs despite the warnings, but it makes auto-importing and auto-completing those elements very annoying, not to mention that it creates hundreds of warnings.

[chipit24]

Can this issue be re-opened? I've been experiencing this problem with all reach-ui components (dialog, tabs, alert, etc.).

[bezgodov]

Can this issue be re-opened? I've been experiencing this problem with all reach-ui components (dialog, tabs, alert, etc.).

Yes!

[tornvallalexander]

Problem still exists ;(

[fernandodonaire]

Hi there. I'm still experiencing this issue on WebStorm v2022.3.1 with the SkipNavContent component from "@reach/skip-nav": "0.18.0"

[lortimer]

For what it's worth to anyone reading this, I've come to the conclusion that none of the "accessible component" libraries - Reach, ReaKit, Cauldron - are worth the trouble. They all have accessibility issues, but you can't access the inner elements to customize them or style them easily. Issues like this don't get fixed because they don't have enough people to maintain them, and I don't have time to submit a PR in addition to building my actual project.

My team has switched to just implementing our own components and testing with assistive devices. You have to test your site for accessibility anyway because it's irresponsible to trust a 3rd-party library to work 100% of the time. You might as well have easy access to the components when you need to fix them.

[hsebouai]

I'm having the same issue with WebStorm 2023.2.2 and @reach/accordion. Is there any workaround?