Fix formatting and add changeset

tajo · Aug 7, 2024 · 92cd0ff · 92cd0ff
1 parent 0775948
commit 92cd0ff
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 19 deletions.
diff --git a/.changeset/witty-bulldogs-warn.md b/.changeset/witty-bulldogs-warn.md
@@ -0,0 +1,5 @@
+---
+"react-range": minor
+---
+
+Improving a11y of the slider by adding new label properties.
diff --git a/examples/BasicVisibleLabel.tsx b/examples/BasicVisibleLabel.tsx
@@ -17,17 +17,18 @@ const BasicVisibleLabelExample: React.FC<{ rtl: boolean }> = ({ rtl }) => {
         flexWrap: "wrap",
       }}
     >
-      <label 
-      onClick={ (e) => {
-        rangeRef.current.thumbRefs[0].current.focus()
-      }}
-      id="unique_id"
-      style={{
-        flex:"auto",
-        fontFamily:"sans-serif"
-      }}
-
-      >Visible accessibility label:</label>
+      <label
+        onClick={(e) => {
+          rangeRef.current.thumbRefs[0].current.focus();
+        }}
+        id="unique_id"
+        style={{
+          flex: "auto",
+          fontFamily: "sans-serif",
+        }}
+      >
+        Visible accessibility label:
+      </label>
 
       <Range
         labelledBy="unique_id"
@@ -40,7 +41,6 @@ const BasicVisibleLabelExample: React.FC<{ rtl: boolean }> = ({ rtl }) => {
         onChange={(values) => setValues(values)}
         renderTrack={({ props, children }) => (
           <div
-
             onMouseDown={props.onMouseDown}
             onTouchStart={props.onTouchStart}
             style={{

diff --git a/src/Range.tsx b/src/Range.tsx
@@ -704,8 +704,8 @@ class Range extends React.Component<IProps> {
               "aria-valuenow": value,
               draggable: false,
               ref: this.thumbRefs[index],
-              "aria-label" : label,
-              "aria-labelledby" : labelledBy,           
+              "aria-label": label,
+              "aria-labelledby": labelledBy,
               role: "slider",
               onKeyDown: disabled ? voidFn : this.onKeyDown,
               onKeyUp: disabled ? voidFn : this.onKeyUp,

diff --git a/src/range.stories.tsx b/src/range.stories.tsx
@@ -34,7 +34,7 @@ export const AnimatingContainer: React.FC<{ rtl: boolean }> = ({ rtl }) => (
 export const Basic: React.FC<{ rtl: boolean }> = ({ rtl }) => (
   <BasicExample rtl={rtl} />
 );
-export const BasicVisibleLabel : React.FC<{ rtl: boolean }> = ({ rtl }) => (
+export const BasicVisibleLabel: React.FC<{ rtl: boolean }> = ({ rtl }) => (
   <BasicVisibleLabelExample rtl={rtl} />
 );
 export const BasicWithBorder: React.FC<{ rtl: boolean }> = ({ rtl }) => (

diff --git a/src/types.ts b/src/types.ts
@@ -9,8 +9,8 @@ export interface ITrackBackground {
   rtl?: boolean;
 }
 export interface IProps {
-  label: string,
-  labelledBy: string,
+  label: string;
+  labelledBy: string;
   values: number[];
   min: number;
   max: number;
@@ -50,8 +50,8 @@ export interface IThumbProps {
   key: number;
   style: React.CSSProperties;
   tabIndex?: number;
-  "aria-label": string,
-  "aria-labelledby": string,
+  "aria-label": string;
+  "aria-labelledby": string;
   "aria-valuemax": number;
   "aria-valuemin": number;
   "aria-valuenow": number;