Change Details

### Background Vector checkbox hack implementations generally 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 both 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. Instead we want to use `.ui-helper-hidden-accessible`or equivalent CSS to only visually hide the main menu and collapsed TOC ### Developer notes Vector dropdown menus are generally entirely contained in a landmark, so they don't need to be changed. ### 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 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 generally 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 both 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 T311294rendering them inaccessible to screenreader users. Instead we want to use `.ui-helper-hidden-accessible`or equivalent CSS to only visually hide the main menu and collapsed TOCBecause 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, so theyas maybe screenreader users don't need to be changedwant 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