@react-aria/slider - npm Package Compare versions

Comparing version 3.0.0-nightly.2492 to 3.0.0-nightly.2497

dist/main.js

@@ -181,4 +181,9 @@ var {
   if (labelProps.htmlFor) {
-    // Override the `for` attribute to point to the first thumb instead of the group element.
-    labelProps.htmlFor = labelProps.htmlFor ? $dec1906781d9c7cb69245fc4d5344b$export$getSliderThumbId(state, 0) : undefined, labelProps.onClick = () => {
+    // Ideally the `for` attribute should point to the first thumb, but VoiceOver on iOS
+    // causes this to override the `aria-labelledby` on the thumb. This causes the first
+    // thumb to only be announced as the slider label rather than its individual name as well.
+    // See https://bugs.webkit.org/show_bug.cgi?id=172464.
+    delete labelProps.htmlFor;
+
+    labelProps.onClick = () => {
       var _document$getElementB;
@@ -240,3 +245,4 @@
     trackRef,
-    inputRef
+    inputRef,
+    'aria-label': ariaLabel
   } = opts;
@@ -252,2 +258,4 @@ let isVertical = opts.orientation === 'vertical';
   let labelId = $dec1906781d9c7cb69245fc4d5344b$export$sliderIds.get(state);
+  let id = $dec1906781d9c7cb69245fc4d5344b$export$getSliderThumbId(state, index);
+  let thumbId = ariaLabel ? id + "-thumb" : undefined;
   const {
@@ -257,4 +265,8 @@ labelProps,
   } = useLabel(_babelRuntimeHelpersExtends({}, opts, {
-    id: $dec1906781d9c7cb69245fc4d5344b$export$getSliderThumbId(state, index),
-    'aria-labelledby': (labelId + " " + ((_opts$ariaLabelledby = opts['aria-labelledby']) != null ? _opts$ariaLabelledby : '')).trim()
+    id,
+    // Override due to a Chrome bug where aria-labelledby cannot be a self-reference.
+    // Instead, we put the label on the thumb element and point to it with aria-labelledby.
+    // See https://bugs.chromium.org/p/chromium/issues/detail?id=1159567
+    'aria-label': undefined,
+    'aria-labelledby': (labelId + " " + ((_opts$ariaLabelledby = opts['aria-labelledby']) != null ? _opts$ariaLabelledby : '') + " " + (ariaLabel ? thumbId : '')).trim()
   }));
@@ -375,2 +387,4 @@ const value = state.values[index];
     thumbProps: !isDisabled ? mergeProps(moveProps, {
+      id: thumbId,
+      'aria-label': ariaLabel,
       onMouseDown: () => {
@@ -377,0 +391,0 @@ onDown(null);

dist/module.js

@@ -152,4 +152,9 @@ import { useFocusable } from "@react-aria/focus";
   if (labelProps.htmlFor) {
-    // Override the `for` attribute to point to the first thumb instead of the group element.
-    labelProps.htmlFor = labelProps.htmlFor ? $d20491ae7743da17cfa841ff6d87$export$getSliderThumbId(state, 0) : undefined, labelProps.onClick = () => {
+    // Ideally the `for` attribute should point to the first thumb, but VoiceOver on iOS
+    // causes this to override the `aria-labelledby` on the thumb. This causes the first
+    // thumb to only be announced as the slider label rather than its individual name as well.
+    // See https://bugs.webkit.org/show_bug.cgi?id=172464.
+    delete labelProps.htmlFor;
+
+    labelProps.onClick = () => {
       var _document$getElementB;
@@ -209,3 +214,4 @@
     trackRef,
-    inputRef
+    inputRef,
+    'aria-label': ariaLabel
   } = opts;
@@ -221,2 +227,4 @@ let isVertical = opts.orientation === 'vertical';
   let labelId = $d20491ae7743da17cfa841ff6d87$export$sliderIds.get(state);
+  let id = $d20491ae7743da17cfa841ff6d87$export$getSliderThumbId(state, index);
+  let thumbId = ariaLabel ? id + "-thumb" : undefined;
   const {
@@ -226,4 +234,8 @@ labelProps,
   } = useLabel(_babelRuntimeHelpersEsmExtends({}, opts, {
-    id: $d20491ae7743da17cfa841ff6d87$export$getSliderThumbId(state, index),
-    'aria-labelledby': (labelId + " " + ((_opts$ariaLabelledby = opts['aria-labelledby']) != null ? _opts$ariaLabelledby : '')).trim()
+    id,
+    // Override due to a Chrome bug where aria-labelledby cannot be a self-reference.
+    // Instead, we put the label on the thumb element and point to it with aria-labelledby.
+    // See https://bugs.chromium.org/p/chromium/issues/detail?id=1159567
+    'aria-label': undefined,
+    'aria-labelledby': (labelId + " " + ((_opts$ariaLabelledby = opts['aria-labelledby']) != null ? _opts$ariaLabelledby : '') + " " + (ariaLabel ? thumbId : '')).trim()
   }));
@@ -344,2 +356,4 @@ const value = state.values[index];
     thumbProps: !isDisabled ? mergeProps(moveProps, {
+      id: thumbId,
+      'aria-label': ariaLabel,
       onMouseDown: () => {
@@ -346,0 +360,0 @@ onDown(null);

package.json

 {
   "name": "@react-aria/slider",
-  "version": "3.0.0-nightly.2492+1feff7d9",
+  "version": "3.0.0-nightly.2497+e91d2ed3",
   "description": "Slider",
@@ -21,11 +21,11 @@ "license": "Apache-2.0",
     "@babel/runtime": "^7.6.2",
-    "@react-aria/focus": "3.0.0-nightly.814+1feff7d9",
-    "@react-aria/i18n": "3.0.0-nightly.814+1feff7d9",
-    "@react-aria/interactions": "3.0.0-nightly.814+1feff7d9",
-    "@react-aria/label": "3.0.0-nightly.814+1feff7d9",
-    "@react-aria/utils": "3.0.0-nightly.814+1feff7d9",
-    "@react-stately/radio": "3.0.0-nightly.814+1feff7d9",
-    "@react-stately/slider": "3.0.0-nightly.2492+1feff7d9",
-    "@react-types/radio": "3.0.0-nightly.814+1feff7d9",
-    "@react-types/slider": "3.0.0-nightly.2492+1feff7d9"
+    "@react-aria/focus": "3.0.0-nightly.819+e91d2ed3",
+    "@react-aria/i18n": "3.0.0-nightly.819+e91d2ed3",
+    "@react-aria/interactions": "3.0.0-nightly.819+e91d2ed3",
+    "@react-aria/label": "3.0.0-nightly.819+e91d2ed3",
+    "@react-aria/utils": "3.0.0-nightly.819+e91d2ed3",
+    "@react-stately/radio": "3.0.0-nightly.819+e91d2ed3",
+    "@react-stately/slider": "3.0.0-nightly.2497+e91d2ed3",
+    "@react-types/radio": "3.0.0-nightly.819+e91d2ed3",
+    "@react-types/slider": "3.0.0-nightly.2497+e91d2ed3"
   },
@@ -38,3 +38,3 @@ "peerDependencies": {
   },
-  "gitHead": "1feff7d919642630f293ff9c4a21b7e8a2746722"
+  "gitHead": "e91d2ed382218e2edafb82ded03f9f69f5ece77c"
 }

src/useSlider.ts

@@ -156,4 +156,7 @@ /*
   if (labelProps.htmlFor) {
-    // Override the `for` attribute to point to the first thumb instead of the group element.
-    labelProps.htmlFor = labelProps.htmlFor ? getSliderThumbId(state, 0) : undefined,
+    // Ideally the `for` attribute should point to the first thumb, but VoiceOver on iOS
+    // causes this to override the `aria-labelledby` on the thumb. This causes the first
+    // thumb to only be announced as the slider label rather than its individual name as well.
+    // See https://bugs.webkit.org/show_bug.cgi?id=172464.
+    delete labelProps.htmlFor;
     labelProps.onClick = () => {
@@ -160,0 +163,0 @@ // Safari does not focus <input type="range"> elements when clicking on an associated <label>,

src/useSliderThumb.ts

@@ -43,3 +43,4 @@ import {clamp, focusWithoutScrolling, mergeProps, useGlobalListeners} from '@react-aria/utils';
     trackRef,
-    inputRef
+    inputRef,
+    'aria-label': ariaLabel
   } = opts;
@@ -53,6 +54,12 @@
   let labelId = sliderIds.get(state);
+  let id = getSliderThumbId(state, index);
+  let thumbId = ariaLabel ? `${id}-thumb` : undefined;
   const {labelProps, fieldProps} = useLabel({
     ...opts,
-    id: getSliderThumbId(state, index),
-    'aria-labelledby': `${labelId} ${opts['aria-labelledby'] ?? ''}`.trim()
+    id,
+    // Override due to a Chrome bug where aria-labelledby cannot be a self-reference.
+    // Instead, we put the label on the thumb element and point to it with aria-labelledby.
+    // See https://bugs.chromium.org/p/chromium/issues/detail?id=1159567
+    'aria-label': undefined,
+    'aria-labelledby': `${labelId} ${opts['aria-labelledby'] ?? ''} ${ariaLabel ? thumbId : ''}`.trim()
   });
@@ -170,2 +177,4 @@
       {
+        id: thumbId,
+        'aria-label': ariaLabel,
         onMouseDown: () => {onDown(null);},
@@ -172,0 +181,0 @@ onPointerDown: (e: React.PointerEvent) => {onDown(e.pointerId);},

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

114417

increased by3.16%

Lines of code

1053

increased by3.74%

Dependency changes

• Updated@react-aria/focus@3.0.0-nightly.819+e91d2ed3

• Updated@react-aria/i18n@3.0.0-nightly.819+e91d2ed3

• Updated@react-aria/interactions@3.0.0-nightly.819+e91d2ed3

• Updated@react-aria/label@3.0.0-nightly.819+e91d2ed3

• Updated@react-aria/utils@3.0.0-nightly.819+e91d2ed3

• Updated@react-stately/radio@3.0.0-nightly.819+e91d2ed3

• Updated@react-stately/slider@3.0.0-nightly.2497+e91d2ed3

• Updated@react-types/radio@3.0.0-nightly.819+e91d2ed3

• Updated@react-types/slider@3.0.0-nightly.2497+e91d2ed3