Merge pull request #1541 from Safelite/CSR-1783-fix-screen-reader-copy-announcement

CSR-1783 add span for screen reader copy.

src/layouts/review/review-block/review-block.vue

@@ -12,7 +12,11 @@
                 class="ml-auto"
                 useLoadingModal
                 @click-event="linkClicked"
-                href="javascript:void(0)" />
+                href="javascript:void(0)">
+                <template v-slot:after-text v-if="editScreenReaderTextCmsWidgetName">
+                    <span class="sr-only"> {{ screenReaderOnlyText }}</span>
+                </template>
+            </textLink>
         </div>
         <div
             class="small review-block-content"
@@ -34,16 +38,21 @@ export default {
         customHeaderText: String,
         // Specifically an array of strings.
         content: Array,
+        editScreenReaderTextCmsWidgetName: String,
     },
     data() {
         return {};
     },
+    computed: {
+        screenReaderOnlyText() {
+            return this.getCmsContent(this.editScreenReaderTextCmsWidgetName, "Text");
+        },
+    },
     methods: {
         linkClicked() {
             this.$emit("edit-clicked");
         },
     },
-    computed: {},
     components: {
         textBlock,
         textLink,

src/layouts/review/review-sections/customer-review/customer-review.vue

@@ -1,5 +1,9 @@
 <template>
-    <reviewBlock :customHeaderText="header" :content="displayContent" @edit-clicked="editClicked" />
+    <reviewBlock
+        editScreenReaderTextCmsWidgetName="EditContactDetailsScreenReader"
+        :customHeaderText="header"
+        :content="displayContent"
+        @edit-clicked="editClicked" />
 </template>
 
 <script>

src/layouts/review/review-sections/damage-review/damage-review.vue

@@ -1,5 +1,6 @@
 <template>
     <reviewBlock
+        editScreenReaderTextCmsWidgetName="EditDamageScreenReader"
         :headerCmsWidgetName="cmsWidgetName"
         :content="displayContent"
         @edit-clicked="editClicked" />

src/layouts/review/review-sections/schedule-review/schedule-review.vue

@@ -1,5 +1,6 @@
 <template>
     <reviewBlock
+        editScreenReaderTextCmsWidgetName="EditAppointmentScreenReader"
         :customHeaderText="headerText"
         :content="displayContent"
         @edit-clicked="editClicked" />

src/layouts/review/review-sections/service-location-review/service-location-review.vue

@@ -1,5 +1,6 @@
 <template>
     <reviewBlock
+        editScreenReaderTextCmsWidgetName="EditLocationScreenReader"
         :headerCmsWidgetName="cmsWidgetName"
         :content="displayContent"
         @edit-clicked="editClicked" />

src/layouts/review/review-sections/service-package-review/service-package-review.vue

@@ -1,5 +1,6 @@
 <template>
     <reviewBlock
+        editScreenReaderTextCmsWidgetName="EditServiceTypeScreenReader"
         :headerCmsWidgetName="packageNameWidget"
         :content="displayContent"
         @edit-clicked="editClicked" />

src/layouts/review/review-sections/vehicle-review/vehicle-review.vue

@@ -1,5 +1,6 @@
 <template>
     <reviewBlock
+        editScreenReaderTextCmsWidgetName="EditVehicleScreenReader"
         :headerCmsWidgetName="cmsWidgetName"
         :content="displayContent"
         @edit-clicked="editClicked" />