rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: make tags non-tabbable

Browse Source
This commit is contained in:
Aman Harwara
2022-10-20 13:34:28 +05:30
parent 27bb4ebdae
commit a8535cfa23
3 changed files with 11 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/web/src/javascripts/Components/Tags/SmartViewsListItem.tsx
View File

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

10
packages/web/src/javascripts/Components/Tags/TagsListItem.tsx
View File

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

6
packages/web/src/stylesheets/_navigation.scss
View File

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