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

Merge pull request #915 from Safelite/CSR-735-fix-screenreader-hidden-content

Browse source 
CSR-735 fix for screenreader reading hidden content.
This commit is contained in:
bmauger 2023-01-05 11:05:17 -05:00 committed by GitHub
commit 447a24a356
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 56 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -13,34 +13,38 @@
class="sub-label m-0" class="sub-label m-0"
v-if="this.buttonLabelSubCopy" v-if="this.buttonLabelSubCopy"
v-html="this.buttonLabelSubCopy"></p> v-html="this.buttonLabelSubCopy"></p>
<!-- Parse the body text containing <ul> with logic --> <div class="hide-when-closed">
<ul> <!-- Parse the body text containing <ul> with logic -->
<li v-for="listItem in this.arrayOfListItemsFromBodyText" :key="listItem"> <ul>
<!-- no textLink --> <li v-for="listItem in this.arrayOfListItemsFromBodyText" :key="listItem">
<span v-if="!doesCopyContainTextLink(listItem)" v-html="listItem"></span> <!-- no textLink -->
<!-- with textLink --> <span
<template v-if="!doesCopyContainTextLink(listItem)"
v-else v-html="listItem"></span>
v-for="copy in splitCopyOnCMSPlaceHolder(listItem)" <!-- with textLink -->
:key="copy"> <template
<span v-if="!doesCopyContainTextLink(copy)" v-html="copy"></span> v-else
<span v-else> v-for="copy in splitCopyOnCMSPlaceHolder(listItem)"
<textLink :key="copy">
linkType="text" <span v-if="!doesCopyContainTextLink(copy)" v-html="copy"></span>
:text="getLinkDisplayTextFromCopy(copy)" <span v-else>
href="#!" <textLink
data-bs-toggle="modal" linkType="text"
:data-bs-target="'#' + getLinkTargetFromCopy(copy)" :text="getLinkDisplayTextFromCopy(copy)"
aria-label="Modal window" /> href="#!"
</span> data-bs-toggle="modal"
</template> :data-bs-target="'#' + getLinkTargetFromCopy(copy)"
</li> aria-label="Modal window" />
</ul> </span>
<!-- End of body text parsing --> </template>
<div </li>
class="package-footer fw-bold caption ms-n6" </ul>
v-if="this.buttonFooterCopy" <!-- End of body text parsing -->
v-html="this.buttonFooterCopy"></div> <div
class="package-footer fw-bold caption ms-n6"
v-if="this.buttonFooterCopy"
v-html="this.buttonFooterCopy"></div>
</div>
</div> </div>
</div> </div>
</baseInputButton> </baseInputButton>
@ -114,10 +118,10 @@ export default {
0px 4px 24px -8px rgba(0, 0, 0, 0.2); 0px 4px 24px -8px rgba(0, 0, 0, 0.2);
border-radius: 0.5rem; border-radius: 0.5rem;
overflow: hidden; overflow: hidden;
min-height: 58px; min-height: 60px;
&.has-subheader { &.has-subheader {
min-height: 78px; min-height: 80px;
} }
&:before { &:before {
@ -159,6 +163,13 @@ export default {
max-height: 1000px; max-height: 1000px;
} }
} }
+ .package-label {
.package-specs {
.hide-when-closed {
display: block;
}
}
}
+ .package-label { + .package-label {
background-color: $blue-100; background-color: $blue-100;
border: 1px solid $blue; border: 1px solid $blue;
@ -194,7 +205,7 @@ export default {
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
max-height: 0; max-height: 0;
transition: all 0.75s ease; transition: all 0.5s ease;
p { p {
font-weight: 500; font-weight: 500;
@ -220,6 +231,20 @@ export default {
font-size: 0.875rem; font-size: 0.875rem;
} }
} }
@keyframes slideaway {
from {
display: block;
}
to {
transform: translateY(40px);
opacity: 0;
}
}
.hide-when-closed {
display: none;
}
} }
} }
} }