nishiki/hugo-theme-relearn
1
0
Fork 0
mirror of https://github.com/McShelby/hugo-theme-relearn.git synced 2024-11-23 07:47:54 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

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

5
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 }} 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 }}')" onclick="switchTab('{{ $groupid }}','{{ .itemid }}')"
> >
<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 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> </button>
{{- end }} {{- end }}
</div> </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 ); border-bottom-color: rgba( 255, 255, 255, 1 );
color: rgba( 0, 0, 0, 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 ); background-color: rgba( 255, 255, 255, 1 );
} }
#R-body .tab-content-text { #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) */ 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) */ 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) */ 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; cursor: default;
} }
#R-body .tab-nav-button > *{ #R-body .tab-nav-button > .tab-nav-text{
display: block;
position: relative;
}
#R-body .tab-nav-button.active > *{
border-radius: 1px 1px 0 0;
}
#R-body .tab-nav-button > * > *{
border-bottom-style: solid; border-bottom-style: solid;
border-bottom-width: .2rem; border-bottom-width: .2rem;
display: block;
padding: .2rem .6rem 0 .6rem; padding: .2rem .6rem 0 .6rem;
} }
/* https://stackoverflow.com/a/46452396 */
#R-body .tab-nav-button.active > * > *{ #R-body .tab-nav-button.active > .tab-nav-text{
border-bottom-color: transparent; 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;
} }
@supports (-webkit-text-stroke-width: 0.04ex){
#R-body .tab-nav-button > * > .tab-nav-hidden{ #R-body .tab-nav-button.active > .tab-nav-text{
display: block; text-shadow: -0.03ex 0 0 currentColor, 0.03ex 0 0 currentColor;
font-weight: 500; -webkit-text-stroke-width: 0.04ex;
visibility: hidden; }
}
#R-body .tab-nav-button > * > .tab-nav-text{
display: block;
position: absolute;
top: 0;
} }
#R-body .tab-content{ #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); 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); 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); border-color: var(--VARIABLE-BOX-color);
} }