Skip to content

Commit

Permalink
[docs] Address docs accessibility concerns (expo#19097)
Browse files Browse the repository at this point in the history
* adds button, aria-expanded, and aria-hidden

* adds focus state to search and theme selector

* reorder imports

* Adds anchor tags to head entries
  • Loading branch information
jonsamp authored and Ddv0623 committed Sep 26, 2022
1 parent ba3c392 commit c7e9c1b
Show file tree
Hide file tree
Showing 4 changed files with 8 additions and 7 deletions.
1 change: 0 additions & 1 deletion docs/ui/components/Header/ThemeSelector.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,6 @@ const selectStyle = css`
appearance: none;
background-color: ${theme.background.default};
cursor: pointer;
outline: none;
`;

const selectIconStyle = css`
Expand Down
1 change: 0 additions & 1 deletion docs/ui/components/Search/styles.ts
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,6 @@ export const DocSearchStyles = css`
.DocSearch-Button:active,
.DocSearch-Button:focus {
color: var(--docsearch-text-color);
outline: none;
}
.DocSearch-Button-Container {
Expand Down
8 changes: 5 additions & 3 deletions docs/ui/components/Sidebar/SidebarCollapsible.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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>}
</>
);
}
Expand All @@ -83,6 +84,7 @@ const titleStyle = css({
userSelect: 'none',
transition: '100ms',
padding: `${spacing[1.5]}px ${spacing[3]}px`,
width: '100%',

':hover': {
cursor: 'pointer',
Expand Down
5 changes: 3 additions & 2 deletions docs/ui/components/Sidebar/SidebarHeadEntry.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
};
Expand All @@ -38,6 +38,7 @@ const entryContainerStyle = css({
alignItems: 'center',
userSelect: 'none',
transition: 'color 100ms',
textDecoration: 'none',

'&:last-of-type': {
marginBottom: 0,
Expand Down

0 comments on commit c7e9c1b

Please sign in to comment.