fix: accessibility
Massimo Melina committed
Jan 19, 2022 at 14:49 UTC
e5b27ea28b33b24e51b08bd26943f50223af423a
3 files changed
+11
-7
config.yaml
+2
-1
@@ -1,3 +1,4 @@
1
+# BEWARE all lines starting with # are disabled, just placeholders. If you need to set the option remove the initial #
2
#port: 80
3
#max_kbps: 1000
4
#max_kbps_per_ip: 500
@@ -5,7 +6,7 @@
6
#error_log:
7
#zip-calculate-size-for-seconds: 1
8
#open_browser_at_start: false
8
-#https_port: 443
9
+#https_port: 443 # https will work only if you give a valid certificate and private key
10
#cert: filepath
11
#private_key: filepath
12
mime:
frontend/src/Breadcrumbs.ts
+3
-3
@@ -10,8 +10,8 @@ export function Breadcrumbs() {
10
const parent = currentPath.split('/').slice(0,-1).join('/')+'/'
11
const breadcrumbs = currentPath ? currentPath.split('/').map(x => [prev = prev + x + '/', decodeURIComponent(x)]) : []
12
return h(Fragment, {},
13
- h(Breadcrumb, { label: hIcon('parent'), path: parent }),
14
- h(Breadcrumb),
13
+ h(Breadcrumb, { label: hIcon('parent', { alt:'parent folder' }), path: parent }),
14
+ h(Breadcrumb, { label: hIcon('home', { alt:'home' }) }),
15
breadcrumbs.map(([path,label]) =>
16
h(Breadcrumb, {
17
key: path,
@@ -34,6 +34,6 @@ function Breadcrumb({ path, label, current }:{ current?: boolean, path?: string,
34
if (current && await confirmDialog('Reload?'))
35
reload?.()
36
}
37
- }, label || hIcon('home') )
37
+ }, label)
38
}
39
frontend/src/icons.ts
+6
-3
@@ -12,7 +12,7 @@ const SYS_ICONS = {
12
archive: 'file-archive:📦',
13
logout: ':🚪',
14
home: ':🏠',
15
- parent: 'level-up mirror️:⬆',
15
+ parent: 'level-up mirror:⬆',
16
folder: ':📂',
17
file: 'doc:📄',
18
spinner: 'spin6 spinner:🎲',
@@ -26,13 +26,16 @@ document.fonts.ready.then(async ()=> {
26
state.iconsClass = ' ' // with fontello we don't need an additional class (unlike google material icons), but the empty space will cause reload
27
})
28
29
-export function Icon({ name, className='', ...props }: { name:string, className:string, style?:any }) {
29
+export function Icon({ name, alt, className='', ...props }: { name:string, className:string, alt?:string, style?:any }) {
30
// @ts-ignore
31
const [clazz,emoji] = (SYS_ICONS[name] || name).split(':')
32
const { iconsClass } = useSnapState()
33
+ className += ' icon ' + (iconsClass ? 'fa-'+(clazz||name) : 'emoji')
34
return h('span',{
35
...props,
35
- className: className+' icon '+(iconsClass ? 'fa-'+(clazz||name) : 'emoji'),
36
+ 'aria-label': alt,
37
+ role: 'img',
38
+ className,
39
}, iconsClass ? null : (emoji||'#'))
40
}
41