UXD-2070 Replace what-input library with :focus-visible styling 🐐

[mikrotron]

Purpose 🚀

Replace the what-input Javascript library with :focus-visible CSS styling in <Button>, <RawButton>, and <Link>.

Notes ✏️

• This not only removes the dependency on the what-input library, and eliminates the side effects of that library, but also restores the visible focus highlight when these components wrapped in a web component.
• Also updated <CollapsibleCard.Header> styling.
• Also removed dependency on what-input for <OverflowMenu> and replaced with plain Javascript.
• The :focus-visible CSS feature has very good modern browser support, but only very recent versions of Safari will support it.
• To support graceful degradation, the technique described by The Paciello Group was utilized (:focus:not(:focus-visible)).

Storybook 📕

http://storybooks.highbond-s3.com/paprika/UXD-2070--remove-whatinput

Screencap 🎥

https://user-images.githubusercontent.com/14944896/162338301-2a63431d-b925-4398-9108-79b993301c03.mov

References 🔗

https://aclgrc.atlassian.net/browse/UXD-2070

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: 0941ef31af512af187c3468b4a981d4976919245

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 46 packages

| Name | Type | | -------------------------------------- | ----- | | @paprika/button | Patch | | @paprika/collapsible-card | Patch | | @paprika/link | Patch | | @paprika/raw-button | Patch | | @paprika/overflow-menu | Patch | | @paprika/action-bar | Patch | | @paprika/breadcrumbs | Patch | | @paprika/button-group | Patch | | @paprika/calendar | Patch | | @paprika/collapsible-text | Patch | | @paprika/confirmation | Patch | | @paprika/copy-input | Patch | | @paprika/data-field | Patch | | @paprika/data-grid | Patch | | @paprika/data-header | Patch | | @paprika/dialog-actions | Patch | | @paprika/filter | Patch | | @paprika/input | Patch | | @paprika/list-box | Patch | | @paprika/modal | Patch | | @paprika/panel | Patch | | @paprika/side-navigation | Patch | | @paprika/sortable | Patch | | @paprika/status-tracker | Patch | | @paprika/table | Patch | | @paprika/takeover | Patch | | @paprika/toast | Patch | | @paprika/uploader | Patch | | @paprika/collapsible | Patch | | @paprika/inline-editors | Patch | | @paprika/list-box-browser | Patch | | @paprika/list-box-with-tags | Patch | | @paprika/pagination | Patch | | @paprika/popover | Patch | | @paprika/search | Patch | | @paprika/switch | Patch | | @paprika/tabs | Patch | | @paprika/tag | Patch | | @paprika/time-picker | Patch | | @paprika/date-picker | Patch | | @paprika/date-range-picker | Patch | | @paprika/date-input | Patch | | @paprika/collapsible-checklists | Patch | | @paprika/progress-accordion | Patch | | @paprika/form-element | Patch | | @paprika/dynamic-hyperlink-transformer | Patch |

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR