fix(a11y): fix a11y issues caught by lighthouse (#729)

This commit is contained in:
Nolan Lawson 2018-12-04 22:31:46 -08:00 committed by GitHub
parent 03d883423c
commit ef32bfb278
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 10 additions and 5 deletions

View File

@ -2,7 +2,7 @@
<button type="button" <button type="button"
title={label} title={label}
aria-label={label} aria-label={label}
aria-pressed={pressable ? !!pressed : ''} aria-pressed={pressable ? !!pressed : void 0}
class={computedClass} class={computedClass}
{disabled} {disabled}
delegate-key={delegateKey} delegate-key={delegateKey}
@ -15,7 +15,7 @@
<button type="button" <button type="button"
title={label} title={label}
aria-label={label} aria-label={label}
aria-pressed={pressable ? !!pressed : ''} aria-pressed={pressable ? !!pressed : void 0}
class={computedClass} class={computedClass}
focus-key={focusKey || ''} focus-key={focusKey || ''}
{disabled} {disabled}
@ -141,4 +141,4 @@
} }
} }
} }
</script> </script>

View File

@ -33,7 +33,7 @@
width: void 0, width: void 0,
height: void 0, height: void 0,
className: '', className: '',
ariaHidden: '', ariaHidden: false,
alt: '', alt: '',
title: '' title: ''
}), }),

View File

@ -48,7 +48,8 @@
alt: '', alt: '',
title: '', title: '',
mouseOver: false, mouseOver: false,
loaded: false loaded: false,
ariaHidden: false
}), }),
computed: { computed: {
computedClass: ({ className, src, staticSrc, isLink }) => (classname( computedClass: ({ className, src, staticSrc, isLink }) => (classname(

View File

@ -1,4 +1,5 @@
<textarea <textarea
id="the-compose-box-input-{realm}"
class="compose-box-input" class="compose-box-input"
placeholder="What's on your mind?" placeholder="What's on your mind?"
ref:textarea ref:textarea
@ -8,6 +9,9 @@
on:selectionChange="onSelectionChange(event)" on:selectionChange="onSelectionChange(event)"
on:keydown="onKeydown(event)" on:keydown="onKeydown(event)"
></textarea> ></textarea>
<label for="the-compose-box-input-{realm}" class="sr-only">
What's on your mind?
</label>
<style> <style>
.compose-box-input { .compose-box-input {
grid-area: input; grid-area: input;