Bump `frontend-shared` and replace local focus-ring utility classes

package.json

@@ -11,7 +11,7 @@
     "@babel/preset-env": "^7.1.6",
     "@babel/preset-react": "^7.0.0",
     "@hypothesis/frontend-build": "1.2.0",
-    "@hypothesis/frontend-shared": "4.5.2",
+    "@hypothesis/frontend-shared": "4.6.0",
     "@octokit/rest": "^18.0.0",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^22.0.0",

src/sidebar/components/Menu.js

@@ -170,7 +170,7 @@ export default function Menu({
         aria-expanded={isOpen ? 'true' : 'false'}
         aria-haspopup={true}
         className={classnames(
-          'u-outline-on-keyboard-focus',
+          'focus-visible-ring',
           'flex items-center justify-center rounded-sm transition-colors',
           {
             'text-grey-7 hover:text-grey-9': !isOpen,
@@ -211,7 +211,7 @@ export default function Menu({
           />
           <div
             className={classnames(
-              'u-outline-on-keyboard-focus',
+              'focus-visible-ring',
               // Position menu content near bottom of menu label/toggle control
               'absolute top-[calc(100%+5px)] z-1 border shadow',
               'bg-white text-lg',

src/sidebar/components/MenuItem.js

@@ -230,7 +230,7 @@ export default function MenuItem({
   );
 
   const wrapperClasses = classnames(
-    'u-outline-on-keyboard-focus--inset',
+    'focus-visible-ring ring-inset',
     'w-full min-w-[150px] flex items-center select-none',
     'border-b',
     // Set this container as a "group" so that children may style based on its

src/sidebar/components/TagListItem.js

@@ -51,7 +51,7 @@ export default function TagListItem({ href, onRemoveTag, tag }) {
             'text-grey-6 hover:text-color-text hover:bg-grey-2',
             // Emulates transitions on *Button shared component styling
             'transition-colors duration-200',
-            'u-outline-on-keyboard-focus--inset'
+            'focus-visible-ring ring-inset'
           )}
           onClick={() => {
             onRemoveTag(tag);

src/styles/sidebar/_utilities.scss

-@use 'tailwindcss/utilities';
-
-// This is a temporary local implementation of `.hyp-u-outline-on-keyboard-focus`
-// and `.hyp-u-outline-on-keyboard-focus--inset`. These are the last remaining
-// utilities used by this application, so implementing them here allows us to
-// remove the `frontend-shared` utility styles from the `sidebar` CSS.
-// TODO: This should be re-implemented as a Tailwind plugin in `frontend-shared`
-.u-outline-on-keyboard-focus:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px #59a7e8;
-}
-.js-focus-visible .u-outline-on-keyboard-focus:focus:not(.focus-visible) {
-  outline: none;
-  box-shadow: none;
-}
-.u-outline-on-keyboard-focus:focus:not(:focus-visible) {
-  outline: none;
-  box-shadow: none;
-}
-
-.u-outline-on-keyboard-focus--inset:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px #59a7e8 inset;
-}
-.js-focus-visible
-  .u-outline-on-keyboard-focus--inset:focus:not(.focus-visible) {
-  outline: none;
-  box-shadow: none;
-}
-.u-outline-on-keyboard-focus--inset:focus:not(:focus-visible) {
-  outline: none;
-  box-shadow: none;
-}

src/styles/sidebar/sidebar.scss

 @use './base';
 @use './components';
-@use './utilities';
+@use 'tailwindcss/utilities';

yarn.lock

@@ -1057,10 +1057,10 @@
     fancy-log "^1.3.3"
     glob "^7.2.0"
 
-"@hypothesis/frontend-shared@4.5.2":
-  version "4.5.2"
-  resolved "https://registry.yarnpkg.com/@hypothesis/frontend-shared/-/frontend-shared-4.5.2.tgz#841d7197a99aeec9b66b579acceb8e91a4a16fd7"
-  integrity sha512-9ckLkzmKmwGnzVuT7dJEAA8d5Yd3/YXjbUyXx0IAlq9YPrNzdNKPa4SX1hBqCfc0Q5IrVFsnEzH1YqeAgiOyrg==
+"@hypothesis/frontend-shared@4.6.0":
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/@hypothesis/frontend-shared/-/frontend-shared-4.6.0.tgz#2a45697b205662b0437e03167df4b615337fccef"
+  integrity sha512-AuQMwT6ggWCvSGxs8ERSfdQ4YSLcAk4XBKb92UqOu4wrhJ6PsKLCyv6HIrX3o4tnamZ0EiotTmrUsCi7XxM07Q==
   dependencies:
     normalize.css "^8.0.1"