CSR-735 fix for screenreader reading hidden content.
This commit is contained in:
parent
3905ef23d3
commit
e50d025cc3
1 changed files with 47 additions and 29 deletions
|
|
@ -13,11 +13,14 @@
|
||||||
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>
|
||||||
|
<div class="div-to-hide">
|
||||||
<!-- Parse the body text containing <ul> with logic -->
|
<!-- Parse the body text containing <ul> with logic -->
|
||||||
<ul>
|
<ul>
|
||||||
<li v-for="listItem in this.arrayOfListItemsFromBodyText" :key="listItem">
|
<li v-for="listItem in this.arrayOfListItemsFromBodyText" :key="listItem">
|
||||||
<!-- no textLink -->
|
<!-- no textLink -->
|
||||||
<span v-if="!doesCopyContainTextLink(listItem)" v-html="listItem"></span>
|
<span
|
||||||
|
v-if="!doesCopyContainTextLink(listItem)"
|
||||||
|
v-html="listItem"></span>
|
||||||
<!-- with textLink -->
|
<!-- with textLink -->
|
||||||
<template
|
<template
|
||||||
v-else
|
v-else
|
||||||
|
|
@ -43,6 +46,7 @@
|
||||||
v-html="this.buttonFooterCopy"></div>
|
v-html="this.buttonFooterCopy"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</baseInputButton>
|
</baseInputButton>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -159,6 +163,14 @@ export default {
|
||||||
max-height: 1000px;
|
max-height: 1000px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
+ .package-label {
|
||||||
|
.package-specs {
|
||||||
|
.div-to-hide {
|
||||||
|
visibility: visible;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
+ .package-label {
|
+ .package-label {
|
||||||
background-color: $blue-100;
|
background-color: $blue-100;
|
||||||
border: 1px solid $blue;
|
border: 1px solid $blue;
|
||||||
|
|
@ -194,7 +206,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 .5s ease;
|
||||||
|
|
||||||
p {
|
p {
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
|
@ -220,6 +232,12 @@ export default {
|
||||||
font-size: 0.875rem;
|
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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue