fix(a11y): fix a11y issues caught by lighthouse (#729)
This commit is contained in:
parent
03d883423c
commit
ef32bfb278
|
@ -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}
|
||||||
|
|
|
@ -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: ''
|
||||||
}),
|
}),
|
||||||
|
|
|
@ -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(
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in a new issue