Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

aria-labelledby and tabIndex: Type 'null' is not assignable

See original GitHub issue

Describe the issue. What is the expected and unexpected behavior?

When compiling our project using PF, TypeScript fails:

node_modules/@patternfly/react-core/dist/js/components/Dropdown/DropdownItem.d.ts:3:18 - error TS2430: Interface 'DropdownItemProps' incorrectly extends interface 'InternalDropdownItemProps'.
  Types of property 'tabIndex' are incompatible.
    Type 'number | null | undefined' is not assignable to type 'number | undefined'.
      Type 'null' is not assignable to type 'number | undefined'.

3 export interface DropdownItemProps extends InternalDropdownItemProps {
                   ~~~~~~~~~~~~~~~~~

node_modules/@patternfly/react-core/dist/js/components/Modal/Modal.d.ts:3:18 - error TS2430: Interface 'ModalProps' incorrectly extends interface 'HTMLProps<HTMLDivElement>'.
  Types of property ''aria-labelledby'' are incompatible.
    Type 'string | null | undefined' is not assignable to type 'string | undefined'.
      Type 'null' is not assignable to type 'string | undefined'.

3 export interface ModalProps extends React.HTMLProps<HTMLDivElement> {

I believe these two lines should not include the null option:

https://github.com/patternfly/patternfly-react/blob/master/packages/react-core/src/components/Dropdown/DropdownItem.tsx#L34

https://github.com/patternfly/patternfly-react/blob/master/packages/react-core/src/components/Modal/Modal.tsx#L21

Is this a bug or enhancement? If this issue is a bug, is this issue blocking you or is there a work-around?

Bug

What is your product and what release version are you targeting?

“@patternfly/react-core”: “^4.18.5”,

Data Driven Forms

Issue Analytics

State:
Created 3 years ago
Comments:6 (5 by maintainers)

Top GitHub Comments

1reaction

redallencommented, Jul 8, 2020

This problem is not specific to React, but to destructured props with default values. Example.

0reactions

stale[bot]commented, Sep 7, 2020

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

Top Results From Across the Web

Argument of type null is not assignable to parameter of type ...

I solved the problem this way: Imported RadioGroupState from @react-stately/radio . Assigned the context component with the type:

What happens when aria-label, aria-labelledby and aria ...

Ignored on static content not listed above unless given an interactive role and tabindex=0 , and then only if the users tabs to...

aria-labelledby - Accessibility - MDN Web Docs

The aria-labelledby property enables authors to reference other elements on the page to define an accessible name. This is useful when using ...

Slide toggle | Angular Material

ariaLabelledby : string | null ... Whether the slide-toggle element is checked or not. @Input() ... Tabindex to which to fall back to...

ANDI - Alerts

Accessibility Components that use id references are: aria-labelledby ... element was found on the page with a non-numeric value for the tabindex attribute....