A11y: Make list type picker display tooltip on hover (#68798)

* Change ariaLabel to description

* Description fallback for aria-label

* Add ariaLabel ass fallback for description
This commit is contained in:
Tobias Skarhed 2023-05-23 17:19:10 +02:00 committed by GitHub
parent c4242b8c5e
commit e3e8a7965a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 8 additions and 4 deletions

View File

@ -55,10 +55,10 @@ export const RadioButton = React.forwardRef<HTMLInputElement, RadioButtonProps>(
id={id}
checked={active}
name={name}
aria-label={ariaLabel}
aria-label={ariaLabel || description}
ref={ref}
/>
<label className={styles.radioLabel} htmlFor={id} title={description}>
<label className={styles.radioLabel} htmlFor={id} title={description || ariaLabel}>
{children}
</label>
</>

View File

@ -12,8 +12,12 @@ import { SearchLayout, SearchState } from '../../types';
function getLayoutOptions() {
return [
{ value: SearchLayout.Folders, icon: 'folder', ariaLabel: t('search.actions.view-as-folders', 'View by folders') },
{ value: SearchLayout.List, icon: 'list-ul', ariaLabel: t('search.actions.view-as-list', 'View as list') },
{
value: SearchLayout.Folders,
icon: 'folder',
description: t('search.actions.view-as-folders', 'View by folders'),
},
{ value: SearchLayout.List, icon: 'list-ul', description: t('search.actions.view-as-list', 'View as list') },
];
}