fix: make the OCR progress bar accessible (#1445)

* fix: make the OCR progress bar accessible

* fixup
This commit is contained in:
Nolan Lawson 2019-08-28 08:13:24 -07:00 committed by GitHub
parent c8738f17b0
commit 7d4cb1914a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 10 additions and 8 deletions

View File

@ -23,17 +23,12 @@
<button class="extract-text-button" type="button"
on:click="onClick()"
disabled={extracting}
aria-label={extractButtonLabel}
>
<SvgIcon href="{extracting ? '#fa-spinner' : '#fa-magic'}"
className="extract-text-svg {extracting ? 'spin' : ''}"
/>
<span>
{#if extracting}
Extracting text…
{:else}
Extract text from image
{/if}
</span>
<span>{extractButtonText}</span>
</button>
<LengthGauge
length={extractionProgress}
@ -135,7 +130,14 @@
computed: {
length: ({ rawText }) => length(rawText || ''),
overLimit: ({ mediaAltCharLimit, length }) => length > mediaAltCharLimit,
url: ({ media, index }) => get(media, [index, 'data', 'url'])
url: ({ media, index }) => get(media, [index, 'data', 'url']),
extractButtonText: ({ extracting }) => extracting ? 'Extracting text…' : 'Extract text from image',
extractButtonLabel: ({ extractButtonText, extractionProgress, extracting }) => {
if (extracting) {
return `Extracting text (${Math.round(extractionProgress)}% complete)…`
}
return extractButtonText
}
},
methods: {
observe,