From 2fbb211f3e63b4d07198f5c81e36ce7e09fe0462 Mon Sep 17 00:00:00 2001 From: Wes Cossick Date: Thu, 19 Dec 2019 11:51:44 -0600 Subject: [PATCH 1/8] Build out the demo website --- demo/public/index.html | 1 + demo/src/app.css | 130 ++++++++++++++++++++++++++++++++++++ demo/src/app.tsx | 37 ++++++---- test/puppeteer/demo.test.ts | 2 +- 4 files changed, 156 insertions(+), 14 deletions(-) diff --git a/demo/public/index.html b/demo/public/index.html index 3b3e2f4..dafecfb 100644 --- a/demo/public/index.html +++ b/demo/public/index.html @@ -5,6 +5,7 @@ React Accessible Dropdown Menu Hook + diff --git a/demo/src/app.css b/demo/src/app.css index f11668b..da636b7 100644 --- a/demo/src/app.css +++ b/demo/src/app.css @@ -14,3 +14,133 @@ body { .app { text-align: center; } + +h1 { + margin: 0; + padding: 0 2rem; + margin-top: 4rem; + line-height: 1; + color: #333; + font-weight: 500; + font-size: 3rem; +} + +h2 { + margin: 0; + padding: 0 2rem; + margin-top: 0.5rem; + line-height: 1; + color: #555; + font-weight: 300; + font-size: 1.5rem; + font-style: italic; +} + +#menu-button { + appearance: none; + width: 10rem; + margin: 3rem auto 0; + padding: 1rem 0; + background: #eee; + outline: none; + border: 1px solid #ddd; + border-radius: 0.2rem; + font-size: 1.5rem; + color: #000; + font-weight: 300; + cursor: pointer; + position: relative; + line-height: 1; + transition: all 0.2s ease; + display: flex; +} + +#menu-button:hover { + background: #fafafa; +} + +#menu-button:focus { + box-shadow: 0 0 0 0.15rem #fff, 0 0 0 0.3rem #bbb; +} + +#menu-button span { + flex-grow: 1; + text-align: center; +} + +#menu-button svg { + margin-right: 1rem; + color: #999; +} + +#menu { + background: #fff; + margin: auto; + margin-top: 0.25rem; + padding: 1rem 1.5rem; + border: 1px solid #eee; + border-radius: 0.25rem; + box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.1); + opacity: 0; + visibility: hidden; + transition: all 0.2s ease; + will-change: transform; + text-align: left; + position: absolute; + left: 50%; + transform: translateX(-50%); + z-index: 2; +} + +#menu.visible { + transform: translateX(-50%), translateY(-.3rem); + visibility: visible; + opacity: 1; +} + +#menu a { + display: block; + font-size: 1.2rem; + padding: 0.25rem; +} + +#menu a { + color: #3a8eb8; + text-decoration: none; + cursor: pointer; + outline: none; + border: 0.1rem solid transparent; + border-radius: 0.2rem; +} + +#menu a:hover { + text-decoration: underline; +} + +#menu a:focus { + border-color: #3a8eb8; +} + +#menu a svg { + color: #777; + margin-right: 0.5rem; +} + +.footer { + margin-top: 10rem; + color: #999; + font-size: 0.8rem; +} + +.footer a { + color: #3a8eb8; + text-decoration: none; +} + +.footer a:hover { + text-decoration: underline; +} + +.footer a:not(:last-child) { + margin-right: 2rem; +} diff --git a/demo/src/app.tsx b/demo/src/app.tsx index 27d8703..2642b45 100644 --- a/demo/src/app.tsx +++ b/demo/src/app.tsx @@ -5,31 +5,42 @@ import useDropdownMenu from 'react-accessible-dropdown-menu-hook'; // Functional component const App: React.FC = () => { + // Use the Hook const [buttonProps, itemProps, isOpen] = useDropdownMenu(3); + // Return JSX return (
- +

React Accessible Dropdown Menu Hook

+

A simple Hook for creating fully accessible dropdown menus in React

- ); }; diff --git a/test/puppeteer/demo.test.ts b/test/puppeteer/demo.test.ts index e1121ba..1e2a060 100644 --- a/test/puppeteer/demo.test.ts +++ b/test/puppeteer/demo.test.ts @@ -38,7 +38,7 @@ it('focuses on the next item in the tab order after pressing tab', async () => { await keyboard.down('Enter'); await keyboard.down('Tab'); - expect(await currentFocusID()).toBe('second-button'); + expect(await currentFocusID()).toBe('first-footer-link'); }); it('focuses on the previous item in the tab order after pressing shift-tab', async () => { From 02ea3b9e18666a1373fd70971644eb73bee2a933 Mon Sep 17 00:00:00 2001 From: Wes Cossick Date: Thu, 19 Dec 2019 11:59:57 -0600 Subject: [PATCH 2/8] Slight tweaks to styling --- demo/src/app.css | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/demo/src/app.css b/demo/src/app.css index da636b7..cfe3ccb 100644 --- a/demo/src/app.css +++ b/demo/src/app.css @@ -76,9 +76,9 @@ h2 { #menu { background: #fff; margin: auto; - margin-top: 0.25rem; - padding: 1rem 1.5rem; - border: 1px solid #eee; + margin-top: 0.4rem; + padding: 0.8rem 1rem; + border: 1px solid #ddd; border-radius: 0.25rem; box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.1); opacity: 0; @@ -87,8 +87,11 @@ h2 { will-change: transform; text-align: left; position: absolute; - left: 50%; - transform: translateX(-50%); + width: fit-content; + left: 0; + right: 0; + margin-left: auto; + margin-right: auto; z-index: 2; } From 47167a681d874d4986fb68e6f581573bceaecf40 Mon Sep 17 00:00:00 2001 From: Wes Cossick Date: Thu, 19 Dec 2019 12:00:04 -0600 Subject: [PATCH 3/8] Format the code --- demo/src/app.css | 14 +++++++------- demo/src/app.tsx | 13 +++++++++---- 2 files changed, 16 insertions(+), 11 deletions(-) diff --git a/demo/src/app.css b/demo/src/app.css index cfe3ccb..5caa873 100644 --- a/demo/src/app.css +++ b/demo/src/app.css @@ -82,22 +82,22 @@ h2 { border-radius: 0.25rem; box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.1); opacity: 0; - visibility: hidden; + visibility: hidden; transition: all 0.2s ease; will-change: transform; text-align: left; position: absolute; width: fit-content; - left: 0; - right: 0; - margin-left: auto; - margin-right: auto; + left: 0; + right: 0; + margin-left: auto; + margin-right: auto; z-index: 2; } #menu.visible { - transform: translateX(-50%), translateY(-.3rem); - visibility: visible; + transform: translateX(-50%), translateY(-0.3rem); + visibility: visible; opacity: 1; } diff --git a/demo/src/app.tsx b/demo/src/app.tsx index 2642b45..7fdbdbd 100644 --- a/demo/src/app.tsx +++ b/demo/src/app.tsx @@ -18,7 +18,7 @@ const App: React.FC = () => { Try me! - +
); From 5843154a240130684c69d5746fd5469492e4d027 Mon Sep 17 00:00:00 2001 From: Wes Cossick Date: Thu, 19 Dec 2019 12:10:13 -0600 Subject: [PATCH 4/8] Switch position of items --- demo/src/app.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/demo/src/app.tsx b/demo/src/app.tsx index 7fdbdbd..6c50b3f 100644 --- a/demo/src/app.tsx +++ b/demo/src/app.tsx @@ -20,11 +20,6 @@ const App: React.FC = () => {
From a30a201da8c52d74405e01f912fc03ae273796c0 Mon Sep 17 00:00:00 2001 From: Wes Cossick Date: Thu, 19 Dec 2019 12:21:11 -0600 Subject: [PATCH 5/8] Fix some bugs --- demo/src/app.css | 2 +- demo/src/app.tsx | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/demo/src/app.css b/demo/src/app.css index 5caa873..ae2d67a 100644 --- a/demo/src/app.css +++ b/demo/src/app.css @@ -83,7 +83,7 @@ h2 { box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.1); opacity: 0; visibility: hidden; - transition: all 0.2s ease; + transition: transform 0.2s ease, opacity 0.2s ease; will-change: transform; text-align: left; position: absolute; diff --git a/demo/src/app.tsx b/demo/src/app.tsx index 6c50b3f..1e1b183 100644 --- a/demo/src/app.tsx +++ b/demo/src/app.tsx @@ -20,17 +20,17 @@ const App: React.FC = () => { +

Behavior:

+ +
    +
  • The menu can be revealed by clicking the button, or by focusing the button and pressing enter / space
    • +
  • When the menu is revealed, the first menu item is automatically focused
    • +
  • + Once focus is in the menu... + +
      +
    • The up / down arrow keys allow for navigation through the menu items
      • +
    • 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
      • +
    • Pressing enter will trigger that item (whether itʼs a link or has a click handler attached)
      • +
    +
    • +
+
View on GitHub From c10bcb49d41575919847ee478db57c3338c4ab97 Mon Sep 17 00:00:00 2001 From: Wes Cossick Date: Thu, 19 Dec 2019 12:49:32 -0600 Subject: [PATCH 7/8] More demo tweaks --- demo/src/app.css | 6 ++++++ demo/src/app.tsx | 10 ++++++---- 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/demo/src/app.css b/demo/src/app.css index 53f2dcb..30d3f8c 100644 --- a/demo/src/app.css +++ b/demo/src/app.css @@ -163,6 +163,12 @@ ul li { text-decoration: underline; } +.footer a svg { + font-size: 80%; + color: #777; + margin-left: 0.1rem; +} + .footer a:not(:last-child) { margin-right: 2rem; } diff --git a/demo/src/app.tsx b/demo/src/app.tsx index 17e9345..cfd9049 100644 --- a/demo/src/app.tsx +++ b/demo/src/app.tsx @@ -55,12 +55,14 @@ const App: React.FC = () => {
From c5e625bb02e91c9eb580c04a8e7adc6023045335 Mon Sep 17 00:00:00 2001 From: Wes Cossick Date: Thu, 19 Dec 2019 12:53:08 -0600 Subject: [PATCH 8/8] Use ellipsis --- demo/src/app.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/demo/src/app.tsx b/demo/src/app.tsx index cfd9049..f9cb191 100644 --- a/demo/src/app.tsx +++ b/demo/src/app.tsx @@ -42,7 +42,7 @@ const App: React.FC = () => {
  • The menu can be revealed by clicking the button, or by focusing the button and pressing enter / space
  • When the menu is revealed, the first menu item is automatically focused
  • - Once focus is in the menu... + Once focus is in the menu…
    • The up / down arrow keys allow for navigation through the menu items