Skip to content

Final tweaks before publishing #52

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Dec 19, 2019
Merged

Final tweaks before publishing #52

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
654bbef
Final tweaks before publishing
WesCossick Dec 19, 2019
3f4f3c9
Tweak the README verbiage
WesCossick Dec 19, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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`.
8 changes: 4 additions & 4 deletions demo/src/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@ h2 {
}

#menu a {
color: #3a8eb8;
color: #29779e;
text-decoration: none;
cursor: pointer;
outline: none;
Expand Down Expand Up @@ -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;
}

Expand All @@ -165,7 +165,7 @@ ul li {

.footer a svg {
font-size: 80%;
color: #777;
color: #767676;
margin-left: 0.1rem;
}

Expand Down
9 changes: 6 additions & 3 deletions demo/src/app.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down Expand Up @@ -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>
Expand All @@ -68,7 +71,7 @@ const App: React.FC = () => {
Sparksuite <i className='fad fa-external-link' />
</a>
</div>
</div>
</main>
);
};

Expand Down