amirho/react.dev
1
0
Fork 0
mirror of https://github.com/reactjs/react.dev.git synced 2026-02-23 20:23:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve a11y of docs

Browse Source 
* Add placeholder/label to input on homepage demo
* Mark sections with aria-expanded

![screenshot of markup with aria-expanded for sections](https://user-images.githubusercontent.com/6820/36941651-2f851bee-1f15-11e8-8090-e93e596b3d11.png)
This commit is contained in:
Sophie Alpert
2018-03-03 19:01:18 -08:00
parent 8485e9373f
commit 96010b5d97
2 changed files with 100 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
content/home/examples/an-application.js
View File

@@ -13,6 +13,8 @@ class TodoApp extends React.Component {
<TodoList items={this.state.items} />
<form onSubmit={this.handleSubmit}>
<input
aria-label="Add a new to-do item"
placeholder="Add a to-do..."
onChange={this.handleChange}
value={this.state.text}
/>
@@ -56,4 +58,4 @@ class TodoList extends React.Component {
}
}
ReactDOM.render(<TodoApp />, mountNode);
ReactDOM.render(<TodoApp />, mountNode);

184
src/templates/components/Sidebar/Section.js
View File

@@ -10,94 +10,104 @@ import isItemActive from 'utils/isItemActive';
import MetaTitle from '../MetaTitle';
import ChevronSvg from '../ChevronSvg';
const Section = ({
activeItemId,
createLink,
isActive,
isScrollSync,
location,
onLinkClick,
onSectionTitleClick,
section,
}) => (
<div>
<button
css={{
cursor: 'pointer',
backgroundColor: 'transparent',
border: 0,
marginTop: 10,
}}
onClick={onSectionTitleClick}>
<MetaTitle
cssProps={{
[media.greaterThan('small')]: {
color: isActive ? colors.text : colors.subtle,
':hover': {
color: colors.text,
},
},
}}>
{section.title}
<ChevronSvg
cssProps={{
marginLeft: 7,
transform: isActive ? 'rotateX(180deg)' : 'rotateX(0deg)',
transition: 'transform 0.2s ease',
[media.lessThan('small')]: {
display: 'none',
},
}}
/>
</MetaTitle>
</button>
<ul
css={{
marginBottom: 10,
[media.greaterThan('small')]: {
display: isActive ? 'block' : 'none',
},
}}>
{section.items.map(item => (
<li
key={item.id}
class Section extends React.Component {
state = {uid: ('' + Math.random()).replace(/\D/g, '')};
render() {
const {
activeItemId,
createLink,
isActive,
isScrollSync,
location,
onLinkClick,
onSectionTitleClick,
section,
} = this.props;
const uid = 'section_' + this.state.uid;
return (
<div>
<button
aria-expanded={isActive}
aria-controls={uid}
css={{
marginTop: 5,
}}>
{createLink({
isActive: isScrollSync
? activeItemId === item.id
: isItemActive(location, item),
item,
location,
onLinkClick,
section,
})}
cursor: 'pointer',
backgroundColor: 'transparent',
border: 0,
marginTop: 10,
}}
onClick={onSectionTitleClick}>
<MetaTitle
cssProps={{
[media.greaterThan('small')]: {
color: isActive ? colors.text : colors.subtle,
{item.subitems && (
<ul css={{marginLeft: 20}}>
{item.subitems.map(subitem => (
<li key={subitem.id}>
{createLink({
isActive: isScrollSync
? activeItemId === subitem.id
: isItemActive(location, subitem),
item: subitem,
location,
onLinkClick,
section,
})}
</li>
))}
</ul>
)}
</li>
))}
</ul>
</div>
);
':hover': {
color: colors.text,
},
},
}}>
{section.title}
<ChevronSvg
cssProps={{
marginLeft: 7,
transform: isActive ? 'rotateX(180deg)' : 'rotateX(0deg)',
transition: 'transform 0.2s ease',
[media.lessThan('small')]: {
display: 'none',
},
}}
/>
</MetaTitle>
</button>
<ul
id={uid}
css={{
marginBottom: 10,
[media.greaterThan('small')]: {
display: isActive ? 'block' : 'none',
},
}}>
{section.items.map(item => (
<li
key={item.id}
css={{
marginTop: 5,
}}>
{createLink({
isActive: isScrollSync
? activeItemId === item.id
: isItemActive(location, item),
item,
location,
onLinkClick,
section,
})}
{item.subitems && (
<ul css={{marginLeft: 20}}>
{item.subitems.map(subitem => (
<li key={subitem.id}>
{createLink({
isActive: isScrollSync
? activeItemId === subitem.id
: isItemActive(location, subitem),
item: subitem,
location,
onLinkClick,
section,
})}
</li>
))}
</ul>
)}
</li>
))}
</ul>
</div>
);
}
}
export default Section;