[material-ui][FocusTrap] getTabbable function has a return type of string[] instead of HTMLElement[] #42231
Description
Steps to reproduce
Link to live example: (required)
Steps:
- Create a Focustrap component
- Pass in the getTabbable function that returns an array of nodes Returns an array of ordered tabbable nodes
- Notice the Typescript Linting error.
Current behavior
Based on the description of the getTabbable prop of the FocusTrap component:
Returns an array of ordered tabbable nodes (i.e. in tab order) within the root. For instance, you can provide the "tabbable" npm dependency.
However, the type definition of this function expects it to return a ReadonlyArray<string>.
When returning a HTML Element array, it throws:
Type '(root: HTMLElement) => HTMLAnchorElement[]' is not assignable to type '(root: HTMLElement) => readonly string[]'.
Type 'HTMLAnchorElement[]' is not assignable to type 'readonly string[]'.
Type 'HTMLAnchorElement' is not assignable to type 'string'.typescript(2322)
FocusTrap.types.d.ts(12, 5): The expected type comes from property 'getTabbable' which is declared here on type 'IntrinsicAttributes & Pick<FocusTrapProps, keyof FocusTrapProps> & Pick<InferProps<any>, string | number | symbol> & Pick<...>'
Expected behavior
The getTabbable prop should accept a function returning an array of HTMLElements.
Search keywords: getTabbable, FocusTrap