accessibility-insights-web icon indicating copy to clipboard operation
accessibility-insights-web copied to clipboard

fix: Create reflowable card footer buttons

Open pownkel opened this issue 2 years ago • 1 comments

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.

card footer buttons reflowing as window is resized

CardFooterFarButtons also makes sure that focus correctly returns to the "..." button or the "file issue" button when the issue filing settings dialog is closed: demo of focus handling when issue filing settings is opened and 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:). See CONTRIBUTING.md.
  • [n/a] (UI changes only) Added screenshots/GIFs to description above
  • [n/a] (UI changes only) Verified usability with NVDA/JAWS

pownkel avatar Jul 30 '22 00:07 pownkel

Thanks for the suggestion, @madalynrose! I changed the class name to CardFooterInstanceActionButtons to avoid confusion with the CardFooterMenuItem type.

pownkel avatar Aug 10 '22 22:08 pownkel