oxidecomputer / oxidecomputer/console

Fix inconsistent focus states on buttons, links, tables

Open
#2,054 2 comments 0 reactions 0 assignees View on GitHub

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:
image
(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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.