11/**
2- * Check for elements with a navButton class, which indicates the sidebar has finished loading.
2+ * Check for elements with a `toc--button` class, which indicates the sidebar has finished loading.
33 */
44async function dispatchNavigationLoadedEvent ( ) {
5- while ( ! document . querySelectorAll ( '.navButton ' ) . length > 0 ) {
5+ while ( ! document . querySelectorAll ( '.toc--button ' ) . length > 0 ) {
66 await new Promise ( resolve => setTimeout ( resolve , 100 ) ) ;
77 }
88 window . dispatchEvent ( new Event ( 'navigationLoaded' ) ) ;
@@ -12,14 +12,14 @@ document.addEventListener('DOMContentLoaded', dispatchNavigationLoadedEvent);
1212if ( document . readyState === "interactive" || document . readyState === "complete" ) { dispatchNavigationLoadedEvent ( ) }
1313
1414/**
15- * Apply "skip to main content" buttons after each active left sidebar `sideMenuPart `.
15+ * Apply "skip to main content" buttons after each active left sidebar `toc--part `.
1616 * These are invisible and only accessible via keyboard
1717 * Fixes accessibility violation: "Provide a mechanism for skipping past repetitive content"
1818 */
1919function applySkipLinks ( ) {
2020 document . querySelectorAll ( '#content' ) . forEach ( function ( contentDiv ) {
21- contentDiv . setAttribute ( 'role' , 'main' ) ;
22- contentDiv . setAttribute ( 'tabindex' , '-1' ) ;
21+ contentDiv . setAttribute ( 'role' , 'main' ) ;
22+ contentDiv . setAttribute ( 'tabindex' , '-1' ) ;
2323 } ) ;
2424
2525 function insertSkipLink ( element ) {
@@ -42,20 +42,20 @@ function applySkipLinks() {
4242
4343 function handleChanges ( mutationsList ) {
4444 for ( const mutation of mutationsList ) {
45- if ( mutation . type === 'attributes' && mutation . target . classList . contains ( 'sideMenuPart ' ) && ! mutation . target . classList . contains ( 'hidden ' ) ) {
45+ if ( mutation . type === 'attributes' && mutation . target . classList . contains ( 'toc--part ' ) && ! mutation . target . classList . contains ( 'toc--part_hidden ' ) ) {
4646 insertSkipLink ( mutation . target ) ;
4747 }
4848 }
49+ }
4950
50- // Insert a skip link on all sideMenuParts with [data-active] property
51- document . querySelectorAll ( '.sideMenuPart[data-active] ' ) . forEach ( function ( sideMenuPart ) {
52- insertSkipLink ( sideMenuPart )
53- } ) ;
51+ // Insert a skip link on all visible toc-parts
52+ document . querySelectorAll ( '.toc--part:not(.toc--part_hidden) ' ) . forEach ( function ( sideMenuPart ) {
53+ insertSkipLink ( sideMenuPart )
54+ } ) ;
5455
55- // Insert a skip link on the first sideMenuPart
56- const firstSideMenuPart = document . getElementById ( "sideMenu" ) . children [ 0 ] . querySelectorAll ( ".sideMenuPart" ) [ 0 ]
57- insertSkipLink ( firstSideMenuPart )
58- }
56+ // Insert a skip link on the first toc-part, regardless of visibility.
57+ const firstSideMenuPart = document . getElementById ( "sideMenu" ) . children [ 0 ] . querySelectorAll ( ".toc--part" ) [ 0 ]
58+ insertSkipLink ( firstSideMenuPart )
5959
6060 const observer = new MutationObserver ( handleChanges ) ;
6161 const observerConfig = {
@@ -68,59 +68,14 @@ function applySkipLinks() {
6868}
6969window . addEventListener ( 'navigationLoaded' , applySkipLinks ) ;
7070
71- /**
72- * Ensure `navButton` elements are interactable and have proper accessibility properties
73- * Fixes accessibilty violation: "Ensure all interactive functionality is operable with the keyboard"
74- */
75- function ensureNavButtonInteractable ( ) {
76- const navButtons = document . querySelectorAll ( '.navButton' ) ;
77-
78- navButtons . forEach ( function ( navButton ) {
79- if ( navButton . hasAttribute ( 'aria-expanded' ) ) {
80- return ;
81- }
82-
83- // Make the navButton focusable, add accessibility information
84- navButton . setAttribute ( 'tabindex' , '0' ) ;
85- navButton . setAttribute ( 'role' , 'button' ) ;
86-
87- const sideMenuPartParent = navButton . closest ( ".sideMenuPart" )
88- const navButtonExpanded = sideMenuPartParent ? ( sideMenuPartParent . classList . contains ( 'hidden' ) ? 'false' : 'true' ) : 'false'
89- navButton . setAttribute ( 'aria-expanded' , navButtonExpanded ) ;
90-
91- // Grab the page ID, use it for aria-label and aria-controls
92- const sectionName = navButton . parentElement . parentElement . getAttribute ( 'pageid' )
93- // Remove the page ID suffix auto-generated by Dokka
94- const cleanedSectionName = sectionName . substring ( 0 , sectionName . indexOf ( "////PointingToDeclaration" ) )
95- navButton . setAttribute ( 'aria-label' , cleanedSectionName ) ;
96-
97- const sectionID = navButton . parentElement . parentElement . id
98- navButton . setAttribute ( 'aria-controls' , sectionID ) ;
99-
100- // Add event listener for Enter and Space keys
101- navButton . addEventListener ( 'keydown' , function ( event ) {
102- if ( event . key === 'Enter' || event . key === ' ' ) {
103- event . preventDefault ( ) ; // Prevent the default action to avoid navigation
104- this . click ( ) ; // Trigger the onclick event
105- }
106- } ) ;
107-
108- // Update aria-expanded attribute on click
109- navButton . addEventListener ( 'click' , function ( ) {
110- const isExpanded = navButton . getAttribute ( 'aria-expanded' ) === 'true' ;
111- navButton . setAttribute ( 'aria-expanded' , ( ! isExpanded ) . toString ( ) ) ;
112- } ) ;
113- } ) ;
114- }
115- window . addEventListener ( 'navigationLoaded' , ensureNavButtonInteractable ) ;
116-
11771/**
11872 * Ensure that content (specifically, code blocks) reflows on small page sizes.
11973 * Fixes accessibility violation: "Ensure pages reflow without requiring two-dimensional scrolling without loss of content or functionality"
12074 */
12175function ensureContentReflow ( ) {
12276 // Ensure `content` sections are reflowable
12377 document . querySelectorAll ( '.content[data-togglable]' ) . forEach ( function ( content ) {
78+ console . log ( "Adding content.style.display = 'block' to " + content . id )
12479 content . style . display = 'block'
12580 } ) ;
12681}
0 commit comments