From 977055957f04dc204a222e89ab244b9a2635a83e Mon Sep 17 00:00:00 2001 From: Sarah Higley Date: Sun, 14 Mar 2021 16:28:04 -0700 Subject: [PATCH] add meaningful alt text to plants, add keyboard interaction and focus styles --- 3-terrarium/solution/index.html | 28 +++++++-------- 3-terrarium/solution/script.js | 61 +++++++++++++++++++++++++++++++++ 3-terrarium/solution/style.css | 9 +++++ 3 files changed, 84 insertions(+), 14 deletions(-) diff --git a/3-terrarium/solution/index.html b/3-terrarium/solution/index.html index 1c44732b..c4f6f9da 100644 --- a/3-terrarium/solution/index.html +++ b/3-terrarium/solution/index.html @@ -17,48 +17,48 @@
- plant + spindly plant with round leaves
- plant + succulent with plump leaves
- plant + pink water lily flower
- plant + bushy plant with small pink round flowers
- plant + branch with long, thin blue leaves
- plant + branch with long green leaves
- plant + succulent with plump finger-like green leaves
- plant + ocotillo cactus with red blooms
- plant + plant with wide pointy grey-green leaves
- plant + dark green evergreen shrub
- plant + football-shaped cactus with long thin spines
- plant + greyish pink air plant
- plant + prickly pear cactus
- plant + pincushion cactus
diff --git a/3-terrarium/solution/script.js b/3-terrarium/solution/script.js index cc3950b0..316ddcde 100644 --- a/3-terrarium/solution/script.js +++ b/3-terrarium/solution/script.js @@ -27,6 +27,7 @@ function dragElement(terrariumElement) { pos3 = 0, pos4 = 0; terrariumElement.onpointerdown = pointerDrag; + terrariumElement.onkeydown = keyboardMove; function pointerDrag(e) { e.preventDefault(); @@ -61,4 +62,64 @@ function dragElement(terrariumElement) { document.onpointerup = null; document.onpointermove = null; } + + // keyboard "dragging" functionality + // arrow keys move a plant by a small increment + // home/end/page up/page down move a plant by a larger increment + function keyboardMove(e) { + // set movement amounts + const smallIncrement = 5; + const largeIncrement = 200; + + let diffX = 0; + let diffY = 0; + + const { key } = e; + let moved = false; + + switch (key) { + case 'ArrowLeft': + diffX = -1 * smallIncrement; + moved = true; + break; + case 'ArrowRight': + diffX = smallIncrement; + moved = true; + break; + case 'ArrowUp': + diffY = -1 * smallIncrement; + moved = true; + break; + case 'ArrowDown': + diffY = smallIncrement; + moved = true; + break; + case 'Home': + diffX = -1 * largeIncrement; + moved = true; + break; + case 'End': + diffX = largeIncrement; + moved = true; + break; + case 'PageUp': + diffY = -1 * largeIncrement; + moved = true; + break; + case 'PageDown': + diffY = largeIncrement; + moved = true; + break; + } + + if (moved) { + e.preventDefault(); + terrariumElement.style.top = terrariumElement.offsetTop + diffY + 'px'; + terrariumElement.style.left = terrariumElement.offsetLeft + diffX + 'px'; + } + } } + +// Can you think of ways to improve accessibility? +// For example, how would someone using a screen reader know to use arrow keys? +// Or how would you let someone with less dexterity place plants without dragging? \ No newline at end of file diff --git a/3-terrarium/solution/style.css b/3-terrarium/solution/style.css index 9c627e83..39662e28 100644 --- a/3-terrarium/solution/style.css +++ b/3-terrarium/solution/style.css @@ -34,9 +34,18 @@ h1 { position: absolute; max-width: 150%; max-height: 150%; + border-radius: 50%; z-index: 2; } +.plant:focus-visible { + /* A transparent outline shows up in Windows High Contrast mode */ + outline: 4px solid transparent; + /* A box shadow makes a pretty focus style, but is invisible in high contrast mode */ + box-shadow: 0 0 6px 2px #516c16; + z-index: 3; +} + /*https://codepen.io/Rotarepmi/pen/rjpNZY*/ .jar-walls {