studio/docs
Archived
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨(frontend) update labels and shared document icon accessibility

Browse Source 
remove aria-labels from decorative icons and add sr-only text to shared doc icon

Signed-off-by: Cyril <c.gromoff@gmail.com>
This commit is contained in:
Cyril
2025-10-01 11:33:02 +02:00
parent e71c45077d
commit 18f4ab880f
2 changed files with 20 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
CHANGELOG.md
View File

@@ -27,6 +27,9 @@ and this project adheres to
- ♿ add default background to left panel for better accessibility #1423 - ♿ add default background to left panel for better accessibility #1423
- ♿ restyle checked checkboxes: removing strikethrough #1439 - ♿ restyle checked checkboxes: removing strikethrough #1439
- ♿ add h1 for SR on 40X pages and remove alt texts #1438 - ♿ add h1 for SR on 40X pages and remove alt texts #1438
- ♿ update labels and shared document icon accessibility #1442
### Fixed ### Fixed
- 🐛(backend) duplicate sub docs as root for reader users - 🐛(backend) duplicate sub docs as root for reader users

32
src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridItem.tsx
View File

@@ -102,17 +102,19 @@ export const DocsGridItem = ({ doc, dragMode = false }: DocsGridItemProps) => {
} }
> >
{dragMode && ( {dragMode && (
<Icon <>
$theme="greyscale" <Icon
$variation="600" $theme="greyscale"
$size="14px" $variation="600"
iconName={isPublic ? 'public' : 'vpn_lock'} $size="14px"
aria-label={ iconName={isPublic ? 'public' : 'vpn_lock'}
isPublic />
<span className="sr-only">
{isPublic
? t('Accessible to anyone') ? t('Accessible to anyone')
: t('Accessible to authenticated users') : t('Accessible to authenticated users')}
} </span>
/> </>
)} )}
{!dragMode && ( {!dragMode && (
<Tooltip <Tooltip
@@ -131,12 +133,12 @@ export const DocsGridItem = ({ doc, dragMode = false }: DocsGridItemProps) => {
$variation="600" $variation="600"
$size="14px" $size="14px"
iconName={isPublic ? 'public' : 'vpn_lock'} iconName={isPublic ? 'public' : 'vpn_lock'}
aria-label={
isPublic
? t('Accessible to anyone')
: t('Accessible to authenticated users')
}
/> />
<span className="sr-only">
{isPublic
? t('Accessible to anyone')
: t('Accessible to authenticated users')}
</span>
</div> </div>
</Tooltip> </Tooltip>
)} )}