[docs] Address docs accessibility concerns (expo#19097)

* adds button, aria-expanded, and aria-hidden * adds focus state to search and theme selector * reorder imports * Adds anchor tags to head entries
preciofishbone · Sep 26, 2022 · c7e9c1b · c7e9c1b
1 parent ba3c392
commit c7e9c1b
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 7 deletions.
diff --git a/docs/ui/components/Header/ThemeSelector.tsx b/docs/ui/components/Header/ThemeSelector.tsx
@@ -76,7 +76,6 @@ const selectStyle = css`
   appearance: none;
   background-color: ${theme.background.default};
   cursor: pointer;
-  outline: none;
 `;
 
 const selectIconStyle = css`

diff --git a/docs/ui/components/Search/styles.ts b/docs/ui/components/Search/styles.ts
@@ -91,7 +91,6 @@ export const DocSearchStyles = css`
   .DocSearch-Button:active,
   .DocSearch-Button:focus {
     color: var(--docsearch-text-color);
-    outline: none;
   }
 
   .DocSearch-Button-Container {

diff --git a/docs/ui/components/Sidebar/SidebarCollapsible.tsx b/docs/ui/components/Sidebar/SidebarCollapsible.tsx
@@ -3,6 +3,7 @@ import { theme, iconSize, spacing, ChevronDownIcon, borderRadius, shadows } from
 import { useRouter } from 'next/router';
 import React, { useState } from 'react';
 
+import { ButtonBase } from '../Button';
 import { CALLOUT } from '../Text';
 
 import stripVersionFromPath from '~/common/stripVersionFromPath';
@@ -60,16 +61,16 @@ export function SidebarCollapsible(props: Props) {
 
   return (
     <>
-      <a css={titleStyle} onClick={toggleIsOpen}>
+      <ButtonBase css={titleStyle} aria-expanded={isOpen ? 'true' : 'false'} onClick={toggleIsOpen}>
         <div css={chevronContainerStyle}>
           <ChevronDownIcon
             size={iconSize.tiny}
             css={[chevronStyle, !isOpen && chevronClosedStyle]}
           />
         </div>
         <CALLOUT weight="medium">{info.name}</CALLOUT>
-      </a>
-      {isOpen && <div>{children}</div>}
+      </ButtonBase>
+      {isOpen && <div aria-hidden={!isOpen ? 'true' : 'false'}>{children}</div>}
     </>
   );
 }
@@ -83,6 +84,7 @@ const titleStyle = css({
   userSelect: 'none',
   transition: '100ms',
   padding: `${spacing[1.5]}px ${spacing[3]}px`,
+  width: '100%',
 
   ':hover': {
     cursor: 'pointer',

diff --git a/docs/ui/components/Sidebar/SidebarHeadEntry.tsx b/docs/ui/components/Sidebar/SidebarHeadEntry.tsx
@@ -14,14 +14,14 @@ type SidebarHeadEntryProps = {
 export const SidebarHeadEntry = ({ href, title, isActive, Icon }: SidebarHeadEntryProps) => {
   return (
     <Link href={href} passHref>
-      <div css={[entryContainerStyle, isActive && activeEntryContainerStyle]}>
+      <a css={[entryContainerStyle, isActive && activeEntryContainerStyle]}>
         <Icon
           css={entryIconStyle}
           color={isActive ? theme.link.default : theme.icon.default}
           width={iconSize.small}
         />
         <span>{title}</span>
-      </div>
+      </a>
     </Link>
   );
 };
@@ -38,6 +38,7 @@ const entryContainerStyle = css({
   alignItems: 'center',
   userSelect: 'none',
   transition: 'color 100ms',
+  textDecoration: 'none',
 
   '&:last-of-type': {
     marginBottom: 0,