[Joy-ui] [Table] Focus style on table rows is inconsistent
@siriwatknp is already working on this.
Since Jul 17, 2024.
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
Steps to reproduce
Link to live example: https://mui.com/joy-ui/react-table/
Steps:
- Enable the "sticky header" on the first example
- Set the first row to
:focus-visible
Note: On chrome/edge the focus also looks different! The firefox one is blue with lines above and below, while the chrome/edge version is black and all around.
Current behavior
The top part of the outline is missing (hidden below header)
Firefox:
Edge:
Expected behavior
Looks the same as focus for second row (line below and above)
Context
I want to support keyboard navigation using these focus styles.
Your environment
npx @mui/envinfo
System:
OS: Linux 5.15 Ubuntu 22.04.3 LTS 22.04.3 LTS (Jammy Jellyfish)
Binaries:
Node: 20.14.0 - ~/.nvm/versions/node/v20.14.0/bin/node
npm: 9.6.7 - ~/.nvm/versions/node/v20.14.0/bin/npm
pnpm: 8.12.1 - ~/.local/share/pnpm/pnpm
Browsers:
Firefox
Search keywords: focus table row sticky header
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.