Change Details

### Background Vector checkbox hack implementations use `visibility: hidden` to hide the elements when the checkbox is not checked. This removes these elements from the accessibility tree, rendering them inaccessible to screenreader users. Because the main menu and collapsed TOC have landmarks in the hidden content itself, this means the landmark disappears when the checkbox is not checked. This is mentioned with the main menu in T311294. This is generally fine for the user menu and most dropdowns, as they are generally entirely contained in a landmark, and hiding the menu contents matches the experience for visual users ### Developer notes The simplest solution is to use `.ui-helper-hidden-accessible`or equivalent CSS on the main menu and collapsed TOC to visually hide the contents. An ideal solution would be to move the landmarks outside of the main menu and collapsed TOC, but that would be difficult considering trigger for the main menu and TOC arent located with the content in the DOM. Vector dropdown menus are generally entirely contained in a landmark so they don't need to be changed, thought it's probably worth investigating at some point if we should consider avoid using visibility: hidden entirely, as maybe screenreader users don't want to hide those elements in general. ### AC [] Main menu and "Site navigation" landmark is still accessible to screenreaders when the menu is closed [] TOC and "Contents navigation" landmark is still accessible to screenreaders when the menu is closed

### Background Vector checkbox hack implementations use `visibility: hidden` to hide the elements when the checkbox is not checked. This removes these elements from the accessibility tree, rendering them inaccessible to screenreader users. Because the main menu and collapsed TOC have landmarks in the hidden content itself, this means the landmark disappears when the checkbox is not checked. This is mentioned with the main menu in T311294. This is generally fine for the user menu and most dropdowns, as they are generally entirely contained in a landmark, and hiding the menu contents matches the experience for visual users ### Developer notes I can see two options here: 1. Update the HTML/CSS to ensure that the nav element is not hidden when the menu is closed. This would involve moving the nav element in the DOM and updating the CSS. This would likely involve cached HTML changes 2. Use `.ui-helper-hidden-accessible`or equivalent CSS on the main menu and collapsed TOC to visually hide the contents. Down the line (especially when the main menu is in a dropdown), a ideal solution would be to ensure the menu trigger is inside the nav landmark. However that's currently not possible considering the triggers aren't located with the content in the DOM. Vector dropdown menus are generally entirely contained in a landmark so they don't need to be changed, thought it's probably worth investigating at some point if we should consider avoid using visibility: hidden entirely, as maybe screenreader users don't want to hide those elements in general. ### AC [] Main menu and "Site navigation" landmark is still accessible to screenreaders when the menu is closed [] TOC and "Contents navigation" landmark is still accessible to screenreaders when the menu is closed

### Background Vector checkbox hack implementations use `visibility: hidden` to hide the elements when the checkbox is not checked. This removes these elements from the accessibility tree, rendering them inaccessible to screenreader users. Because the main menu and collapsed TOC have landmarks in the hidden content itself, this means the landmark disappears when the checkbox is not checked. This is mentioned with the main menu in T311294. This is generally fine for the user menu and most dropdowns, as they are generally entirely contained in a landmark, and hiding the menu contents matches the experience for visual users ### Developer notes The simplest solution is to uI can see two options here: 1. Update the HTML/CSS to ensure that the nav element is not hidden when the menu is closed. This would involve moving the nav element in the DOM and updating the CSS. This would likely involve cached HTML changes 2. Use `.ui-helper-hidden-accessible`or equivalent CSS on the main menu and collapsed TOC to visually hide the contents. Down the line (especially when the main menu is in a dropdown), Ana ideal solution would be to movensure the landmarks outside of the main menu and collapsed TOC,menu trigger is inside the nav landmark. butHowever that would be difficult's currently not possible considering trigger forg the main menu and TOCtriggers arent't located with the content in the DOM. Vector dropdown menus are generally entirely contained in a landmark so they don't need to be changed, thought it's probably worth investigating at some point if we should consider avoid using visibility: hidden entirely, as maybe screenreader users don't want to hide those elements in general. ### AC [] Main menu and "Site navigation" landmark is still accessible to screenreaders when the menu is closed [] TOC and "Contents navigation" landmark is still accessible to screenreaders when the menu is closed