jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

CSR-735 fix for screenreader reading hidden content.

Browse source
This commit is contained in:
Bryan Mauger 2023-01-04 16:05:33 -05:00
parent 3905ef23d3
commit e50d025cc3
1 changed files with 47 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

76
src/layouts/quote/service-package-question/service-package-radio/service-package-radio.vue
View file

@ -13,34 +13,38 @@
class="sub-label m-0"
v-if="this.buttonLabelSubCopy"
v-html="this.buttonLabelSubCopy"></p>
<!-- Parse the body text containing <ul> with logic -->
<ul>
<li v-for="listItem in this.arrayOfListItemsFromBodyText" :key="listItem">
<!-- no textLink -->
<span v-if="!doesCopyContainTextLink(listItem)" v-html="listItem"></span>
<!-- with textLink -->
<template
v-else
v-for="copy in splitCopyOnCMSPlaceHolder(listItem)"
:key="copy">
<span v-if="!doesCopyContainTextLink(copy)" v-html="copy"></span>
<span v-else>
<textLink
linkType="text"
:text="getLinkDisplayTextFromCopy(copy)"
href="#!"
data-bs-toggle="modal"
:data-bs-target="'#' + getLinkTargetFromCopy(copy)"
aria-label="Modal window" />
</span>
</template>
</li>
</ul>
<!-- End of body text parsing -->
<div
class="package-footer fw-bold caption ms-n6"
v-if="this.buttonFooterCopy"
v-html="this.buttonFooterCopy"></div>
<div class="div-to-hide">
<!-- Parse the body text containing <ul> with logic -->
<ul>
<li v-for="listItem in this.arrayOfListItemsFromBodyText" :key="listItem">
<!-- no textLink -->
<span
v-if="!doesCopyContainTextLink(listItem)"
v-html="listItem"></span>
<!-- with textLink -->
<template
v-else
v-for="copy in splitCopyOnCMSPlaceHolder(listItem)"
:key="copy">
<span v-if="!doesCopyContainTextLink(copy)" v-html="copy"></span>
<span v-else>
<textLink
linkType="text"
:text="getLinkDisplayTextFromCopy(copy)"
href="#!"
data-bs-toggle="modal"
:data-bs-target="'#' + getLinkTargetFromCopy(copy)"
aria-label="Modal window" />
</span>
</template>
</li>
</ul>
<!-- End of body text parsing -->
<div
class="package-footer fw-bold caption ms-n6"
v-if="this.buttonFooterCopy"
v-html="this.buttonFooterCopy"></div>
</div>
</div>
</div>
</baseInputButton>
@ -159,6 +163,14 @@ export default {
max-height: 1000px;
}
}
+ .package-label {
.package-specs {
.div-to-hide {
visibility: visible;
opacity: 1;
}
}
}
+ .package-label {
background-color: $blue-100;
border: 1px solid $blue;
@ -194,7 +206,7 @@ export default {
flex-direction: column;
width: 100%;
max-height: 0;
transition: all 0.75s ease;
transition: all .5s ease;
p {
font-weight: 500;
@ -220,6 +232,12 @@ export default {
font-size: 0.875rem;
}
}
.div-to-hide {
visibility: hidden;
opacity: 0;
transition: opacity 0.3s ease 0.3s, visibility 0.3s ease-out 0.3s;
}
}
}
}