Etusivu Tutki Apua
Kirjaudu sisään
pascal
/
innosetup
peilaus alkaen https://github.com/jrsoftware/issrc.git
2
0
Fork 0
Tiedostot Ongelmat 0 Wiki
Selaa lähdekoodia

Doc: Add role & ARIA attributes to tabs.

Jordan Russell 1 päivä sitten
vanhempi
e4ae933dcc
commit
01bd91eeef
3 muutettua tiedostoa jossa 15 lisäystä ja 14 poistoa
Yhdistetty näkymä Näytä diff tilastot
  1. 7 5
      ISHelp/Staging/contents-template.htm
  2. 2 2
      ISHelp/Staging/contents.css
  3. 6 7
      ISHelp/Staging/contents.js

+ 7 - 5
ISHelp/Staging/contents-template.htm
Näytä tiedosto 

@@ -8,16 +8,18 @@
 
 </head>

 </head>

 <body onload="init_contents(0);">

 <body onload="init_contents(0);">

 

 

-<div id="tabbar">

-<a id="tab-contents" class="selectedtab" href="javascript:select_tab('contents');">Contents</a>

-<a id="tab-index" class="unselectedtab" href="javascript:select_tab('index');">Index</a>

+<div role="tablist" id="tabbar">

+<a role="tab" id="tab-contents" aria-selected="true" aria-controls="tabbody-contents"

+   href="javascript:select_tab('contents');">Contents</a>

+<a role="tab" id="tab-index" aria-selected="false" aria-controls="tabbody-index"

+   href="javascript:select_tab('index');">Index</a>

 </div>

 </div>

 

 

-<div id="tabbody-contents">

+<div role="tabpanel" id="tabbody-contents" tabindex="0" aria-labelledby="tab-contents">

 %CONTENTSTABLES%

 %CONTENTSTABLES%

 </div>

 </div>

 

 

-<div id="tabbody-index" style="display: none">

+<div role="tabpanel" id="tabbody-index" tabindex="0" aria-labelledby="tab-index" hidden="hidden">

 <div style="margin-top: 1em; text-align: center; color: GrayText">Loading...</div>

 <div style="margin-top: 1em; text-align: center; color: GrayText">Loading...</div>

 </div>

 </div>

+ 2 - 2
ISHelp/Staging/contents.css
Näytä tiedosto 

@@ -48,12 +48,12 @@ INPUT {
 
 		padding-inline: calc(10rem/16);

 		padding-inline: calc(10rem/16);

 		user-select: none;

 		user-select: none;

 

 

-		&.selectedtab {

+		&[aria-selected="true"] {

 			font-weight: 600;  /* semibold */

 			font-weight: 600;  /* semibold */

 			border-block-end: 2px solid var(--link-fg-color);

 			border-block-end: 2px solid var(--link-fg-color);

 			cursor: default;

 			cursor: default;

 		}

 		}

-		&.unselectedtab:hover {

+		&:not([aria-selected="true"]):hover {

 			color: var(--link-fg-color);

 			color: var(--link-fg-color);

 		}

 		}

 	}

 	}

+ 6 - 7
ISHelp/Staging/contents.js
Näytä tiedosto 

@@ -206,18 +206,17 @@ function sync_contents()
 
 

 

 function select_tab(newTab)

 function select_tab(newTab)

 {

 {

-	var tabs = ["contents", "index"];

+	const tabs = ["contents", "index"];

 

 

-	var i;

-	for (i = 0; i < tabs.length; i++) {

+	for (let i = 0; i < tabs.length; i++) {

 		if (tabs[i] != newTab) {

 		if (tabs[i] != newTab) {

-			document.getElementById("tab-" + tabs[i]).className = "unselectedtab";

-			document.getElementById("tabbody-" + tabs[i]).style.display = "none";

+			document.getElementById("tab-" + tabs[i]).setAttribute("aria-selected", false);

+			document.getElementById("tabbody-" + tabs[i]).hidden = true;

 		}

 		}

 	}

 	}

 

 

-	document.getElementById("tab-" + newTab).className = "selectedtab";

-	document.getElementById("tabbody-" + newTab).style.display = "";

+	document.getElementById("tab-" + newTab).setAttribute("aria-selected", true);

+	document.getElementById("tabbody-" + newTab).hidden = false;

 

 

 	if (newTab == "index") init_index_tab();

 	if (newTab == "index") init_index_tab();

 }

 }