improve accessibility on permission modal

Signed-off-by: yamashush <38120991+yamashush@users.noreply.github.com>
This commit is contained in:
yamashush 2024-01-21 19:34:45 +09:00 committed by Tilman Vatteroth
parent 56d3bce2da
commit 1f2c78831d
4 changed files with 9 additions and 9 deletions

View file

@ -9,7 +9,7 @@ import { UiIcon } from '../../../../../common/icons/ui-icon'
import type { PermissionDisabledProps } from './permission-disabled.prop'
import React, { useCallback, useState } from 'react'
import { Button, FormControl, InputGroup } from 'react-bootstrap'
import { Plus as IconPlus } from 'react-bootstrap-icons'
import { PlusLg as IconPlus } from 'react-bootstrap-icons'
export interface PermissionAddEntryFieldProps {
onAddEntry: (identifier: string) => void
@ -42,8 +42,8 @@ export const PermissionAddEntryField: React.FC<PermissionAddEntryFieldProps & Pe
<InputGroup className={'me-1 mb-1'}>
<FormControl value={newEntryIdentifier} placeholder={placeholderText} onChange={onChange} disabled={disabled} />
<Button
variant='light'
className={'text-secondary ms-2'}
variant='primary'
className={'text-ms-2'}
title={placeholderText}
onClick={onSubmit}
disabled={disabled}>

View file

@ -75,10 +75,7 @@ export const PermissionEntryButtons: React.FC<PermissionEntryButtonsProps & Perm
return (
<div>
<Button variant='light' className={'text-danger me-2'} disabled={disabled} title={removeTitle} onClick={onRemove}>
<UiIcon icon={IconX} />
</Button>
<ToggleButtonGroup type='radio' name='edit-mode' value={currentSetting}>
<ToggleButtonGroup className={'me-2'} type='radio' name='edit-mode' value={currentSetting}>
<Button
disabled={disabled}
title={setReadOnlyTitle}
@ -94,6 +91,9 @@ export const PermissionEntryButtons: React.FC<PermissionEntryButtonsProps & Perm
<UiIcon icon={IconPencil} />
</Button>
</ToggleButtonGroup>
<Button variant='danger' disabled={disabled} title={removeTitle} onClick={onRemove}>
<UiIcon icon={IconX} />
</Button>
</div>
)
}

View file

@ -38,7 +38,7 @@ export const PermissionOwnerChange: React.FC<PermissionOwnerChangeProps> = ({ on
<InputGroup className={'me-1 mb-1'}>
<FormControl value={ownerFieldValue} placeholder={placeholderText} onChange={onChangeField} />
<Button
variant='light'
variant='primary'
title={buttonTitleText}
onClick={onClickConfirm}
className={'ms-2'}

View file

@ -36,7 +36,7 @@ export const PermissionOwnerInfo: React.FC<PermissionOwnerInfoProps & Permission
return (
<Fragment>
<UserAvatarForUsername username={noteOwner} />
<Button variant='light' disabled={disabled} title={buttonTitle} onClick={onEditOwner}>
<Button variant='primary' disabled={disabled} title={buttonTitle} onClick={onEditOwner}>
<UiIcon icon={IconPencil} />
</Button>
</Fragment>