Merge pull request #52 from sparksuite/final-tweaks

Final tweaks before publishing

Author: WesCossick

README.md

@@ -57,3 +57,15 @@ Our team carefully studied and adhered to [Web Content Accessibility Guidelines
 - Appears and operates in predictable ways ([WCAG: 3.2](https://www.w3.org/WAI/WCAG21/quickref/#predictable))
 
 For more details, see [this comment](https://github.com/sparksuite/react-accessible-dropdown-menu-hook/issues/8#issuecomment-567568103).
+
+## Local development
+
+To prep a just-cloned or just-cleaned repository for local development, run `yarn dev`.
+
+To test the whole project, run `yarn test`.
+
+To run the demo website locally, run `cd ./demo && yarn start`.
+
+To format the code, run `yarn format` at either the project root or within the `./demo` directory.
+
+To clean the repository (removes any programmatically generated files), run `yarn clean`.

demo/src/app.css

@@ -109,7 +109,7 @@ h2 {
 }
 
 #menu a {
-	color: #3a8eb8;
+	color: #29779e;
 	text-decoration: none;
 	cursor: pointer;
 	outline: none;
@@ -150,12 +150,12 @@ ul li {
 
 .footer {
 	margin-top: 10rem;
-	color: #999;
+	color: #767676;
 	font-size: 0.8rem;
 }
 
 .footer a {
-	color: #3a8eb8;
+	color: #29779e;
 	text-decoration: none;
 }
 
@@ -165,7 +165,7 @@ ul li {
 
 .footer a svg {
 	font-size: 80%;
-	color: #777;
+	color: #767676;
 	margin-left: 0.1rem;
 }
 

demo/src/app.tsx

@@ -10,7 +10,7 @@ const App: React.FC = () => {
 
 	// Return JSX
 	return (
-		<div className='app'>
+		<main className='app'>
 			<h1>React Accessible Dropdown Menu Hook</h1>
 			<h2>A simple Hook for creating fully accessible dropdown menus in React</h2>
 
@@ -45,7 +45,10 @@ const App: React.FC = () => {
 					<em>Once focus is in the menu…</em>
 
 					<ul>
-						<li>The up / down arrow keys allow for navigation through the menu items</li>
+						<li>
+							The up / down arrow keys allow for navigation through the menu items (including wrapping from first to
+							last and vice versa)
+						</li>
 						<li>Pressing tab will close the menu and move the focus to the next focusable element</li>
 						<li>Pressing escape will close the menu and return the focus to the button</li>
 						<li>
@@ -68,7 +71,7 @@ const App: React.FC = () => {
 					Sparksuite <i className='fad fa-external-link' />
 				</a>
 			</div>
-		</div>
+		</main>
 	);
 };