From a8535cfa2380a4ddd648d5d099701c0b5e8f3a22 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Thu, 20 Oct 2022 13:34:28 +0530
Subject: [PATCH] fix: make tags non-tabbable

---
 .../javascripts/Components/Tags/SmartViewsListItem.tsx |  3 ++-
 .../src/javascripts/Components/Tags/TagsListItem.tsx   | 10 +++-------
 packages/web/src/stylesheets/_navigation.scss          |  6 ++++++
 3 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/packages/web/src/javascripts/Components/Tags/SmartViewsListItem.tsx b/packages/web/src/javascripts/Components/Tags/SmartViewsListItem.tsx
index 6dc6f4a81..91a47d7d8 100644
--- a/packages/web/src/javascripts/Components/Tags/SmartViewsListItem.tsx
+++ b/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={{
diff --git a/packages/web/src/javascripts/Components/Tags/TagsListItem.tsx b/packages/web/src/javascripts/Components/Tags/TagsListItem.tsx
index b19ec7d9b..b3b6bd50f 100644
--- a/packages/web/src/javascripts/Components/Tags/TagsListItem.tsx
+++ b/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={{
diff --git a/packages/web/src/stylesheets/_navigation.scss b/packages/web/src/stylesheets/_navigation.scss
index 8b3d285ae..e7734656b 100644
--- a/packages/web/src/stylesheets/_navigation.scss
+++ b/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;