Fix tabindex

This commit is contained in:
IRBorisov 2023-09-04 19:12:27 +03:00
parent 7430041f7b
commit 04c3531f60
8 changed files with 14 additions and 4 deletions

View File

@ -38,6 +38,7 @@ function Checkbox({ id, required, disabled, tooltip, label, widthClass = 'w-full
disabled={disabled} disabled={disabled}
checked={value} checked={value}
onChange={onChange} onChange={onChange}
tabIndex={-1}
/> />
{ label && { label &&
<Label <Label

View File

@ -5,10 +5,11 @@ extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'title
noHover?: boolean noHover?: boolean
} }
function MiniButton({ icon, tooltip, children, noHover, ...props }: MiniButtonProps) { function MiniButton({ icon, tooltip, children, noHover, tabIndex, ...props }: MiniButtonProps) {
return ( return (
<button type='button' <button type='button'
title={tooltip} title={tooltip}
tabIndex={tabIndex ?? -1}
className={`px-1 py-1 font-bold rounded-full cursor-pointer whitespace-nowrap disabled:cursor-not-allowed clr-btn-clear ${noHover ? 'outline-none' : 'clr-hover'}`} className={`px-1 py-1 font-bold rounded-full cursor-pointer whitespace-nowrap disabled:cursor-not-allowed clr-btn-clear ${noHover ? 'outline-none' : 'clr-hover'}`}
{...props} {...props}
> >

View File

@ -21,6 +21,7 @@ function Navigation () {
title='Скрыть навигацию' title='Скрыть навигацию'
className='absolute top-0 right-0 z-[60] w-[1.2rem] h-[3rem] border-b-2 border-l-2 clr-btn-nav rounded-none' className='absolute top-0 right-0 z-[60] w-[1.2rem] h-[3rem] border-b-2 border-l-2 clr-btn-nav rounded-none'
onClick={toggleNoNavigation} onClick={toggleNoNavigation}
tabIndex={-1}
> >
<p>{'>'}</p><p>{'>'}</p> <p>{'>'}</p><p>{'>'}</p>
</button>} </button>}
@ -29,6 +30,7 @@ function Navigation () {
title='Показать навигацию' title='Показать навигацию'
className='absolute top-0 right-0 z-[60] px-1 h-[1.6rem] border-b-2 border-l-2 clr-btn-nav rounded-none' className='absolute top-0 right-0 z-[60] px-1 h-[1.6rem] border-b-2 border-l-2 clr-btn-nav rounded-none'
onClick={toggleNoNavigation} onClick={toggleNoNavigation}
tabIndex={-1}
> >
{''} {''}
</button>} </button>}

View File

@ -12,6 +12,7 @@ function NavigationButton({ id, icon, description, onClick, text }: NavigationBu
title={description} title={description}
type='button' type='button'
onClick={onClick} onClick={onClick}
tabIndex={-1}
className={`flex items-center h-full gap-1 ${text ? 'px-2' : 'px-4'} mr-1 min-w-fit whitespace-nowrap clr-btn-nav`} className={`flex items-center h-full gap-1 ${text ? 'px-2' : 'px-4'} mr-1 min-w-fit whitespace-nowrap clr-btn-nav`}
> >
{icon && <span>{icon}</span>} {icon && <span>{icon}</span>}

View File

@ -309,11 +309,12 @@ function EditorItems({ onOpenEdit, onCreateCst, onDeleteCst }: EditorItemsProps)
const type = typeStr as CstType; const type = typeStr as CstType;
return ( return (
<Button key={type} <Button key={type}
text={`${getCstTypePrefix(type)}`} text={getCstTypePrefix(type)}
tooltip={getCstTypeShortcut(type)} tooltip={getCstTypeShortcut(type)}
dense dense
widthClass='w-[1.4rem]' widthClass='w-[1.4rem]'
disabled={!isEditable} disabled={!isEditable}
tabIndex={-1}
onClick={() => handleCreateCst(type)} onClick={() => handleCreateCst(type)}
/>); />);
})} })}
@ -343,6 +344,7 @@ function EditorItems({ onOpenEdit, onCreateCst, onDeleteCst }: EditorItemsProps)
selectableRows selectableRows
selectableRowsHighlight selectableRowsHighlight
selectableRowsComponentProps={{tabIndex: -1}}
onSelectedRowsChange={handleSelectionChange} onSelectedRowsChange={handleSelectionChange}
onRowDoubleClicked={cst => onOpenEdit(cst.id)} onRowDoubleClicked={cst => onOpenEdit(cst.id)}
onRowClicked={handleRowClicked} onRowClicked={handleRowClicked}

View File

@ -132,9 +132,9 @@ function EditorRSForm({ onDestroy, onClaim, onShare, isModified, setIsModified,
onChange={event => setComment(event.target.value)} onChange={event => setComment(event.target.value)}
/> />
<div className='flex justify-between whitespace-nowrap'> <div className='flex justify-between whitespace-nowrap'>
<div></div>
<Checkbox id='common' label='Общедоступная схема' <Checkbox id='common' label='Общедоступная схема'
value={common} value={common}
widthClass='w-fit mt-3'
disabled={!isEditable} disabled={!isEditable}
onChange={event => setCommon(event.target.checked)} onChange={event => setCommon(event.target.checked)}
/> />

View File

@ -327,7 +327,7 @@ function RSTabs() {
onShare={onShareSchema} onShare={onShareSchema}
onToggleSubscribe={handleToggleSubscribe} onToggleSubscribe={handleToggleSubscribe}
showCloneDialog={handleShowClone} showCloneDialog={handleShowClone}
showUploadDialog={() => setShowUpload(true)} showUploadDialog={() => setShowUpload(true)}
/> />
<ConceptTab className='border-r-2 min-w-[7.8rem]'>Паспорт схемы</ConceptTab> <ConceptTab className='border-r-2 min-w-[7.8rem]'>Паспорт схемы</ConceptTab>
<ConceptTab className='border-r-2 min-w-[10rem] flex justify-between gap-2'> <ConceptTab className='border-r-2 min-w-[10rem] flex justify-between gap-2'>

View File

@ -76,6 +76,7 @@ function RSTabsMenu({
widthClass='h-full w-fit' widthClass='h-full w-fit'
dense dense
onClick={schemaMenu.toggle} onClick={schemaMenu.toggle}
tabIndex={-1}
/> />
{ schemaMenu.isActive && { schemaMenu.isActive &&
<Dropdown> <Dropdown>
@ -125,6 +126,7 @@ function RSTabsMenu({
icon={<PenIcon size={5} color={isEditable ? 'text-success' : 'text-warning'}/>} icon={<PenIcon size={5} color={isEditable ? 'text-success' : 'text-warning'}/>}
dense dense
onClick={editMenu.toggle} onClick={editMenu.toggle}
tabIndex={-1}
/> />
{ editMenu.isActive && { editMenu.isActive &&
<Dropdown> <Dropdown>
@ -168,6 +170,7 @@ function RSTabsMenu({
borderClass='' borderClass=''
dense dense
onClick={onToggleSubscribe} onClick={onToggleSubscribe}
tabIndex={-1}
/> />
</div> </div>
</div> </div>