@semcore/scroll-area - npm Package Compare versions

Comparing version 5.34.1 to 5.35.0-prerelease.0

CHANGELOG.md

@@ -5,2 +5,8 @@ # Changelog
 
+## [5.35.0] - 2024-07-31
+
+### Add
+
+- Context to hide scrollbars from screen readers.
+
 ## [5.34.1] - 2024-07-30
@@ -7,0 +13,0 @@

lib/cjs/index.js

@@ -7,3 +7,5 @@ "use strict";
 });
-var _exportNames = {};
+var _exportNames = {
+  hideScrollBarsFromScreenReadersContext: true
+};
 Object.defineProperty(exports, "default", {
@@ -15,2 +17,8 @@ enumerable: true,
 });
+Object.defineProperty(exports, "hideScrollBarsFromScreenReadersContext", {
+  enumerable: true,
+  get: function get() {
+    return _ScrollBar.hideScrollBarsFromScreenReadersContext;
+  }
+});
 var _ScrollArea = _interopRequireWildcard(require("./ScrollArea"));
@@ -28,2 +36,3 @@ Object.keys(_ScrollArea).forEach(function (key) {
 });
+var _ScrollBar = require("./ScrollBar");
 //# sourceMappingURL=index.js.map

lib/cjs/ScrollArea.js

@@ -33,23 +33,23 @@ "use strict";
 /*__reshadow-styles__:"./style/scroll-area.shadow.css"*/
-var style = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/".___SScrollArea_6xg5l_gg_{position:relative;width:100%;height:100%}.___SShadowHorizontal_6xg5l_gg_:after,.___SShadowHorizontal_6xg5l_gg_:before,.___SShadowVertical_6xg5l_gg_:after,.___SShadowVertical_6xg5l_gg_:before{content:\"\";position:absolute;display:none;pointer-events:none}.___SShadowHorizontal_6xg5l_gg_:after,.___SShadowHorizontal_6xg5l_gg_:before{top:0;width:5px;height:100%}.___SShadowHorizontal_6xg5l_gg_._position_median_6xg5l_gg_:before{left:0;display:block;background:var(--intergalactic-scroll-area-shadow-left,\n    linear-gradient(to right, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%))}.___SShadowHorizontal_6xg5l_gg_._position_median_6xg5l_gg_:after{right:0;display:block;background:var(--intergalactic-scroll-area-shadow-right,\n    linear-gradient(to left, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%))}.___SShadowHorizontal_6xg5l_gg_._position_start_6xg5l_gg_:before{left:0;display:block;background:var(--intergalactic-scroll-area-shadow-left,\n    linear-gradient(to right, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%))}.___SShadowHorizontal_6xg5l_gg_._position_end_6xg5l_gg_:after{right:0;display:block;background:var(--intergalactic-scroll-area-shadow-right,\n    linear-gradient(to left, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%))}.___SShadowHorizontal_6xg5l_gg_.__leftOffset_6xg5l_gg_:before{left:var(--leftOffset_6xg5l)}.___SShadowHorizontal_6xg5l_gg_.__rightOffset_6xg5l_gg_:after{right:var(--rightOffset_6xg5l)}.___SShadowVertical_6xg5l_gg_:after,.___SShadowVertical_6xg5l_gg_:before{left:0;width:100%;height:5px}.___SShadowVertical_6xg5l_gg_._position_median_6xg5l_gg_:before{top:0;display:block;background:var(--intergalactic-scroll-area-shadow-top,\n    linear-gradient(to bottom, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%))}.___SShadowVertical_6xg5l_gg_._position_median_6xg5l_gg_:after{bottom:0;display:block;background:var(--intergalactic-scroll-area-shadow-bottom,\n    linear-gradient(to top, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%))}.___SShadowVertical_6xg5l_gg_._position_start_6xg5l_gg_:before{top:0;display:block;background:var(--intergalactic-scroll-area-shadow-top,\n    linear-gradient(to bottom, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%))}.___SShadowVertical_6xg5l_gg_._position_end_6xg5l_gg_:after{bottom:0;display:block;background:var(--intergalactic-scroll-area-shadow-bottom,\n    linear-gradient(to top, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%))}.___SShadowVertical_6xg5l_gg_.__topOffset_6xg5l_gg_:before{top:var(--topOffset_6xg5l)}.___SShadowVertical_6xg5l_gg_.__bottomOffset_6xg5l_gg_:after{bottom:var(--bottomOffset_6xg5l)}.___SContainer_6xg5l_gg_{display:block;width:100%;height:100%;box-sizing:content-box;overflow:auto;-webkit-overflow-scrolling:touch;outline:0;scrollbar-width:none;-ms-overflow-style:none}.___SContainer_6xg5l_gg_::-webkit-scrollbar{display:none}.___SContainer_6xg5l_gg_.__keyboardFocused_6xg5l_gg_:focus::after{position:absolute;display:block;content:\"\";top:0;right:0;bottom:0;left:0;top:var(--focusRingTopOffset_6xg5l);right:var(--focusRingRightOffset_6xg5l);bottom:var(--focusRingBottomOffset_6xg5l);left:var(--focusRingLeftOffset_6xg5l);box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));pointer-events:none;z-index:2}" /*__inner_css_end__*/, "6xg5l_gg_") /*__reshadow_css_end__*/, {
-  "__SScrollArea": "___SScrollArea_6xg5l_gg_",
-  "__SShadowHorizontal": "___SShadowHorizontal_6xg5l_gg_",
-  "_leftOffset": "__leftOffset_6xg5l_gg_",
-  "--leftOffset": "--leftOffset_6xg5l",
-  "_rightOffset": "__rightOffset_6xg5l_gg_",
-  "--rightOffset": "--rightOffset_6xg5l",
-  "__SShadowVertical": "___SShadowVertical_6xg5l_gg_",
-  "_topOffset": "__topOffset_6xg5l_gg_",
-  "--topOffset": "--topOffset_6xg5l",
-  "_bottomOffset": "__bottomOffset_6xg5l_gg_",
-  "--bottomOffset": "--bottomOffset_6xg5l",
-  "__SContainer": "___SContainer_6xg5l_gg_",
-  "_keyboardFocused": "__keyboardFocused_6xg5l_gg_",
-  "--focusRingTopOffset": "--focusRingTopOffset_6xg5l",
-  "--focusRingRightOffset": "--focusRingRightOffset_6xg5l",
-  "--focusRingBottomOffset": "--focusRingBottomOffset_6xg5l",
-  "--focusRingLeftOffset": "--focusRingLeftOffset_6xg5l",
-  "_position_median": "_position_median_6xg5l_gg_",
-  "_position_start": "_position_start_6xg5l_gg_",
-  "_position_end": "_position_end_6xg5l_gg_"
+var style = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/".___SScrollArea_m2jzo_gg_{position:relative;width:100%;height:100%}.___SShadowHorizontal_m2jzo_gg_:after,.___SShadowHorizontal_m2jzo_gg_:before,.___SShadowVertical_m2jzo_gg_:after,.___SShadowVertical_m2jzo_gg_:before{content:\"\";position:absolute;display:none;pointer-events:none}.___SShadowHorizontal_m2jzo_gg_:after,.___SShadowHorizontal_m2jzo_gg_:before{top:0;width:5px;height:100%}.___SShadowHorizontal_m2jzo_gg_._position_median_m2jzo_gg_:before{left:0;display:block;background:var(--intergalactic-scroll-area-shadow-left,\n    linear-gradient(to right, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%))}.___SShadowHorizontal_m2jzo_gg_._position_median_m2jzo_gg_:after{right:0;display:block;background:var(--intergalactic-scroll-area-shadow-right,\n    linear-gradient(to left, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%))}.___SShadowHorizontal_m2jzo_gg_._position_start_m2jzo_gg_:before{left:0;display:block;background:var(--intergalactic-scroll-area-shadow-left,\n    linear-gradient(to right, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%))}.___SShadowHorizontal_m2jzo_gg_._position_end_m2jzo_gg_:after{right:0;display:block;background:var(--intergalactic-scroll-area-shadow-right,\n    linear-gradient(to left, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%))}.___SShadowHorizontal_m2jzo_gg_.__leftOffset_m2jzo_gg_:before{left:var(--leftOffset_m2jzo)}.___SShadowHorizontal_m2jzo_gg_.__rightOffset_m2jzo_gg_:after{right:var(--rightOffset_m2jzo)}.___SShadowVertical_m2jzo_gg_:after,.___SShadowVertical_m2jzo_gg_:before{left:0;width:100%;height:5px}.___SShadowVertical_m2jzo_gg_._position_median_m2jzo_gg_:before{top:0;display:block;background:var(--intergalactic-scroll-area-shadow-top,\n    linear-gradient(to bottom, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%))}.___SShadowVertical_m2jzo_gg_._position_median_m2jzo_gg_:after{bottom:0;display:block;background:var(--intergalactic-scroll-area-shadow-bottom,\n    linear-gradient(to top, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%))}.___SShadowVertical_m2jzo_gg_._position_start_m2jzo_gg_:before{top:0;display:block;background:var(--intergalactic-scroll-area-shadow-top,\n    linear-gradient(to bottom, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%))}.___SShadowVertical_m2jzo_gg_._position_end_m2jzo_gg_:after{bottom:0;display:block;background:var(--intergalactic-scroll-area-shadow-bottom,\n    linear-gradient(to top, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%))}.___SShadowVertical_m2jzo_gg_.__topOffset_m2jzo_gg_:before{top:var(--topOffset_m2jzo)}.___SShadowVertical_m2jzo_gg_.__bottomOffset_m2jzo_gg_:after{bottom:var(--bottomOffset_m2jzo)}.___SContainer_m2jzo_gg_{display:block;width:100%;height:100%;box-sizing:content-box;overflow:auto;-webkit-overflow-scrolling:touch;outline:0;scrollbar-width:none;-ms-overflow-style:none}.___SContainer_m2jzo_gg_::-webkit-scrollbar{display:none}.___SContainer_m2jzo_gg_.__keyboardFocused_m2jzo_gg_:focus::after{position:absolute;display:block;content:\"\";top:0;right:0;bottom:0;left:0;top:var(--focusRingTopOffset_m2jzo);right:var(--focusRingRightOffset_m2jzo);bottom:var(--focusRingBottomOffset_m2jzo);left:var(--focusRingLeftOffset_m2jzo);box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));pointer-events:none;z-index:2}" /*__inner_css_end__*/, "m2jzo_gg_") /*__reshadow_css_end__*/, {
+  "__SScrollArea": "___SScrollArea_m2jzo_gg_",
+  "__SShadowHorizontal": "___SShadowHorizontal_m2jzo_gg_",
+  "_leftOffset": "__leftOffset_m2jzo_gg_",
+  "--leftOffset": "--leftOffset_m2jzo",
+  "_rightOffset": "__rightOffset_m2jzo_gg_",
+  "--rightOffset": "--rightOffset_m2jzo",
+  "__SShadowVertical": "___SShadowVertical_m2jzo_gg_",
+  "_topOffset": "__topOffset_m2jzo_gg_",
+  "--topOffset": "--topOffset_m2jzo",
+  "_bottomOffset": "__bottomOffset_m2jzo_gg_",
+  "--bottomOffset": "--bottomOffset_m2jzo",
+  "__SContainer": "___SContainer_m2jzo_gg_",
+  "_keyboardFocused": "__keyboardFocused_m2jzo_gg_",
+  "--focusRingTopOffset": "--focusRingTopOffset_m2jzo",
+  "--focusRingRightOffset": "--focusRingRightOffset_m2jzo",
+  "--focusRingBottomOffset": "--focusRingBottomOffset_m2jzo",
+  "--focusRingLeftOffset": "--focusRingLeftOffset_m2jzo",
+  "_position_median": "_position_median_m2jzo_gg_",
+  "_position_start": "_position_start_m2jzo_gg_",
+  "_position_end": "_position_end_m2jzo_gg_"
 });
@@ -56,0 +56,0 @@ var eventCalculate = undefined;

lib/cjs/ScrollBar.js

@@ -8,3 +8,3 @@ "use strict";
 });
-exports.setAreaValue = exports["default"] = exports.DEFAULT_SLIDER_SIZE = void 0;
+exports.setAreaValue = exports.hideScrollBarsFromScreenReadersContext = exports["default"] = exports.DEFAULT_SLIDER_SIZE = void 0;
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
@@ -24,10 +24,13 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _ref5 = require("@semcore/utils/lib/ref");
+var _contextEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/contextEnhance"));
 /*__reshadow-styles__:"./style/scroll-bar.shadow.css"*/
-var style = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/".___SScrollBar_11wdz_gg_{position:absolute;display:flex}.___SScrollBar_11wdz_gg_._orientation_vertical_11wdz_gg_{top:var(--intergalactic-spacing-1x, 4px);right:0;width:8px;height:calc(100% - var(--offsetSum_11wdz) - var(--intergalactic-spacing-2x, 8px));justify-content:center}.___SScrollBar_11wdz_gg_._orientation_horizontal_11wdz_gg_{bottom:0;height:12px;align-items:center;width:calc(100% - var(--offsetSum_11wdz) - var(--intergalactic-spacing-2x, 8px))}.___SSlider_11wdz_gg_{cursor:pointer;width:6px;height:6px;border-radius:4px;background-color:var(--intergalactic-scroll-bar-background, rgba(25, 27, 35, 0.3))}" /*__inner_css_end__*/, "11wdz_gg_") /*__reshadow_css_end__*/, {
-  "__SScrollBar": "___SScrollBar_11wdz_gg_",
-  "_orientation_vertical": "_orientation_vertical_11wdz_gg_",
-  "--offsetSum": "--offsetSum_11wdz",
-  "_orientation_horizontal": "_orientation_horizontal_11wdz_gg_",
-  "__SSlider": "___SSlider_11wdz_gg_"
+var style = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/".___SScrollBar_fx5hn_gg_{position:absolute;display:flex}.___SScrollBar_fx5hn_gg_._orientation_vertical_fx5hn_gg_{top:var(--intergalactic-spacing-1x, 4px);right:0;width:8px;height:calc(100% - var(--offsetSum_fx5hn) - var(--intergalactic-spacing-2x, 8px));justify-content:center}.___SScrollBar_fx5hn_gg_._orientation_horizontal_fx5hn_gg_{bottom:0;height:12px;align-items:center;width:calc(100% - var(--offsetSum_fx5hn) - var(--intergalactic-spacing-2x, 8px))}.___SSlider_fx5hn_gg_{cursor:pointer;width:6px;height:6px;border-radius:4px;background-color:var(--intergalactic-scroll-bar-background, rgba(25, 27, 35, 0.3))}" /*__inner_css_end__*/, "fx5hn_gg_") /*__reshadow_css_end__*/, {
+  "__SScrollBar": "___SScrollBar_fx5hn_gg_",
+  "_orientation_vertical": "_orientation_vertical_fx5hn_gg_",
+  "--offsetSum": "--offsetSum_fx5hn",
+  "_orientation_horizontal": "_orientation_horizontal_fx5hn_gg_",
+  "__SSlider": "___SSlider_fx5hn_gg_"
 });
+var hideScrollBarsFromScreenReadersContext = /*#__PURE__*/_react["default"].createContext(false);
+exports.hideScrollBarsFromScreenReadersContext = hideScrollBarsFromScreenReadersContext;
 var DEFAULT_SLIDER_SIZE = 50;
@@ -358,3 +361,4 @@
         container = _this$asProps2.container,
-        orientation = _this$asProps2.orientation;
+        orientation = _this$asProps2.orientation,
+        hideFromScreenReaders = _this$asProps2.hideFromScreenReaders;
       var visibleScroll = this.state.visibleScroll;
@@ -406,7 +410,8 @@ var _this$asProps3 = this.asProps,
         "offsetSum": "".concat(offsetSum, "px"),
-        "role": 'scrollbar',
+        "role": hideFromScreenReaders ? undefined : 'scrollbar',
+        "aria-hidden": hideFromScreenReaders ? 'true' : undefined,
         "ref": this.refBar,
-        "aria-valuemin": 0,
-        "aria-controls": "igc-".concat(uid, "-scroll-container"),
-        "aria-orientation": this.getOrientation(),
+        "aria-valuemin": hideFromScreenReaders ? undefined : 0,
+        "aria-controls": hideFromScreenReaders ? undefined : "igc-".concat(uid, "-scroll-container"),
+        "aria-orientation": hideFromScreenReaders ? undefined : this.getOrientation(),
         "onMouseDown": this.handleMouseDownBar,
@@ -421,2 +426,3 @@ "orientation": this.getOrientation()
 (0, _defineProperty2["default"])(ScrollBarRoot, "style", style);
+(0, _defineProperty2["default"])(ScrollBarRoot, "enhance", [(0, _contextEnhance["default"])(hideScrollBarsFromScreenReadersContext, 'hideFromScreenReaders')]);
 (0, _defineProperty2["default"])(ScrollBarRoot, "defaultProps", function () {
@@ -423,0 +429,0 @@ return {

lib/es6/index.js

 export { default } from './ScrollArea';
 export * from './ScrollArea';
+export { hideScrollBarsFromScreenReadersContext } from './ScrollBar';
 //# sourceMappingURL=index.js.map

lib/es6/ScrollArea.js

@@ -27,23 +27,23 @@ import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 /*__reshadow-styles__:"./style/scroll-area.shadow.css"*/
-var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SScrollArea_6xg5l_gg_{position:relative;width:100%;height:100%}.___SShadowHorizontal_6xg5l_gg_:after,.___SShadowHorizontal_6xg5l_gg_:before,.___SShadowVertical_6xg5l_gg_:after,.___SShadowVertical_6xg5l_gg_:before{content:\"\";position:absolute;display:none;pointer-events:none}.___SShadowHorizontal_6xg5l_gg_:after,.___SShadowHorizontal_6xg5l_gg_:before{top:0;width:5px;height:100%}.___SShadowHorizontal_6xg5l_gg_._position_median_6xg5l_gg_:before{left:0;display:block;background:var(--intergalactic-scroll-area-shadow-left,\n    linear-gradient(to right, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%))}.___SShadowHorizontal_6xg5l_gg_._position_median_6xg5l_gg_:after{right:0;display:block;background:var(--intergalactic-scroll-area-shadow-right,\n    linear-gradient(to left, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%))}.___SShadowHorizontal_6xg5l_gg_._position_start_6xg5l_gg_:before{left:0;display:block;background:var(--intergalactic-scroll-area-shadow-left,\n    linear-gradient(to right, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%))}.___SShadowHorizontal_6xg5l_gg_._position_end_6xg5l_gg_:after{right:0;display:block;background:var(--intergalactic-scroll-area-shadow-right,\n    linear-gradient(to left, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%))}.___SShadowHorizontal_6xg5l_gg_.__leftOffset_6xg5l_gg_:before{left:var(--leftOffset_6xg5l)}.___SShadowHorizontal_6xg5l_gg_.__rightOffset_6xg5l_gg_:after{right:var(--rightOffset_6xg5l)}.___SShadowVertical_6xg5l_gg_:after,.___SShadowVertical_6xg5l_gg_:before{left:0;width:100%;height:5px}.___SShadowVertical_6xg5l_gg_._position_median_6xg5l_gg_:before{top:0;display:block;background:var(--intergalactic-scroll-area-shadow-top,\n    linear-gradient(to bottom, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%))}.___SShadowVertical_6xg5l_gg_._position_median_6xg5l_gg_:after{bottom:0;display:block;background:var(--intergalactic-scroll-area-shadow-bottom,\n    linear-gradient(to top, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%))}.___SShadowVertical_6xg5l_gg_._position_start_6xg5l_gg_:before{top:0;display:block;background:var(--intergalactic-scroll-area-shadow-top,\n    linear-gradient(to bottom, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%))}.___SShadowVertical_6xg5l_gg_._position_end_6xg5l_gg_:after{bottom:0;display:block;background:var(--intergalactic-scroll-area-shadow-bottom,\n    linear-gradient(to top, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%))}.___SShadowVertical_6xg5l_gg_.__topOffset_6xg5l_gg_:before{top:var(--topOffset_6xg5l)}.___SShadowVertical_6xg5l_gg_.__bottomOffset_6xg5l_gg_:after{bottom:var(--bottomOffset_6xg5l)}.___SContainer_6xg5l_gg_{display:block;width:100%;height:100%;box-sizing:content-box;overflow:auto;-webkit-overflow-scrolling:touch;outline:0;scrollbar-width:none;-ms-overflow-style:none}.___SContainer_6xg5l_gg_::-webkit-scrollbar{display:none}.___SContainer_6xg5l_gg_.__keyboardFocused_6xg5l_gg_:focus::after{position:absolute;display:block;content:\"\";top:0;right:0;bottom:0;left:0;top:var(--focusRingTopOffset_6xg5l);right:var(--focusRingRightOffset_6xg5l);bottom:var(--focusRingBottomOffset_6xg5l);left:var(--focusRingLeftOffset_6xg5l);box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));pointer-events:none;z-index:2}" /*__inner_css_end__*/, "6xg5l_gg_") /*__reshadow_css_end__*/, {
-  "__SScrollArea": "___SScrollArea_6xg5l_gg_",
-  "__SShadowHorizontal": "___SShadowHorizontal_6xg5l_gg_",
-  "_leftOffset": "__leftOffset_6xg5l_gg_",
-  "--leftOffset": "--leftOffset_6xg5l",
-  "_rightOffset": "__rightOffset_6xg5l_gg_",
-  "--rightOffset": "--rightOffset_6xg5l",
-  "__SShadowVertical": "___SShadowVertical_6xg5l_gg_",
-  "_topOffset": "__topOffset_6xg5l_gg_",
-  "--topOffset": "--topOffset_6xg5l",
-  "_bottomOffset": "__bottomOffset_6xg5l_gg_",
-  "--bottomOffset": "--bottomOffset_6xg5l",
-  "__SContainer": "___SContainer_6xg5l_gg_",
-  "_keyboardFocused": "__keyboardFocused_6xg5l_gg_",
-  "--focusRingTopOffset": "--focusRingTopOffset_6xg5l",
-  "--focusRingRightOffset": "--focusRingRightOffset_6xg5l",
-  "--focusRingBottomOffset": "--focusRingBottomOffset_6xg5l",
-  "--focusRingLeftOffset": "--focusRingLeftOffset_6xg5l",
-  "_position_median": "_position_median_6xg5l_gg_",
-  "_position_start": "_position_start_6xg5l_gg_",
-  "_position_end": "_position_end_6xg5l_gg_"
+var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SScrollArea_m2jzo_gg_{position:relative;width:100%;height:100%}.___SShadowHorizontal_m2jzo_gg_:after,.___SShadowHorizontal_m2jzo_gg_:before,.___SShadowVertical_m2jzo_gg_:after,.___SShadowVertical_m2jzo_gg_:before{content:\"\";position:absolute;display:none;pointer-events:none}.___SShadowHorizontal_m2jzo_gg_:after,.___SShadowHorizontal_m2jzo_gg_:before{top:0;width:5px;height:100%}.___SShadowHorizontal_m2jzo_gg_._position_median_m2jzo_gg_:before{left:0;display:block;background:var(--intergalactic-scroll-area-shadow-left,\n    linear-gradient(to right, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%))}.___SShadowHorizontal_m2jzo_gg_._position_median_m2jzo_gg_:after{right:0;display:block;background:var(--intergalactic-scroll-area-shadow-right,\n    linear-gradient(to left, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%))}.___SShadowHorizontal_m2jzo_gg_._position_start_m2jzo_gg_:before{left:0;display:block;background:var(--intergalactic-scroll-area-shadow-left,\n    linear-gradient(to right, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%))}.___SShadowHorizontal_m2jzo_gg_._position_end_m2jzo_gg_:after{right:0;display:block;background:var(--intergalactic-scroll-area-shadow-right,\n    linear-gradient(to left, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%))}.___SShadowHorizontal_m2jzo_gg_.__leftOffset_m2jzo_gg_:before{left:var(--leftOffset_m2jzo)}.___SShadowHorizontal_m2jzo_gg_.__rightOffset_m2jzo_gg_:after{right:var(--rightOffset_m2jzo)}.___SShadowVertical_m2jzo_gg_:after,.___SShadowVertical_m2jzo_gg_:before{left:0;width:100%;height:5px}.___SShadowVertical_m2jzo_gg_._position_median_m2jzo_gg_:before{top:0;display:block;background:var(--intergalactic-scroll-area-shadow-top,\n    linear-gradient(to bottom, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%))}.___SShadowVertical_m2jzo_gg_._position_median_m2jzo_gg_:after{bottom:0;display:block;background:var(--intergalactic-scroll-area-shadow-bottom,\n    linear-gradient(to top, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%))}.___SShadowVertical_m2jzo_gg_._position_start_m2jzo_gg_:before{top:0;display:block;background:var(--intergalactic-scroll-area-shadow-top,\n    linear-gradient(to bottom, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%))}.___SShadowVertical_m2jzo_gg_._position_end_m2jzo_gg_:after{bottom:0;display:block;background:var(--intergalactic-scroll-area-shadow-bottom,\n    linear-gradient(to top, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%))}.___SShadowVertical_m2jzo_gg_.__topOffset_m2jzo_gg_:before{top:var(--topOffset_m2jzo)}.___SShadowVertical_m2jzo_gg_.__bottomOffset_m2jzo_gg_:after{bottom:var(--bottomOffset_m2jzo)}.___SContainer_m2jzo_gg_{display:block;width:100%;height:100%;box-sizing:content-box;overflow:auto;-webkit-overflow-scrolling:touch;outline:0;scrollbar-width:none;-ms-overflow-style:none}.___SContainer_m2jzo_gg_::-webkit-scrollbar{display:none}.___SContainer_m2jzo_gg_.__keyboardFocused_m2jzo_gg_:focus::after{position:absolute;display:block;content:\"\";top:0;right:0;bottom:0;left:0;top:var(--focusRingTopOffset_m2jzo);right:var(--focusRingRightOffset_m2jzo);bottom:var(--focusRingBottomOffset_m2jzo);left:var(--focusRingLeftOffset_m2jzo);box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));pointer-events:none;z-index:2}" /*__inner_css_end__*/, "m2jzo_gg_") /*__reshadow_css_end__*/, {
+  "__SScrollArea": "___SScrollArea_m2jzo_gg_",
+  "__SShadowHorizontal": "___SShadowHorizontal_m2jzo_gg_",
+  "_leftOffset": "__leftOffset_m2jzo_gg_",
+  "--leftOffset": "--leftOffset_m2jzo",
+  "_rightOffset": "__rightOffset_m2jzo_gg_",
+  "--rightOffset": "--rightOffset_m2jzo",
+  "__SShadowVertical": "___SShadowVertical_m2jzo_gg_",
+  "_topOffset": "__topOffset_m2jzo_gg_",
+  "--topOffset": "--topOffset_m2jzo",
+  "_bottomOffset": "__bottomOffset_m2jzo_gg_",
+  "--bottomOffset": "--bottomOffset_m2jzo",
+  "__SContainer": "___SContainer_m2jzo_gg_",
+  "_keyboardFocused": "__keyboardFocused_m2jzo_gg_",
+  "--focusRingTopOffset": "--focusRingTopOffset_m2jzo",
+  "--focusRingRightOffset": "--focusRingRightOffset_m2jzo",
+  "--focusRingBottomOffset": "--focusRingBottomOffset_m2jzo",
+  "--focusRingLeftOffset": "--focusRingLeftOffset_m2jzo",
+  "_position_median": "_position_median_m2jzo_gg_",
+  "_position_start": "_position_start_m2jzo_gg_",
+  "_position_end": "_position_end_m2jzo_gg_"
 });
@@ -50,0 +50,0 @@ var eventCalculate = undefined;

lib/es6/ScrollBar.js

@@ -17,10 +17,12 @@ import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import { getNodeByRef } from '@semcore/utils/lib/ref';
+import contextEnhance from '@semcore/utils/lib/enhances/contextEnhance';
 /*__reshadow-styles__:"./style/scroll-bar.shadow.css"*/
-var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SScrollBar_11wdz_gg_{position:absolute;display:flex}.___SScrollBar_11wdz_gg_._orientation_vertical_11wdz_gg_{top:var(--intergalactic-spacing-1x, 4px);right:0;width:8px;height:calc(100% - var(--offsetSum_11wdz) - var(--intergalactic-spacing-2x, 8px));justify-content:center}.___SScrollBar_11wdz_gg_._orientation_horizontal_11wdz_gg_{bottom:0;height:12px;align-items:center;width:calc(100% - var(--offsetSum_11wdz) - var(--intergalactic-spacing-2x, 8px))}.___SSlider_11wdz_gg_{cursor:pointer;width:6px;height:6px;border-radius:4px;background-color:var(--intergalactic-scroll-bar-background, rgba(25, 27, 35, 0.3))}" /*__inner_css_end__*/, "11wdz_gg_") /*__reshadow_css_end__*/, {
-  "__SScrollBar": "___SScrollBar_11wdz_gg_",
-  "_orientation_vertical": "_orientation_vertical_11wdz_gg_",
-  "--offsetSum": "--offsetSum_11wdz",
-  "_orientation_horizontal": "_orientation_horizontal_11wdz_gg_",
-  "__SSlider": "___SSlider_11wdz_gg_"
+var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SScrollBar_fx5hn_gg_{position:absolute;display:flex}.___SScrollBar_fx5hn_gg_._orientation_vertical_fx5hn_gg_{top:var(--intergalactic-spacing-1x, 4px);right:0;width:8px;height:calc(100% - var(--offsetSum_fx5hn) - var(--intergalactic-spacing-2x, 8px));justify-content:center}.___SScrollBar_fx5hn_gg_._orientation_horizontal_fx5hn_gg_{bottom:0;height:12px;align-items:center;width:calc(100% - var(--offsetSum_fx5hn) - var(--intergalactic-spacing-2x, 8px))}.___SSlider_fx5hn_gg_{cursor:pointer;width:6px;height:6px;border-radius:4px;background-color:var(--intergalactic-scroll-bar-background, rgba(25, 27, 35, 0.3))}" /*__inner_css_end__*/, "fx5hn_gg_") /*__reshadow_css_end__*/, {
+  "__SScrollBar": "___SScrollBar_fx5hn_gg_",
+  "_orientation_vertical": "_orientation_vertical_fx5hn_gg_",
+  "--offsetSum": "--offsetSum_fx5hn",
+  "_orientation_horizontal": "_orientation_horizontal_fx5hn_gg_",
+  "__SSlider": "___SSlider_fx5hn_gg_"
 });
+export var hideScrollBarsFromScreenReadersContext = /*#__PURE__*/React.createContext(false);
 export var DEFAULT_SLIDER_SIZE = 50;
@@ -349,3 +351,4 @@
         container = _this$asProps2.container,
-        orientation = _this$asProps2.orientation;
+        orientation = _this$asProps2.orientation,
+        hideFromScreenReaders = _this$asProps2.hideFromScreenReaders;
       var visibleScroll = this.state.visibleScroll;
@@ -397,7 +400,8 @@ var _this$asProps3 = this.asProps,
         "offsetSum": "".concat(offsetSum, "px"),
-        "role": 'scrollbar',
+        "role": hideFromScreenReaders ? undefined : 'scrollbar',
+        "aria-hidden": hideFromScreenReaders ? 'true' : undefined,
         "ref": this.refBar,
-        "aria-valuemin": 0,
-        "aria-controls": "igc-".concat(uid, "-scroll-container"),
-        "aria-orientation": this.getOrientation(),
+        "aria-valuemin": hideFromScreenReaders ? undefined : 0,
+        "aria-controls": hideFromScreenReaders ? undefined : "igc-".concat(uid, "-scroll-container"),
+        "aria-orientation": hideFromScreenReaders ? undefined : this.getOrientation(),
         "onMouseDown": this.handleMouseDownBar,
@@ -412,2 +416,3 @@ "orientation": this.getOrientation()
 _defineProperty(ScrollBarRoot, "style", style);
+_defineProperty(ScrollBarRoot, "enhance", [contextEnhance(hideScrollBarsFromScreenReadersContext, 'hideFromScreenReaders')]);
 _defineProperty(ScrollBarRoot, "defaultProps", function () {
@@ -414,0 +419,0 @@ return {

lib/types/index.d.ts

@@ -75,3 +75,5 @@ import { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';
 
-export { eventCalculate };
+declare const hideScrollBarsFromScreenReadersContext: React.Context<boolean>;
+
+export { eventCalculate, hideScrollBarsFromScreenReadersContext };
 export default ScrollArea;

package.json

 {
   "name": "@semcore/scroll-area",
   "description": "Semrush ScrollArea Component",
-  "version": "5.34.1",
+  "version": "5.35.0-prerelease.0",
   "main": "lib/cjs/index.js",
@@ -12,7 +12,7 @@ "module": "lib/es6/index.js",
   "dependencies": {
-    "@semcore/utils": "4.32.1",
-    "@semcore/flex-box": "5.31.1"
+    "@semcore/utils": "4.32.2-prerelease.0",
+    "@semcore/flex-box": "5.31.2-prerelease.0"
   },
   "peerDependencies": {
-    "@semcore/core": "^2.17.5",
+    "@semcore/core": "^2.29.2-prerelease.0",
     "react": "16.8 - 18",
@@ -19,0 +19,0 @@ "react-dom": "16.8 - 18"

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

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

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

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

248972

increased by1.83%

Lines of code

2131

increased by1.04%

Worsened metrics

Number of low quality alerts

2

increased by100%

Dependency changes

• + Added@semcore/flex-box@5.31.2-prerelease.0(transitive)

• + Added@semcore/utils@4.32.2-prerelease.0(transitive)

• - Removed@semcore/flex-box@5.31.1(transitive)

• - Removed@semcore/utils@4.32.1(transitive)

• Updated@semcore/flex-box@5.31.2-prerelease.0

• Updated@semcore/utils@4.32.2-prerelease.0