fix: make tags non-tabbable

packages/web/src/javascripts/Components/Tags/SmartViewsListItem.tsx

@@ -16,6 +16,7 @@ import {
 import { AppPaneId } from '../ResponsivePane/AppPaneMetadata'
 import { useResponsiveAppPane } from '../ResponsivePane/ResponsivePaneProvider'
 import { classNames } from '@/Utils/ConcatenateClassNames'
+import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants/Constants'
 
 type Props = {
   view: SmartView
@@ -115,7 +116,7 @@ const SmartViewsListItem: FunctionComponent<Props> = ({ view, tagsState }) => {
     <>
       <div
         role="button"
-        tabIndex={0}
+        tabIndex={FOCUSABLE_BUT_NOT_TABBABLE}
         className={classNames('tag py-2 px-3.5 md:py-1', isSelected && 'selected', isFaded && 'opacity-50')}
         onClick={selectCurrentTag}
         style={{

packages/web/src/javascripts/Components/Tags/TagsListItem.tsx

@@ -1,5 +1,5 @@
 import Icon from '@/Components/Icon/Icon'
-import { TAG_FOLDERS_FEATURE_NAME } from '@/Constants/Constants'
+import { FOCUSABLE_BUT_NOT_TABBABLE, TAG_FOLDERS_FEATURE_NAME } from '@/Constants/Constants'
 import { usePremiumModal } from '@/Hooks/usePremiumModal'
 import { KeyboardKey } from '@standardnotes/ui-services'
 import { FeaturesController } from '@/Controllers/FeaturesController'
@@ -234,12 +234,8 @@ export const TagsListItem: FunctionComponent<Props> = observer(
       <>
         <div
           role="button"
-          tabIndex={0}
-          className={classNames(
-            'tag py-2 px-3.5 focus:shadow-inner md:py-1',
-            isSelected && 'selected',
-            readyToDrop && 'is-drag-over',
-          )}
+          tabIndex={FOCUSABLE_BUT_NOT_TABBABLE}
+          className={classNames('tag py-2 px-3.5 md:py-1', isSelected && 'selected', readyToDrop && 'is-drag-over')}
           onClick={selectCurrentTag}
           ref={mergeRefs([dragRef, tagRef])}
           style={{

packages/web/src/stylesheets/_navigation.scss

@@ -61,6 +61,12 @@ $content-horizontal-padding: 16px;
     transition: height 0.1s ease-in-out;
     width: 100%;
 
+    &:focus {
+      border: 0;
+      outline: 0;
+      box-shadow: none;
+    }
+
     > .tag-info {
       display: flex;
       flex-direction: row;