nishiki/hugo-theme-relearn
1
0
Fork 0
mirror of https://github.com/McShelby/hugo-theme-relearn.git synced 2024-11-27 01:33:04 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

tabs: improve a11y by removing duplicate hidden title #662

Browse source
This commit is contained in:
Sören Weber 2023-10-01 21:06:39 +02:00
parent 9baa4b39bc
commit 00175972d9
No known key found for this signature in database
GPG key ID: BEC6D55545451B6D
5 changed files with 17 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
layouts/partials/shortcodes/tabs.html
View file

@ -65,10 +65,7 @@
class="tab-nav-button tab-panel-style cstyle {{ .style }}{{ cond (eq $idx 0) " active" ""}}"{{ if .color }} style="--VARIABLE-BOX-color: {{ .color }};"{{ end }}
onclick="switchTab('{{ $groupid }}','{{ .itemid }}')"
>
<span>
<span class="tab-nav-hidden">{{ if .icon }}<i class="{{ .icon }}"></i>{{ end }}{{ if and .icon .title }} {{ end }}{{ .title | $page.RenderString }}{{ if (not .title) }}&#8203;{{ end }}</span>
<span class="tab-nav-text">{{ if .icon }}<i class="{{ .icon }}"></i>{{ end }}{{ if and .icon .title }} {{ end }}{{ .title | $page.RenderString }}{{ if (not .title) }}&#8203;{{ end }}</span>
</span>
</button>
{{- end }}
</div>

2
static/css/format-print.css
View file

@ -160,7 +160,7 @@ div.box > .box-content {
border-bottom-color: rgba( 255, 255, 255, 1 );
color: rgba( 0, 0, 0, 1 );
}
#R-body .tab-nav-button.active > * {
#R-body .tab-nav-button.active > .tab-nav-text {
background-color: rgba( 255, 255, 255, 1 );
}
#R-body .tab-content-text {

4
static/css/ie.css
View file

@ -810,11 +810,11 @@
color: rgba( 16, 16, 16, 1 ); /* var(--VARIABLE-BOX-TEXT-color) */
}
#R-body .tab-nav-button.active > *{
#R-body .tab-nav-button.active > .tab-nav-text{
background-color: rgba( 255, 255, 255, 1 ); /* var(--VARIABLE-BOX-BG-color) */
}
#R-body .tab-nav-button > * > *{
#R-body .tab-nav-button > .tab-nav-text{
border-color: rgba( 134, 134, 134, .4 ); /* var(--VARIABLE-BOX-color) */
}

35
static/css/theme.css
View file

@ -2084,36 +2084,23 @@ html[dir="rtl"] #R-sidebar ul.collapsible-menu > li > label > i.fa-chevron-right
cursor: default;
}
#R-body .tab-nav-button > *{
display: block;
position: relative;
}
#R-body .tab-nav-button.active > *{
border-radius: 1px 1px 0 0;
}
#R-body .tab-nav-button > * > *{
#R-body .tab-nav-button > .tab-nav-text{
border-bottom-style: solid;
border-bottom-width: .2rem;
display: block;
padding: .2rem .6rem 0 .6rem;
}
#R-body .tab-nav-button.active > * > *{
/* https://stackoverflow.com/a/46452396 */
#R-body .tab-nav-button.active > .tab-nav-text{
border-bottom-color: transparent;
font-weight: 500;
border-radius: 1px 1px 0 0;
text-shadow: -0.06ex 0 0 currentColor, 0.06ex 0 0 currentColor;
}
#R-body .tab-nav-button > * > .tab-nav-hidden{
display: block;
font-weight: 500;
visibility: hidden;
}
#R-body .tab-nav-button > * > .tab-nav-text{
display: block;
position: absolute;
top: 0;
@supports (-webkit-text-stroke-width: 0.04ex){
#R-body .tab-nav-button.active > .tab-nav-text{
text-shadow: -0.03ex 0 0 currentColor, 0.03ex 0 0 currentColor;
-webkit-text-stroke-width: 0.04ex;
}
}
#R-body .tab-content{

4
static/css/variant.css
View file

@ -408,11 +408,11 @@ article ul > li > input[type="checkbox"] {
color: var(--VARIABLE-BOX-TEXT-color);
}
#R-body .tab-nav-button.active > *{
#R-body .tab-nav-button.active > .tab-nav-text{
background-color: var(--VARIABLE-BOX-BG-color);
}
#R-body .tab-nav-button > * > *{
#R-body .tab-nav-button > .tab-nav-text{
border-color: var(--VARIABLE-BOX-color);
}