feat: set tabindex depending on overflowed tags

app/assets/javascripts/components/AutocompleteTagInput.tsx

@@ -11,12 +11,14 @@ type Props = {
   application: WebApplication;
   appState: AppState;
   tagsRef: RefObject<HTMLButtonElement[]>;
+  tabIndex: number;
 };
 
 export const AutocompleteTagInput: FunctionalComponent<Props> = ({
   application,
   appState,
   tagsRef,
+  tabIndex,
 }) => {
   const [searchQuery, setSearchQuery] = useState('');
   const [dropdownVisible, setDropdownVisible] = useState(false);
@@ -102,6 +104,7 @@ export const AutocompleteTagInput: FunctionalComponent<Props> = ({
           onChange={onSearchQueryChange}
           type="text"
           placeholder="Add tag"
+          tabIndex={tabIndex}
           onBlur={closeOnBlur}
           onFocus={showDropdown}
           onKeyUp={(event) => {

app/assets/javascripts/components/NoteTags.tsx

@@ -99,6 +99,8 @@ const NoteTags = observer(({ application, appState }: Props) => {
   const tagClass = `bg-contrast border-0 rounded text-xs color-text py-1 pr-2 flex items-center 
     mt-2 mr-2 cursor-pointer hover:bg-secondary-contrast focus:bg-secondary-contrast`;
 
+  const overflowedTags = tagsContainerCollapsed && overflowCount > 0;
+
   return (
     <div className="flex" style={{ height: tagsContainerHeight }}>
       <div
@@ -126,6 +128,7 @@ const NoteTags = observer(({ application, appState }: Props) => {
                 onTagBackspacePress(tag);
               }
             }}
+            tabIndex={isTagOverflowed(tagsRef.current[index]) ? -1 : 0}
           >
             <Icon
               type="hashtag"
@@ -140,6 +143,7 @@ const NoteTags = observer(({ application, appState }: Props) => {
           application={application}
           appState={appState}
           tagsRef={tagsRef}
+          tabIndex={overflowedTags ? -1 : 0}
         />
       </div>
       {overflowCount > 1 && tagsContainerCollapsed && (