[BD-46] feat: FormAutosuggest component

[PKulkoRaccoonGang]

Description

• take Organization dropdown implementation and create a standalone component in the Paragon repository;
• logic for closing the dropdown list on keypress "Escape";
• ArrowUp and arrowDown navigation;
• implement accessibility from given examples (https://alphagov.github.io/accessible-autocomplete/examples/, https://github.com/alphagov/accessible-autocomplete)

Figma

Deploy Preview

FormAutosuggest component

Merge Checklist

• [x] If your update includes visual changes, have they been reviewed by a designer? Send them a link to the Netlify deploy preview, if applicable.
• [x] Does your change adhere to the documented style conventions?
• [x] Do any prop types have missing descriptions in the Props API tables in the documentation site (check deploy preview)?
• [x] Were your changes tested using all available themes (see theme switcher in the header of the deploy preview, under the "Settings" icon)?
• [x] Were your changes tested in the example app?
• [x] Is there adequate test coverage for your changes?
• [x] Consider whether this change needs to reviewed/QA'ed for accessibility (a11y). If so, please add wittjeff and adamstankiewicz as reviewers on this PR.

Post-merge Checklist

• [x] Verify your changes were released to NPM at the expected version.
• [x] If you'd like, share your contribution in #show-and-tell.
• [x] 🎉 🙌 Celebrate! Thanks for your contribution.

[openedx-webhooks]

Thanks for the pull request, @PKulkoRaccoonGang!

When this pull request is ready, tag your edX technical lead.

[netlify[bot]]

✅ Deploy Preview for paragon-openedx ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	9f5972e18e211e3d4917f02f6c0a3b82c934ce13
🔍 Latest deploy log	https://app.netlify.com/sites/paragon-openedx/deploys/63515c291a75750008433120
😎 Deploy Preview	https://deploy-preview-1586--paragon-openedx.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[codecov[bot]]

Codecov Report

Base: 90.40% // Head: 90.44% // Increases project coverage by +0.03% :tada:

Coverage data is based on head (3160644) compared to base (9942559). Patch coverage: 90.00% of modified lines in pull request are covered.

:exclamation: Current head 3160644 differs from pull request most recent head 9f5972e. Consider uploading reports for the commit 9f5972e to get more accurate results

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #1586      +/-   ##
==========================================
+ Coverage   90.40%   90.44%   +0.03%     
==========================================
  Files         208      210       +2     
  Lines        3534     3684     +150     
  Branches      824      867      +43     
==========================================
+ Hits         3195     3332     +137     
- Misses        324      337      +13     
  Partials       15       15              

Impacted Files	Coverage Δ
src/hooks/useArrowKeyNavigation.js	18.18% <20.00%> (-0.87%)	:arrow_down:
src/Form/FormAutosuggest.jsx	93.25% <93.25%> (ø)
src/Form/FormAutosuggestOption.jsx	100.00% <100.00%> (ø)
src/Form/index.jsx	100.00% <100.00%> (ø)
src/Modal/ModalLayer.jsx	68.42% <0.00%> (-31.58%)	:arrow_down:
src/Truncate/utils.js	100.00% <0.00%> (ø)
src/Truncate/index.jsx	100.00% <0.00%> (ø)
src/PageBanner/index.jsx	91.66% <0.00%> (ø)
src/Card/CardImageCap.jsx	100.00% <0.00%> (+7.14%)	:arrow_up:

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

:umbrella: View full report at Codecov.
:loudspeaker: Do you have feedback about the report comment? Let us know in this issue.

[adamstankiewicz]

@PKulkoRaccoonGang I believe I'm still seeing some odd behavior with the left/right arrow key navigation. If I press the left arrow key when there are menu options visible, it puts focus on the first menu item instead of moving the cursor in the input field to the left one character.

[PKulkoRaccoonGang]

@adamstankiewicz navigation bug fixed, please see this pull request.

[openedx-webhooks]

@PKulkoRaccoonGang 🎉 Your pull request was merged! Please take a moment to answer a two question survey so we can improve your experience in the future.

[edx-semantic-release]

:tada: This PR is included in version 20.17.0 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: