From 7d4cb1914a432de5a10db8a8cc5fe558068f5368 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Wed, 28 Aug 2019 08:13:24 -0700
Subject: [PATCH] fix: make the OCR progress bar accessible (#1445)

* fix: make the OCR progress bar accessible

* fixup
---
 .../dialog/components/MediaAltEditor.html      | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/routes/_components/dialog/components/MediaAltEditor.html b/src/routes/_components/dialog/components/MediaAltEditor.html
index e73c68d7..e1d1d564 100644
--- a/src/routes/_components/dialog/components/MediaAltEditor.html
+++ b/src/routes/_components/dialog/components/MediaAltEditor.html
@@ -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,