add accessibility docs, add some options links

.gitignore

@@ -17,5 +17,6 @@ pnpm-debug.log*
 .env
 .env.production
 
-# macOS-specific files
+# OS-specific files
 .DS_Store
+*.Identifier

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);
 }

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>
     }

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%;

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;
   }

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>
+

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>

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';

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
 

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>

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...

src/styles/a11y.scss

@@ -0,0 +1,3 @@
+#a11y-slider {
+  margin-block: 5rem!important;
+}

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 {