accessibility-insights-web
accessibility-insights-web copied to clipboard
fix: Create reflowable card footer buttons
Details
Extracts out some of the work in #5745, plus additional refactors:
- Add a new narrowModeThreshold for reflowing card footers
- Create a new component, CardFooterFarButtons, a reflowable and refactored version of CardKebabMenuButton
The gifs below show the behavior or CardFooterFarButtons when it is resized, but this PR does not use CardFooterFarButtons anywhere in the UI. Replacing CardKebabMenuButton and passing NarrowModeStatus through to the cards will be done in a separate PR.
CardFooterFarButtons also makes sure that focus correctly returns to the "..." button or the "file issue" button when the issue filing settings dialog is closed:
Motivation
Partially addresses #5609
Context
Deferred to future PRs:
- Further refactor CardFooterFarButtons to use store state instead of UI state to determine whether the issue filing dialog is open (this will allow renderIssueFilingSettingContent() to be extracted to a different file)
- Replace CardKebabMenuButton with CardFooterFarButtons in the cards UI
- Pass NarrowModeStatus through to the cards components
(copied from #5745) Also worth mentioning is that this PR uses the width of the entire screen to determine if cards should reflow, rather than the width of the cards themselves. This is not ideal, especially in electron where both the left nav and the right-hand screenshot also resize as the screen resizes, and the card width is affected by more than just screen width. It doesn't make a huge difference from a user perspective, but in the future, we may want to consider refactoring NarrowModeDetector to be more generic (it currently assumes that it's measuring the width of the whole screen and sets its thresholds accordingly) and adding another NarrowModeDetector to the element containing the cards.
Pull request checklist
- [n/a] Addresses an existing issue: #0000
- [x] Ran
yarn fastpass
- [x] Added/updated relevant unit test(s) (and ran
yarn test
) - [x] Verified code coverage for the changes made. Check coverage report at:
<rootDir>/test-results/unit/coverage
- [x] PR title AND final merge commit title both start with a semantic tag (
fix:
,chore:
,feat(feature-name):
,refactor:
). SeeCONTRIBUTING.md
. - [n/a] (UI changes only) Added screenshots/GIFs to description above
- [n/a] (UI changes only) Verified usability with NVDA/JAWS
Thanks for the suggestion, @madalynrose! I changed the class name to CardFooterInstanceActionButtons
to avoid confusion with the CardFooterMenuItem
type.