oxidecomputer / oxidecomputer/console
Fix inconsistent focus states on buttons, links, tables
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 228
- Forks
- 22
- Avg merge
- 19h 42m
- Merged PRs (30d)
- 32
Description
@paryhin noticed a few focus issues, and in looking into it I spotted one or two more. This might get spun out into multiple tickets, but I wanted to create a place to log them.
Table receives blue outline when tabbing, in Chrome and Arc:
https://github.com/oxidecomputer/console/assets/22547/3146016f-fa21-4725-a185-30f330d470e9
Actions Cell has odd outline widths:
(This looks like it could be from the next row down (and next cell over) having a negative margin, but I haven't investigated too deeply)
Links in Firefox aren't tabbable
No screenshot of this, but in Firefox it seems that <a> links, even with an href and without any sort of tabindex value, aren't tabbable. This ends up affecting both navigation links and table action links (the "button" above the table). They seem fine in Chrome. This is odd enough it could be some setting on my browser; will ask others to repro before investing time in it.
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.
Research direction
Start by reproducing the reported focus behavior in Chrome and Arc for tables and action cells, then compare navigation and table action links in Firefox. Confirm the Firefox tabbing report with others before changing scope; done means the affected controls have consistent focus presentation and the applicable links are tabbable across the reported browsers.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100