[bug]: Incorrect prop-type for tabindex in CategoryTree components

[justinconabree]

Describe the bug

Developer console shows errors due to incorrect prop type declaration for tabindex (or tabIndex) in Tree and Branch and Leaf components under CategoryTree. It's defined as function but Navigation is declaring const tabindex = isOpen ? '0' : '-1';

Also incorrectly passing the attribute to the button in categoryBranch. Should be tabIndex

Loading homepage produces follow errors in console when running project in watch

Warning: Failed prop type: Invalid prop `tabindex` of type `string` supplied to `Tree`, expected `function`.

Warning: Failed prop type: Invalid prop `tabindex` of type `string` supplied to `Branch`, expected `function`.

Warning: Failed prop type: Invalid prop `tabindex` of type `string` supplied to `Leaf`, expected `function`.

Warning: Invalid DOM property `tabindex`. Did you mean `tabIndex`?

To reproduce

Steps to reproduce the behavior:

1. Run project in watch mode (or build in developer)
2. Go to homepage
3. Open developer tools
4. See errors

Expected behavior

No errors in console

Possible solutions

Change proptype to string and pass to button as tabIndex

Please let us know what packages this bug is in regards to:

• [ ] venia-concept
• [x] venia-ui
• [ ] pwa-buildpack
• [ ] peregrine
• [ ] pwa-devdocs
• [ ] upward-js
• [ ] upward-spec
• [ ] create-pwa

[m2-assistant[bot]]

Hi @JustinConabreeAbsolunet. Thank you for your report. To speed up processing of this issue, make sure that you provided sufficient information.

Add a comment to assign the issue: @magento I am working on this

---

• Join Magento Community Engineering Slack and ask your questions in #github channel.

[anthoula]

@adobe export issue to JIRA project PWA as Bug

[github-jira-sync-bot]

:white_check_mark: Jira issue https://jira.corp.adobe.com/browse/PWA-2987 is successfully created for this GitHub issue.

[justinconabree]

Hi @anthoula

I see that 12.7 was supposed to address this issue but it's still present. The error is now just tabIndex instead of tabindex from this PR. What needs to change is the prop type. It's being passed a string, not a function.

This error was solved

Warning: Invalid DOM property `tabindex`. Did you mean `tabIndex`?

But the others are still present

[anthoula]

Hey @JustinConabreeAbsolunet ! Yes we've noticed that has not been fully resolved, and we are tracking it as a separate lower priority backlog issue

[schizek]

@anthoula, are you able to provide a link so we can follow the status of the remaining issue?