a11y: several improvements

1008610010 · Jan 12, 2024 · 0dab619 · 0dab619
1 parent 4d05f40
commit 0dab619
Show file tree

Hide file tree

Showing 8 changed files with 17 additions and 9 deletions.
diff --git a/admin/src/App.ts b/admin/src/App.ts
@@ -54,6 +54,7 @@ function Routed() {
         navigate(path || '/')
     })
     return h(Fragment, {},
+        h('h1', { hidden: true }, "Admin-panel"),
         !large && h(StickyBar, { title, openMenu: () => setOpen(true) }),
         !large && h(Drawer, { anchor:'left', open, onClose(){ setOpen(false) } },
             h(MainMenu, {

diff --git a/frontend/src/Breadcrumbs.ts b/frontend/src/Breadcrumbs.ts
@@ -16,8 +16,8 @@ export function Breadcrumbs() {
     const breadcrumbs = currentPath ? currentPath.split('/').map(x => [prev += x + '/', decodeURIComponent(x)]) : []
     const {t} = useI18N()
     return h(Fragment, {},
-        h(Breadcrumb, { label: hIcon('parent', { title: t`parent folder` }), path: parent }),
-        h(Breadcrumb, { label: hIcon('home', { title: t`home` }), path: base, current: !currentPath }),
+        h(Breadcrumb, { label: hIcon('parent'), title: t`parent folder`, path: parent }),
+        h(Breadcrumb, { label: hIcon('home'), title: t`home`, path: base, current: !currentPath }),
         breadcrumbs.map(([path,label], i) =>
             h(Breadcrumb, {
                 key: path,
@@ -28,7 +28,7 @@ export function Breadcrumbs() {
     )
 }
 
-function Breadcrumb({ path, label, current }:{ current?: boolean, path: string, label?: string | ReactElement }) {
+function Breadcrumb({ path, label, current, title }:{ current?: boolean, path: string, label?: string | ReactElement, title?: string }) {
     const PAD = '\u00A0\u00A0' // make small elements easier to tap. Don't use min-width 'cause it requires display-inline that breaks word-wrapping
     if (typeof label === 'string' && label.length < 3)
         label = PAD + label + PAD
@@ -38,6 +38,7 @@ function Breadcrumb({ path, label, current }:{ current?: boolean, path: string,
     return h(Link, {
         className: 'breadcrumb',
         to: path || '/',
+        title,
         async onClick(ev) {
             if (!current) return
             if (typeof label !== 'string')

diff --git a/frontend/src/BrowseFiles.ts b/frontend/src/BrowseFiles.ts
@@ -205,6 +205,7 @@ const Entry = memo(({ entry, midnight, separator }: EntryProps) => {
         h(CustomCode, { name: 'entry', props: { entry }, ifEmpty: () => h(Fragment, {},
             showFilter && h(Checkbox, {
                 disabled: isLink,
+                'aria-label': entry.name,
                 value: selected[uri],
                 onChange(v){
                     if (v)

diff --git a/frontend/src/FilterBar.ts b/frontend/src/FilterBar.ts
@@ -22,6 +22,7 @@ export function FilterBar() {
         h(Checkbox, {
             value: all,
             tabIndex,
+            'aria-label': "Select all",
             onContextMenu(ev) {
                 ev.preventDefault()
                 select(undefined)

diff --git a/frontend/src/dialog.ts b/frontend/src/dialog.ts
@@ -82,6 +82,7 @@ export function alertDialog(msg: ReactElement | string | Error, type:AlertType='
         title: t(_.capitalize(type)),
         icon: '!',
         onClose: ret.resolve,
+        dialogProps: { role: 'alertdialog' },
         Content
     }))
 

diff --git a/frontend/src/icons.ts b/frontend/src/icons.ts
@@ -50,7 +50,7 @@ document.fonts.ready.then(async ()=> {
 })
 
 interface IconProps { name:string, className?:string, alt?:string, [rest:string]: any }
-export const Icon = memo(({ name, alt, className='', ...props }: IconProps) => {
+export const Icon = memo(({ name, alt='', className='', ...props }: IconProps) => {
     if (!name) return null
     const [emoji, clazz=name] = SYS_ICONS[name] || []
     const { iconsReady } = useSnapState()

diff --git a/frontend/src/menu.ts b/frontend/src/menu.ts
@@ -40,7 +40,7 @@ export function MenuPanel() {
     const list = useMemo(() => Object.keys(selected).map(s => s.slice(ofs, s.endsWith('/') ? -1 : Infinity)).join('*'), [selected])
 
     // avoid useless dom changes while we are still waiting for necessary data
-    const [changingButton, setChangingButton] = useState('')
+    const [changingButton, setChangingButton] = useState<'' | 'upload' | 'delete'>('')
     useEffect(() => {
         if (can_upload !== undefined)
             setChangingButton(showFilter && can_delete ? 'delete' : (can_upload || qs.length > 0) ? 'upload' : '')
@@ -68,8 +68,9 @@ export function MenuPanel() {
                 id: 'upload-button',
                 icon: 'upload',
                 label: t`Upload`,
-                tabIndex: changingButton === 'upload' ? undefined : -1,
-                className: changingButton === 'upload' ? 'show-sliding ' + (uploading ? 'ani-working' : '') : 'before-sliding',
+                disabled: !changingButton,
+                tabIndex: changingButton ? undefined : -1,
+                className: changingButton ? 'show-sliding ' + (uploading ? 'ani-working' : '') : 'before-sliding',
                 onClick: showUpload,
             }),
             h(MenuButton, showFilter && can_delete ? {

diff --git a/shared/dialogs.ts b/shared/dialogs.ts
@@ -101,8 +101,10 @@ function Dialog(d:DialogOptions) {
                         className: 'dialog-icon dialog-closer',
                         onClick() { closeDialog() }
                     }, d.closableContent),
-                d.icon && h('div', { className: 'dialog-icon dialog-type' + (typeof d.icon === 'string' ? ' dialog-icon-text' : '') },
-                    componentOrNode(d.icon)),
+                d.icon && h('div', {
+                    className: 'dialog-icon dialog-type' + (typeof d.icon === 'string' ? ' dialog-icon-text' : ''),
+                    'aria-hidden': true,
+                }, componentOrNode(d.icon)),
                 h('div', { className: 'dialog-title' }, componentOrNode(d.title)),
                 h('div', { className: 'dialog-content' }, h(d.Content || 'div'))
             )