Feat: Improve accessibility (styleguidist#893)

eduardoinnorway · Mar 29, 2018 · 692e8af · 692e8af
1 parent e3e2112
commit 692e8af
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 4 deletions.
diff --git a/src/rsg-components/TableOfContents/TableOfContentsRenderer.js b/src/rsg-components/TableOfContents/TableOfContentsRenderer.js
@@ -43,10 +43,11 @@ export function TableOfContentsRenderer({ classes, children, searchTerm, onSearc
 						value={searchTerm}
 						className={classes.input}
 						placeholder="Filter by name"
+						aria-label="Filter by name"
 						onChange={event => onSearchTermChange(event.target.value)}
 					/>
 				</div>
-				{children}
+				<nav>{children}</nav>
 			</div>
 		</div>
 	);

diff --git a/src/rsg-components/TableOfContents/__snapshots__/TableOfContents.spec.js.snap b/src/rsg-components/TableOfContents/__snapshots__/TableOfContents.spec.js.snap
@@ -5,11 +5,13 @@ exports[`renderer should render table of contents 1`] = `
   <div>
     <div>
       <input
+        aria-label="Filter by name"
         onChange={[Function]}
         placeholder="Filter by name"
         value="foo"
       />
     </div>
+    <nav />
   </div>
 </div>
 `;

diff --git a/src/rsg-components/ToolbarButton/ToolbarButtonRenderer.js b/src/rsg-components/ToolbarButton/ToolbarButtonRenderer.js
@@ -54,14 +54,14 @@ export function ToolbarButtonRenderer({
 
 	if (href !== undefined) {
 		return (
-			<a href={href} title={title} className={classNames}>
+			<a href={href} title={title} className={classNames} aria-label={title}>
 				{children}
 			</a>
 		);
 	}
 
 	return (
-		<button type="button" onClick={onClick} title={title} className={classNames}>
+		<button type="button" onClick={onClick} title={title} className={classNames} aria-label={title}>
 			{children}
 		</button>
 	);

diff --git a/src/rsg-components/ToolbarButton/__snapshots__/ToolbarButton.spec.js.snap b/src/rsg-components/ToolbarButton/__snapshots__/ToolbarButton.spec.js.snap
@@ -2,6 +2,7 @@
 
 exports[`should render a button 1`] = `
 <button
+  aria-label="Pizza button"
   className="button"
   onClick={[Function]}
   title="Pizza button"
@@ -13,6 +14,7 @@ exports[`should render a button 1`] = `
 
 exports[`should render a link 1`] = `
 <a
+  aria-label="Pizza button"
   className="button"
   href="/foo"
   title="Pizza button"

diff --git a/src/styles/theme.js b/src/styles/theme.js
@@ -11,7 +11,7 @@ export const space = [
 
 export const color = {
 	base: '#333',
-	light: '#999',
+	light: '#767676',
 	lightest: '#ccc',
 	link: '#1978c8',
 	linkHover: '#f28a25',