Skip to content

Refactor toggle button#414

Merged
fisher-alice merged 11 commits intomainfrom
alice/toggle-refactor
Feb 11, 2026
Merged

Refactor toggle button#414
fisher-alice merged 11 commits intomainfrom
alice/toggle-refactor

Conversation

@fisher-alice
Copy link
Contributor

@fisher-alice fisher-alice commented Feb 10, 2026

Follow-up to #412 (comment).
To improve a11y on fish levels, the toggle button was refactored into two buttons so that it is now keyboard-navigable and screenreader compliant.

Previously, the toggle buttons alternated between displaying the matching and non-matching fish sets. For example, repeatedly clicking the Checkmark button would switch back and forth between both sets, potentially creating confusion about which set is which.

This PR updates the buttons so that if a user selects the Checkmark button, only the matching fish set is displayed and if the user selects the Banned button, only the non-matching fish set is displayed, even if the buttons are selected multiple times.

I updated the two button's styling, as suggested by @breville (edges of button align and 0 border radius where they meet) and updated focus outline so that it is always rendered over the buttons.

Before update

toggle-button-current.mov

After update

Screen.Recording.2026-02-10.at.9.47.17.PM.mov

return;
}

// No-op if already showing the desired fish set (matching or non-matching).
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

My one thought is to combine this early return with the one above. And maybe this comment could be consolidated to "Pond fish are those that match (belong in the pond), whereas recall fish do not."

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice - will update!

@fisher-alice fisher-alice requested review from a team, breville and hannahbergam February 10, 2026 18:27
Copy link
Contributor

@hannahbergam hannahbergam left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks Alice!

This reverts commit ab7ee32.

trainer.train();

const details = trainer.detailedExplanation(trainingOcean[0].fieldInfos);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I know you already reverted this- I do think it would be worth deflaking in the future but I was always able to get a passing build (dorsalFins test passing included) with a rerun

Copy link
Member

@breville breville left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This UI change makes a lot of sense. Thanks for maintaining the "button group" styling.

@fisher-alice fisher-alice merged commit c02a64b into main Feb 11, 2026
1 of 2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants