feat(toc,explorer): add accessibility for toggle (#1327)
* Restore focus highlight on explorer toggle button. Remove `unset: all` declaration causing `outline` property to be unset. This allows the default browser focus highlight to be shown. * Fix semantics of expandable sections (explorer, toc). This adds the appropriate aria attributes for the [disclosure pattern](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-image-description/#javascriptandcsssourcecode) and uses `visibility: hidden` to remove the hidden elements from the focus order without disrupting the animations. Further work is needed on the tree view nodes. * Run prettier for SCSS files.
This commit is contained in:
		@@ -1,7 +1,6 @@
 | 
			
		||||
@use "../../styles/variables.scss" as *;
 | 
			
		||||
 | 
			
		||||
button#explorer {
 | 
			
		||||
  all: unset;
 | 
			
		||||
  background-color: transparent;
 | 
			
		||||
  border: none;
 | 
			
		||||
  text-align: left;
 | 
			
		||||
@@ -46,8 +45,18 @@ button#explorer {
 | 
			
		||||
  list-style: none;
 | 
			
		||||
  overflow: hidden;
 | 
			
		||||
  max-height: none;
 | 
			
		||||
  transition: max-height 0.35s ease;
 | 
			
		||||
  transition:
 | 
			
		||||
    max-height 0.35s ease,
 | 
			
		||||
    visibility 0s linear 0s;
 | 
			
		||||
  margin-top: 0.5rem;
 | 
			
		||||
  visibility: visible;
 | 
			
		||||
 | 
			
		||||
  &.collapsed {
 | 
			
		||||
    transition:
 | 
			
		||||
      max-height 0.35s ease,
 | 
			
		||||
      visibility 0s linear 0.35s;
 | 
			
		||||
    visibility: hidden;
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  &.collapsed > .overflow::after {
 | 
			
		||||
    opacity: 0;
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user