diff --git a/README.md b/README.md
index eaf2b20..300a270 100644
--- a/README.md
+++ b/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`.
\ No newline at end of file
diff --git a/demo/src/app.css b/demo/src/app.css
index 30d3f8c..993c0a3 100644
--- a/demo/src/app.css
+++ b/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;
}
diff --git a/demo/src/app.tsx b/demo/src/app.tsx
index ac4085a..09a848a 100644
--- a/demo/src/app.tsx
+++ b/demo/src/app.tsx
@@ -10,7 +10,7 @@ const App: React.FC = () => {
// Return JSX
return (
-
+
React Accessible Dropdown Menu Hook
A simple Hook for creating fully accessible dropdown menus in React
@@ -45,7 +45,10 @@ const App: React.FC = () => {
Once focus is in the menu…
- - The up / down arrow keys allow for navigation through the menu items
+ -
+ The up / down arrow keys allow for navigation through the menu items (including wrapping from first to
+ last and vice versa)
+
- Pressing tab will close the menu and move the focus to the next focusable element
- Pressing escape will close the menu and return the focus to the button
-
@@ -68,7 +71,7 @@ const App: React.FC = () => {
Sparksuite
-
+
);
};