From fb29e9ec74497ec332740a1c099256d94a496e4a Mon Sep 17 00:00:00 2001
From: simeydotme <simey.me@gmail.com>
Date: Sun, 3 Sep 2023 02:09:36 +0800
Subject: [PATCH] add accessibility docs, add some options links

---
 .gitignore                                    |   3 +-
 public/recipes/price-gradient.png             | Bin 0 -> 12252 bytes
 .../recipes/pricegradient/PriceGradient.css   |  40 +++++------
 src/components/Reusable/Option.astro          |  13 ++--
 src/components/Reusable/Recipe.astro          |  21 ++++--
 src/components/Reusable/RecipeList.astro      |   4 +-
 src/content/docs/en/a11y.mdx                  |  65 ++++++++++++++++++
 src/content/docs/en/examples.mdx              |  29 ++++++++
 src/content/docs/en/examples/easing.mdx       |   2 -
 src/content/docs/en/getting-started.mdx       |   6 +-
 src/content/docs/en/options.mdx               |   4 +-
 src/content/docs/en/recipes.mdx               |   2 +-
 src/styles/a11y.scss                          |   3 +
 src/styles/index.scss                         |  51 ++++++++++++++
 14 files changed, 202 insertions(+), 41 deletions(-)
 create mode 100644 public/recipes/price-gradient.png
 create mode 100644 src/content/docs/en/a11y.mdx
 create mode 100644 src/content/docs/en/examples.mdx
 create mode 100644 src/styles/a11y.scss

diff --git a/.gitignore b/.gitignore
index 6240da8..5a505ce 100644
--- a/.gitignore
+++ b/.gitignore
@@ -17,5 +17,6 @@ pnpm-debug.log*
 .env
 .env.production
 
-# macOS-specific files
+# OS-specific files
 .DS_Store
+*.Identifier
\ No newline at end of file
diff --git a/public/recipes/price-gradient.png b/public/recipes/price-gradient.png
new file mode 100644
index 0000000000000000000000000000000000000000..e6be307ebce8ae2b90972a41d004f8602b602540
GIT binary patch
literal 12252
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
GeE2`E#d1&p

literal 0
HcmV?d00001

diff --git a/src/components/Demos/recipes/pricegradient/PriceGradient.css b/src/components/Demos/recipes/pricegradient/PriceGradient.css
index 99ef739..f47f9ce 100644
--- a/src/components/Demos/recipes/pricegradient/PriceGradient.css
+++ b/src/components/Demos/recipes/pricegradient/PriceGradient.css
@@ -1,5 +1,5 @@
 #PriceGradient {
-
+  
   /** colors for the handles and range */
   --color1: hsl(219, 73%, 65%);
   --color2: hsl(283, 100%, 69%);
@@ -10,23 +10,23 @@
   /** linear springs from for easing nicely */
   --spring-duration: 1.5s;
   --spring-easing: linear(
-    0, 0.576 4%, 0.79, 0.964, 1.102, 1.205, 1.275 13.6%, 1.298, 1.313, 1.32, 1.32,
-    1.313 19.3%, 1.299 20.7%, 1.256 23.4%, 1.111 30.5%, 1.047 34.2%, 1.018, 0.996,
-    0.979, 0.968 42.9%, 0.961 46.1%, 0.962 49.7%, 0.994 63.9%, 1.004 72%,
-    1.005 79.2%, 1
+  0, 0.576 4%, 0.79, 0.964, 1.102, 1.205, 1.275 13.6%, 1.298, 1.313, 1.32, 1.32,
+  1.313 19.3%, 1.299 20.7%, 1.256 23.4%, 1.111 30.5%, 1.047 34.2%, 1.018, 0.996,
+  0.979, 0.968 42.9%, 0.961 46.1%, 0.962 49.7%, 0.994 63.9%, 1.004 72%,
+  1.005 79.2%, 1
   );
-
+  
   --color: var(--color1);
   --shadow-color: 0deg 0% 0%;
   --shadow-elevation-medium:
-    0px 0.4px 0.4px hsl(var(--shadow-color) / 0.1),
-    0px 0.8px 0.8px -0.8px hsl(var(--shadow-color) / 0.09),
-    0px 1.6px 1.7px -1.5px hsl(var(--shadow-color) / 0.08),
-    0px 3.5px 3.6px -2.3px hsl(var(--shadow-color) / 0.08),
-    0px 6.9px 7.2px -3px hsl(var(--shadow-color) / 0.07);
+  0px 0.4px 0.4px hsl(var(--shadow-color) / 0.1),
+  0px 0.8px 0.8px -0.8px hsl(var(--shadow-color) / 0.09),
+  0px 1.6px 1.7px -1.5px hsl(var(--shadow-color) / 0.08),
+  0px 3.5px 3.6px -2.3px hsl(var(--shadow-color) / 0.08),
+  0px 6.9px 7.2px -3px hsl(var(--shadow-color) / 0.07);
   
   height: 14px;
-
+  
 }
 
 #PriceGradient .rangeBar {
@@ -67,11 +67,11 @@
 }
 
 #PriceGradient .rangeFloat:after {
-	content: '';
-	position: absolute;
-	bottom: -2px;
-	left: 50%;
-	width: 9px;
+  content: '';
+  position: absolute;
+  bottom: -2px;
+  left: 50%;
+  width: 9px;
   height: 9px;
   background: white;
   transform: translate(-50%, 50%) rotate(45deg);
@@ -104,7 +104,7 @@
 #PriceGradient.focus .pip.in-range {
   background: white;
   box-shadow: 
-    0 0 2px 1px var(--range-pip-in-range), 
-    0 0 5px 2px var(--range-pip-in-range), 
-    0 0 2px 0px var(--range-pip-in-range);
+  0 0 2px 1px var(--range-pip-in-range), 
+  0 0 5px 2px var(--range-pip-in-range), 
+  0 0 2px 0px var(--range-pip-in-range);
 }
\ No newline at end of file
diff --git a/src/components/Reusable/Option.astro b/src/components/Reusable/Option.astro
index 5386d42..8a5fb8a 100644
--- a/src/components/Reusable/Option.astro
+++ b/src/components/Reusable/Option.astro
@@ -9,9 +9,14 @@ interface Props {
   link?: string;
 }
 
-const { propName, propType, defaultValue, link } = Astro.props
-const propTypeString = Array.isArray(propType) ? propType.join(" | ") : propType
-const isRender = propName && propType && defaultValue
+const { propName, propType, defaultValue, link } = Astro.props;
+const propTypeString = Array.isArray(propType) ? propType.join(" | ") : propType;
+const isRender = propName && propType && defaultValue;
+
+let usableLink = link;
+if ( !link?.match(/^\.?\//) ) {
+  usableLink = `./examples/${link}`
+}
 ---
 
 {isRender &&
@@ -28,7 +33,7 @@ const isRender = propName && propType && defaultValue
     </div>
 
     {link &&
-      <a class="sliderProp__link" href=`./examples/${link}`>
+      <a class="sliderProp__link" href={usableLink}>
         See Example<Icon name="fluent:ios-chevron-right-20-filled" /> 
       </a>
     }
diff --git a/src/components/Reusable/Recipe.astro b/src/components/Reusable/Recipe.astro
index 7a7b7ac..1262824 100644
--- a/src/components/Reusable/Recipe.astro
+++ b/src/components/Reusable/Recipe.astro
@@ -1,18 +1,20 @@
 ---
 
 interface Props {
-  image: string;
-  link: string;
   name: string;
+  link: string;
+  image?: string;
 }
 
-const { image, link, name } = Astro.props
+const { name, link, image } = Astro.props
 
 ---
 
 <li class="recipe">
   <a href={link}>
-    <img src=`/public/recipes/${image}` alt={name} />
+    {image &&
+      <img src=`/public/recipes/${image}` alt={name} />
+    }
     <h3>{name}</h3>
   </a>
 </li>
@@ -22,16 +24,21 @@ const { image, link, name } = Astro.props
 <style>
   .recipe {
     display: inline-block;
-    width: 100%;
-    max-width: 300px;
+    flex: 1 1 100%;
     box-sizing: border-box;
     margin: 0;
   }
 
+  @media (min-width: 37.75em) {
+    .recipe {
+      flex: 1 0 45%;
+    }
+  }
+
   .recipe a {
     display: flex;
     flex-direction: column;
-    justify-content: center;
+    justify-content: space-between;
     text-decoration: none;
     width: 100%;
     height: 100%;
diff --git a/src/components/Reusable/RecipeList.astro b/src/components/Reusable/RecipeList.astro
index fd340fb..c593a96 100644
--- a/src/components/Reusable/RecipeList.astro
+++ b/src/components/Reusable/RecipeList.astro
@@ -13,10 +13,10 @@
 <style>
   .recipe-list {
     display: flex;
-    gap: 1rem;
+    flex-wrap: wrap;
     align-items: stretch;
+    gap: 1rem;
     width: 100%;
-    list-style: none;
     padding: 0;
     margin: 0;
   }
diff --git a/src/content/docs/en/a11y.mdx b/src/content/docs/en/a11y.mdx
new file mode 100644
index 0000000..7d486bb
--- /dev/null
+++ b/src/content/docs/en/a11y.mdx
@@ -0,0 +1,65 @@
+---
+title: 'Accessibility (a11y)'
+description: 'Information on the accessibility of this RangeSlider component'
+---
+
+import '~styles/steps-table.scss';
+import { Code } from 'astro/components';
+import Info from '~components/Reusable/Info.astro'
+import RangeSlider from 'svelte-range-slider-pips';
+import Demo from '~components/Reusable/Demo.svelte';
+
+This RangeSlider is built with accessibility in mind. **I've done my best to follow the guidelines
+set out by the [**W3C**](https://www.w3.org/WAI/ARIA/apg/patterns/slider-multithumb/)** and [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Slider_role). 
+and have done some testing myself with VoiceOver on macOS and screen readers.
+
+<Info>I am not a person with difficulties in accessibility, however, so I **can't really say with certainty** how well this
+component works for people with impairments. But I have followed guidelines to the best I know. 
+**If you are an accessible user, and would like to feedback, please do**!</Info>
+
+I am aiming for this to be _THE_ accessible RangeSlider
+component for the web, so if you have any feedback, please [open an issue](https://github.com/simeydotme/svelte-range-slider-pips/issues) or drop by the discussion
+on [GitHub Discussions](https://github.com/simeydotme/svelte-range-slider-pips/discussions) and let me know! If you are able to contribute in any way to make this the
+best it can be for people with impairments, I thank you so much!
+
+## Keyboard support
+
+
+
+<Demo name="Keyboard Support Tester" client:visible>
+  <RangeSlider id="a11y-slider" values={[-10,10]} range min={-20} max={20} pips all="label" pipstep={5} client:visible />
+</Demo>
+
+The RangeSlider supports the following keyboard shortcuts.  
+_(use the slider above to test them out)_
+
+- <kbd title="Tab key">Tab ⭲</kbd> Move focus to next handle
+- <kbd title="Left arrow">Left ←</kbd> Decrease value by `1`
+- <kbd title="Right arrow">Right →</kbd> Increase value by `1`
+- <kbd title="Shift">Shift</kbd><kbd title="Left arrow">Left ←</kbd> Decrease value by 10%
+- <kbd title="Shift">Shift</kbd><kbd title="Right arrow">Right →</kbd> Increase value by 10%
+- <kbd title="Page Up">Page Up</kbd> Increase value by 10%
+- <kbd title="Page Down">Page Dn</kbd> Decrease value by 10%
+- <kbd title="Home">Home</kbd> Set value to `min`
+- <kbd title="End">End</kbd> Set value to `max`
+
+
+## Aria Labels
+
+It's possible to provide a list of labels for the handles to be read out by screen readers.
+This is done by passing an array of strings to the `aria-labels` prop.
+
+Read [more about `aria-label` here](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) , and
+specifically for the [slider role here](https://www.w3.org/WAI/ARIA/apg/patterns/slider-multithumb/examples/slider-multithumb/#rps_label).
+
+Generally speaking, set the `ariaLabels` prop to a label **which describes the purpose of the handle**. For example, if the handle
+is controlling the volume of a video, you might set the `aria-label` to "Volume".
+
+eg; `ariaLabels={['Volume']}`
+### `ariaLabels` example
+
+<Demo name="Aria Label Example" client:visible>
+  <RangeSlider ariaLabels={['Volume']} client:visible />
+  <Code slot="svelte" code={'<RangeSlider ariaLabels={["Volume"]} />'} lang="svelte" />
+</Demo>
+
diff --git a/src/content/docs/en/examples.mdx b/src/content/docs/en/examples.mdx
new file mode 100644
index 0000000..25f73f9
--- /dev/null
+++ b/src/content/docs/en/examples.mdx
@@ -0,0 +1,29 @@
+---
+title: 'Examples'
+description: 'Examples of most of the options (props) available for the RangeSlider'
+---
+import Info from '~components/Reusable/Info.astro'
+import RecipeList from '~/components/Reusable/RecipeList.astro';
+import Recipe from '~/components/Reusable/Recipe.astro';
+
+Use the links below to see examples of different options (props) available for the RangeSlider.
+
+
+
+<RecipeList>
+  <Recipe name="Values & Binding" link="en/examples/values" />
+  <Recipe name="Min & Max" link="en/examples/min-max" />
+  <Recipe name="Pips" link="en/examples/pips" />
+  <Recipe name="Pip Labels" link="en/examples/pip-labels" />
+  <Recipe name="Steps" link="en/examples/steps" />
+  <Recipe name="Pip Steps" link="en/examples/pip-steps" />
+  <Recipe name="Steps & Pip Steps" link="en/examples/steps-combined" />
+  <Recipe name="Ranges" link="en/examples/range" />
+  <Recipe name="Pushy" link="en/examples/range#pushy-range-handles" />
+  <Recipe name="Float" link="en/examples/float" />
+  <Recipe name="Vertical" link="en/examples/vertical" />
+  <Recipe name="Prefix & Suffix" link="en/examples/prefix-suffix" />
+  <Recipe name="Formatter" link="en/examples/formatter" />
+  <Recipe name="Disabled" link="en/examples/disabled" />
+  <Recipe name="Easing" link="en/examples/easing" />
+</RecipeList>
\ No newline at end of file
diff --git a/src/content/docs/en/examples/easing.mdx b/src/content/docs/en/examples/easing.mdx
index 53b19f1..fc89b4c 100644
--- a/src/content/docs/en/examples/easing.mdx
+++ b/src/content/docs/en/examples/easing.mdx
@@ -5,9 +5,7 @@ description: 'The easing function for slider movement animation'
 import { Code } from 'astro/components';
 import RangeSlider from 'svelte-range-slider-pips';
 import { cleanImport } from '~lib/cleanImport.ts';
-
 import Demo from '~components/Reusable/Demo.svelte';
-import Note from '~components/Reusable/Note.astro';
 
 import DefaultEasing from '~demos/examples/easing/DefaultEasing.svelte';
 import DefaultEasingRaw from '~demos/examples/easing/DefaultEasing.svelte?raw';
diff --git a/src/content/docs/en/getting-started.mdx b/src/content/docs/en/getting-started.mdx
index cddedbf..b57f180 100644
--- a/src/content/docs/en/getting-started.mdx
+++ b/src/content/docs/en/getting-started.mdx
@@ -4,6 +4,7 @@ description: 'Installation and Basic Setup'
 ---
 
 import { Icon } from 'astro-icon'
+import Note from '~components/Reusable/Note.astro'
 
 
 ## Installation
@@ -20,8 +21,9 @@ npm install svelte-range-slider-pips --save-dev
 
 ## Using it in your project
 
-> The following instructions assume you have your environment setup in a fairly
-  typical/traditional way.
+<Note>
+The following instructions assume you have your environment setup in a fairly typical/traditional way.
+</Note>
 
 ### <Icon name="vscode-icons:file-type-svelte" /> In a typical Svelte Project
 
diff --git a/src/content/docs/en/options.mdx b/src/content/docs/en/options.mdx
index 87de904..b7b30e9 100644
--- a/src/content/docs/en/options.mdx
+++ b/src/content/docs/en/options.mdx
@@ -117,11 +117,11 @@ configure it to your liking. There's a link to an example for each option.
   Determine if the Slider is disabled, or enabled
 </Option>
 
-<Option propName="id" propType="String" defaultValue="''">
+<Option propName="id" propType="String" defaultValue="''" link="range#styling-range">
   Give the Slider a unique ID for use in styling
 </Option>
 
-<Option propName="ariaLabels" propType="Array" defaultValue="[]">
+<Option propName="ariaLabels" propType="Array" defaultValue="[]" link="./a11y#aria-labels">
   An array of strings to use for the `aria-label` attribute on the handles.  
   <Info>The array should be the same length as the `values` array.</Info>
 </Option>
diff --git a/src/content/docs/en/recipes.mdx b/src/content/docs/en/recipes.mdx
index c1733c5..d173ba8 100644
--- a/src/content/docs/en/recipes.mdx
+++ b/src/content/docs/en/recipes.mdx
@@ -16,7 +16,7 @@ demos with the code and css needed to make it work.
 <RecipeList>
   <Recipe name="Color Picker UI" link="./recipes/color-picker" image="color-ui.png" />
   <Recipe name="Daisy UI" link="./recipes/daisy-ui" image="daisy-ui.png" />
-  <Recipe name="Price Range" link="./recipes/price-range" image="price-range.png" />
+  <Recipe name="Price Range" link="./recipes/price-range" image="price-gradient.png" />
 </RecipeList>
 
 #### More to come...
diff --git a/src/styles/a11y.scss b/src/styles/a11y.scss
new file mode 100644
index 0000000..4282d57
--- /dev/null
+++ b/src/styles/a11y.scss
@@ -0,0 +1,3 @@
+#a11y-slider {
+  margin-block: 5rem!important;
+}
\ No newline at end of file
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 1d182e8..f166cef 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -166,6 +166,57 @@ strong {
   color: inherit;
 }
 
+.content hr {
+  margin-block: 2rem;
+  background: var(--theme-text-light);
+  border: none;
+  height: 1px;
+}
+
+kbd {
+  --docsearch-key-gradient: linear-gradient(-225deg,#d5dbe4,#f8f8f8);
+  --docsearch-key-shadow: inset 0 -2px 0 0 #cdcde6,inset 0 0 1px 1px #fff,0 1px 2px 1px rgba(30,35,90,.4);
+  font-size: 13px;
+  align-items: center;
+  background: var(--docsearch-key-gradient);
+  border-radius: 2px;
+  box-shadow: var(--docsearch-key-shadow);
+  display: inline-flex;
+  height: 22px;
+  justify-content: center;
+  margin-inline: .75em;
+  padding: 0 4px 1px;
+  color: black;
+  border: 0;
+  min-width: 20px;
+  text-shadow: 
+     0px 1px 0 #fff;
+}
+
+kbd:has(+ kbd) {
+  position: relative;
+  margin-right: -4px;
+}
+
+kbd:has(+ kbd):after {
+  content: "+";
+  position: absolute;
+  right: -6px;
+  text-shadow: 
+     -1px -1px 0 #fff
+    , 1px -1px 0 #fff
+    ,-1px  1px 0 #fff
+    , 1px  1px 0 #fff
+    ,-1px  0px 0 #fff
+    , 1px  0px 0 #fff
+    ,-2px -2px 0 #fff
+    , 2px -2px 0 #fff
+    ,-2px  2px 0 #fff
+    , 2px  2px 0 #fff
+    ,-2px  0px 0 #fff
+    , 2px  0px 0 #fff;
+}
+
 /* Supporting Content */
 
 code {