From 96010b5d9772518d881db07d5f89c2daece4ee20 Mon Sep 17 00:00:00 2001
From: Sophie Alpert <sophiebits@fb.com>
Date: Sat, 3 Mar 2018 19:01:18 -0800
Subject: [PATCH] Improve a11y of docs

* 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)
---
 content/home/examples/an-application.js     |   4 +-
 src/templates/components/Sidebar/Section.js | 178 +++++++++++---------
 2 files changed, 97 insertions(+), 85 deletions(-)

diff --git a/content/home/examples/an-application.js b/content/home/examples/an-application.js
index 7b516861..ec855876 100644
--- a/content/home/examples/an-application.js
+++ b/content/home/examples/an-application.js
@@ -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);
\ No newline at end of file
+ReactDOM.render(<TodoApp />, mountNode);
diff --git a/src/templates/components/Sidebar/Section.js b/src/templates/components/Sidebar/Section.js
index bf6db263..2738c853 100644
--- a/src/templates/components/Sidebar/Section.js
+++ b/src/templates/components/Sidebar/Section.js
@@ -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',
-            },
+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={{
+            cursor: 'pointer',
+            backgroundColor: 'transparent',
+            border: 0,
+            marginTop: 10,
           }}
-        />
-      </MetaTitle>
-    </button>
-    <ul
-      css={{
-        marginBottom: 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.greaterThan('small')]: {
-          display: isActive ? 'block' : 'none',
-        },
-      }}>
-      {section.items.map(item => (
-        <li
-          key={item.id}
+                [media.lessThan('small')]: {
+                  display: 'none',
+                },
+              }}
+            />
+          </MetaTitle>
+        </button>
+        <ul
+          id={uid}
           css={{
-            marginTop: 5,
+            marginBottom: 10,
+
+            [media.greaterThan('small')]: {
+              display: isActive ? 'block' : 'none',
+            },
           }}>
-          {createLink({
-            isActive: isScrollSync
-              ? activeItemId === item.id
-              : isItemActive(location, item),
-            item,
-            location,
-            onLinkClick,
-            section,
-          })}
+          {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>
-);
+              {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;