@instructure/ui-range-input 8.22.1-snapshot.4 → 8.23.0

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.23.0](https://github.com/instructure/instructure-ui/compare/v8.22.0...v8.23.0) (2022-04-07)
+
+### Features
+
+- **shared-types,ui-range-input:** add accessible variant for RangeInput handle ([e71453c](https://github.com/instructure/instructure-ui/commit/e71453cd9e012b022e35f607c506174be157d8ec))
+
 # [8.22.0](https://github.com/instructure/instructure-ui/compare/v8.21.0...v8.22.0) (2022-03-31)
 
 **Note:** Version bump only for package @instructure/ui-range-input

package/es/RangeInput/index.js

@@ -204,7 +204,8 @@ let RangeInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
   layout: 'stacked',
   displayValue: true,
   disabled: false,
-  readOnly: false
+  readOnly: false,
+  thumbVariant: 'deprecated'
 }, _temp)) || _class) || _class) || _class);
 export default RangeInput;
 export { RangeInput };

package/es/RangeInput/props.js

@@ -23,6 +23,7 @@
  */
 import PropTypes from 'prop-types';
 import { controllable } from '@instructure/ui-prop-types';
+import { deprecated } from '@instructure/ui-react-utils';
 import { FormPropTypes } from '@instructure/ui-form-field';
 const propTypes = {
   min: PropTypes.number.isRequired,
@@ -40,7 +41,8 @@ const propTypes = {
   formatValue: PropTypes.func,
   inline: PropTypes.bool,
   disabled: PropTypes.bool,
-  readOnly: PropTypes.bool
+  readOnly: PropTypes.bool,
+  thumbVariant: deprecated.deprecatePropValues(PropTypes.oneOf(['deprecated', 'accessible']), ['deprecated'], 'The `deprecated` variant is not fully accessible and will be removed in V9. The connected theme variables will be removed as well: `handleShadowColor`, `handleFocusOutlineColor`, `handleFocusOutlineWidth`. Please use the `accessible` variant.')
 };
-const allowedProps = ['min', 'max', 'defaultValue', 'value', 'onChange', 'messages', 'size', 'layout', 'id', 'label', 'displayValue', 'step', 'formatValue', 'inline', 'disabled', 'readOnly'];
+const allowedProps = ['min', 'max', 'defaultValue', 'value', 'onChange', 'messages', 'size', 'layout', 'id', 'label', 'displayValue', 'step', 'formatValue', 'inline', 'disabled', 'readOnly', 'thumbVariant'];
 export { propTypes, allowedProps };

package/es/RangeInput/styles.js

@@ -33,7 +33,8 @@
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (componentTheme, props) => {
-  const size = props.size;
+  const size = props.size,
+        thumbVariant = props.thumbVariant;
   const valueSizeVariants = {
     small: {
       fontSize: componentTheme.valueSmallFontSize,
@@ -59,21 +60,51 @@ const generateStyle = (componentTheme, props) => {
     background: componentTheme.trackBackground,
     height: `calc(${componentTheme.handleSize} / 2)`
   };
+  const borderedHandleSize = `calc(${componentTheme.handleSize} + (${componentTheme.handleBorderSize} * 2))`;
+  const thumbVariantStyle = {
+    deprecated: {
+      width: componentTheme.handleSize,
+      height: componentTheme.handleSize,
+      boxShadow: `0 0.0625rem 0 ${componentTheme.handleShadowColor}`
+    },
+    accessible: {
+      width: borderedHandleSize,
+      height: borderedHandleSize,
+      borderWidth: componentTheme.handleBorderSize,
+      borderColor: componentTheme.handleBorderColor,
+      borderStyle: 'solid',
+      boxSizing: 'border-box',
+      boxShadow: componentTheme.handleShadow
+    }
+  };
   const thumbStyle = {
     appearance: 'none',
     borderRadius: '50%',
     cursor: 'pointer',
     transition: 'all 0.15s ease-in-out',
-    width: componentTheme.handleSize,
-    height: componentTheme.handleSize,
     background: componentTheme.handleBackground,
-    boxShadow: `0 0.0625rem 0 ${componentTheme.handleShadowColor}`,
+    ...thumbVariantStyle[thumbVariant],
     '&:hover': {
       background: componentTheme.handleHoverBackground
     }
   };
+  const thumbPosition = {
+    deprecated: {
+      marginTop: `calc(-1 * ${componentTheme.handleSize} / 4)`
+    },
+    accessible: {
+      marginTop: `calc(-1 * ${borderedHandleSize} / 4)`
+    }
+  };
   const thumbFocusActiveStyle = {
-    boxShadow: `0 0.0625rem 0 ${componentTheme.handleShadowColor}, 0 0 0 ${componentTheme.handleFocusOutlineWidth} ${componentTheme.handleFocusOutlineColor}`
+    deprecated: {
+      background: componentTheme.handleFocusBackground,
+      boxShadow: `0 0.0625rem 0 ${componentTheme.handleShadowColor}, 0 0 0 ${componentTheme.handleFocusOutlineWidth} ${componentTheme.handleFocusOutlineColor}`
+    },
+    accessible: {
+      background: componentTheme.handleFocusBackground,
+      boxShadow: componentTheme.handleShadow + ', ' + `inset 0 0 0 ${componentTheme.handleFocusInset} ${componentTheme.handleFocusBackground}, ` + `inset 0 0 0 calc(${componentTheme.handleFocusInset} + ${componentTheme.handleFocusRingSize}) ${componentTheme.handleFocusRingColor}`
+    }
   };
   return {
     rangeInput: {
@@ -94,13 +125,13 @@ const generateStyle = (componentTheme, props) => {
       outline: 'none',
       margin: 0,
       '&::-webkit-slider-thumb': { ...thumbStyle,
-        marginTop: `calc(-1 * ${componentTheme.handleSize} / 4)`
+        ...thumbPosition[thumbVariant]
       },
       '&::-moz-range-thumb': thumbStyle,
       '&:focus, &:active': {
         outline: 'none',
-        '&::-webkit-slider-thumb': thumbFocusActiveStyle,
-        '&::-moz-range-thumb': thumbFocusActiveStyle
+        '&::-webkit-slider-thumb': thumbFocusActiveStyle[thumbVariant],
+        '&::-moz-range-thumb': thumbFocusActiveStyle[thumbVariant]
       },
       // remove outline in FF
       '&::-moz-focus-inner, &::-moz-focus-outer': {

package/es/RangeInput/theme.js

@@ -30,6 +30,7 @@ import { alpha, darken } from '@instructure/ui-color-utils';
  */
 const generateComponentTheme = theme => {
   const colors = theme.colors,
+        borders = theme.borders,
         typography = theme.typography,
         spacing = theme.spacing,
         forms = theme.forms,
@@ -37,19 +38,27 @@ const generateComponentTheme = theme => {
   const themeSpecificStyle = {
     canvas: {
       handleBackground: theme['ic-brand-primary'],
-      handleShadowColor: darken(theme['ic-brand-primary'], 15),
-      handleFocusOutlineColor: alpha(theme['ic-brand-primary'], 40),
       handleHoverBackground: theme['ic-brand-primary'],
-      handleFocusBackground: theme['ic-brand-primary']
+      handleFocusBackground: theme['ic-brand-primary'],
+      // Deprecated, remove with "deprecated" thumbVariant
+      handleShadowColor: darken(theme['ic-brand-primary'], 15),
+      handleFocusOutlineColor: alpha(theme['ic-brand-primary'], 40)
     }
   };
   const componentVariables = {
     minWidth: '12.5rem',
     handleSize: '1.5rem',
     handleBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundBrand,
-    handleShadowColor: darken(colors === null || colors === void 0 ? void 0 : colors.borderBrand, 15),
-    handleHoverBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundBrand,
+    handleBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderLightest,
+    handleBorderSize: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
+    handleShadow: '0 0.0625rem 0.125rem rgba(0, 0, 0, .2), 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.1)',
+    handleFocusInset: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
+    handleFocusRingSize: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
+    handleFocusRingColor: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
     handleFocusBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundBrand,
+    handleHoverBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundBrand,
+    // Deprecated, remove with "deprecated" thumbVariant
+    handleShadowColor: darken(colors === null || colors === void 0 ? void 0 : colors.borderBrand, 15),
     handleFocusOutlineColor: alpha(colors === null || colors === void 0 ? void 0 : colors.borderBrand, 40),
     handleFocusOutlineWidth: '0.75em',
     trackBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundDark,

package/lib/RangeInput/index.js

@@ -204,7 +204,8 @@ let RangeInput = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2
   layout: 'stacked',
   displayValue: true,
   disabled: false,
-  readOnly: false
+  readOnly: false,
+  thumbVariant: 'deprecated'
 }, _temp)) || _class) || _class) || _class);
 exports.RangeInput = RangeInput;
 var _default = RangeInput;

package/lib/RangeInput/props.js

@@ -11,6 +11,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _controllable = require("@instructure/ui-prop-types/lib/controllable.js");
 
+var _deprecated = require("@instructure/ui-react-utils/lib/deprecated.js");
+
 var _FormPropTypes = require("@instructure/ui-form-field/lib/FormPropTypes.js");
 
 /*
@@ -52,8 +54,9 @@ const propTypes = {
   formatValue: _propTypes.default.func,
   inline: _propTypes.default.bool,
   disabled: _propTypes.default.bool,
-  readOnly: _propTypes.default.bool
+  readOnly: _propTypes.default.bool,
+  thumbVariant: _deprecated.deprecated.deprecatePropValues(_propTypes.default.oneOf(['deprecated', 'accessible']), ['deprecated'], 'The `deprecated` variant is not fully accessible and will be removed in V9. The connected theme variables will be removed as well: `handleShadowColor`, `handleFocusOutlineColor`, `handleFocusOutlineWidth`. Please use the `accessible` variant.')
 };
 exports.propTypes = propTypes;
-const allowedProps = ['min', 'max', 'defaultValue', 'value', 'onChange', 'messages', 'size', 'layout', 'id', 'label', 'displayValue', 'step', 'formatValue', 'inline', 'disabled', 'readOnly'];
+const allowedProps = ['min', 'max', 'defaultValue', 'value', 'onChange', 'messages', 'size', 'layout', 'id', 'label', 'displayValue', 'step', 'formatValue', 'inline', 'disabled', 'readOnly', 'thumbVariant'];
 exports.allowedProps = allowedProps;

package/lib/RangeInput/styles.js

@@ -40,7 +40,8 @@ exports.default = void 0;
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (componentTheme, props) => {
-  const size = props.size;
+  const size = props.size,
+        thumbVariant = props.thumbVariant;
   const valueSizeVariants = {
     small: {
       fontSize: componentTheme.valueSmallFontSize,
@@ -66,21 +67,51 @@ const generateStyle = (componentTheme, props) => {
     background: componentTheme.trackBackground,
     height: `calc(${componentTheme.handleSize} / 2)`
   };
+  const borderedHandleSize = `calc(${componentTheme.handleSize} + (${componentTheme.handleBorderSize} * 2))`;
+  const thumbVariantStyle = {
+    deprecated: {
+      width: componentTheme.handleSize,
+      height: componentTheme.handleSize,
+      boxShadow: `0 0.0625rem 0 ${componentTheme.handleShadowColor}`
+    },
+    accessible: {
+      width: borderedHandleSize,
+      height: borderedHandleSize,
+      borderWidth: componentTheme.handleBorderSize,
+      borderColor: componentTheme.handleBorderColor,
+      borderStyle: 'solid',
+      boxSizing: 'border-box',
+      boxShadow: componentTheme.handleShadow
+    }
+  };
   const thumbStyle = {
     appearance: 'none',
     borderRadius: '50%',
     cursor: 'pointer',
     transition: 'all 0.15s ease-in-out',
-    width: componentTheme.handleSize,
-    height: componentTheme.handleSize,
     background: componentTheme.handleBackground,
-    boxShadow: `0 0.0625rem 0 ${componentTheme.handleShadowColor}`,
+    ...thumbVariantStyle[thumbVariant],
     '&:hover': {
       background: componentTheme.handleHoverBackground
     }
   };
+  const thumbPosition = {
+    deprecated: {
+      marginTop: `calc(-1 * ${componentTheme.handleSize} / 4)`
+    },
+    accessible: {
+      marginTop: `calc(-1 * ${borderedHandleSize} / 4)`
+    }
+  };
   const thumbFocusActiveStyle = {
-    boxShadow: `0 0.0625rem 0 ${componentTheme.handleShadowColor}, 0 0 0 ${componentTheme.handleFocusOutlineWidth} ${componentTheme.handleFocusOutlineColor}`
+    deprecated: {
+      background: componentTheme.handleFocusBackground,
+      boxShadow: `0 0.0625rem 0 ${componentTheme.handleShadowColor}, 0 0 0 ${componentTheme.handleFocusOutlineWidth} ${componentTheme.handleFocusOutlineColor}`
+    },
+    accessible: {
+      background: componentTheme.handleFocusBackground,
+      boxShadow: componentTheme.handleShadow + ', ' + `inset 0 0 0 ${componentTheme.handleFocusInset} ${componentTheme.handleFocusBackground}, ` + `inset 0 0 0 calc(${componentTheme.handleFocusInset} + ${componentTheme.handleFocusRingSize}) ${componentTheme.handleFocusRingColor}`
+    }
   };
   return {
     rangeInput: {
@@ -101,13 +132,13 @@ const generateStyle = (componentTheme, props) => {
       outline: 'none',
       margin: 0,
       '&::-webkit-slider-thumb': { ...thumbStyle,
-        marginTop: `calc(-1 * ${componentTheme.handleSize} / 4)`
+        ...thumbPosition[thumbVariant]
       },
       '&::-moz-range-thumb': thumbStyle,
       '&:focus, &:active': {
         outline: 'none',
-        '&::-webkit-slider-thumb': thumbFocusActiveStyle,
-        '&::-moz-range-thumb': thumbFocusActiveStyle
+        '&::-webkit-slider-thumb': thumbFocusActiveStyle[thumbVariant],
+        '&::-moz-range-thumb': thumbFocusActiveStyle[thumbVariant]
       },
       // remove outline in FF
       '&::-moz-focus-inner, &::-moz-focus-outer': {

package/lib/RangeInput/theme.js

@@ -40,6 +40,7 @@ var _darken = require("@instructure/ui-color-utils/lib/darken.js");
  */
 const generateComponentTheme = theme => {
   const colors = theme.colors,
+        borders = theme.borders,
         typography = theme.typography,
         spacing = theme.spacing,
         forms = theme.forms,
@@ -47,19 +48,27 @@ const generateComponentTheme = theme => {
   const themeSpecificStyle = {
     canvas: {
       handleBackground: theme['ic-brand-primary'],
-      handleShadowColor: (0, _darken.darken)(theme['ic-brand-primary'], 15),
-      handleFocusOutlineColor: (0, _alpha.alpha)(theme['ic-brand-primary'], 40),
       handleHoverBackground: theme['ic-brand-primary'],
-      handleFocusBackground: theme['ic-brand-primary']
+      handleFocusBackground: theme['ic-brand-primary'],
+      // Deprecated, remove with "deprecated" thumbVariant
+      handleShadowColor: (0, _darken.darken)(theme['ic-brand-primary'], 15),
+      handleFocusOutlineColor: (0, _alpha.alpha)(theme['ic-brand-primary'], 40)
     }
   };
   const componentVariables = {
     minWidth: '12.5rem',
     handleSize: '1.5rem',
     handleBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundBrand,
-    handleShadowColor: (0, _darken.darken)(colors === null || colors === void 0 ? void 0 : colors.borderBrand, 15),
-    handleHoverBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundBrand,
+    handleBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderLightest,
+    handleBorderSize: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
+    handleShadow: '0 0.0625rem 0.125rem rgba(0, 0, 0, .2), 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.1)',
+    handleFocusInset: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
+    handleFocusRingSize: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
+    handleFocusRingColor: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
     handleFocusBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundBrand,
+    handleHoverBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundBrand,
+    // Deprecated, remove with "deprecated" thumbVariant
+    handleShadowColor: (0, _darken.darken)(colors === null || colors === void 0 ? void 0 : colors.borderBrand, 15),
     handleFocusOutlineColor: (0, _alpha.alpha)(colors === null || colors === void 0 ? void 0 : colors.borderBrand, 40),
     handleFocusOutlineWidth: '0.75em',
     trackBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundDark,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-range-input",
-  "version": "8.22.1-snapshot.4+5809c01bc",
+  "version": "8.23.0",
   "description": "A styled HTML range input",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -24,26 +24,26 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/console": "8.22.1-snapshot.4+5809c01bc",
-    "@instructure/emotion": "8.22.1-snapshot.4+5809c01bc",
-    "@instructure/shared-types": "8.22.1-snapshot.4+5809c01bc",
-    "@instructure/ui-color-utils": "8.22.1-snapshot.4+5809c01bc",
-    "@instructure/ui-dom-utils": "8.22.1-snapshot.4+5809c01bc",
-    "@instructure/ui-form-field": "8.22.1-snapshot.4+5809c01bc",
-    "@instructure/ui-i18n": "8.22.1-snapshot.4+5809c01bc",
-    "@instructure/ui-prop-types": "8.22.1-snapshot.4+5809c01bc",
-    "@instructure/ui-react-utils": "8.22.1-snapshot.4+5809c01bc",
-    "@instructure/ui-testable": "8.22.1-snapshot.4+5809c01bc",
-    "@instructure/ui-utils": "8.22.1-snapshot.4+5809c01bc",
-    "@instructure/ui-view": "8.22.1-snapshot.4+5809c01bc",
-    "@instructure/uid": "8.22.1-snapshot.4+5809c01bc",
+    "@instructure/console": "8.23.0",
+    "@instructure/emotion": "8.23.0",
+    "@instructure/shared-types": "8.23.0",
+    "@instructure/ui-color-utils": "8.23.0",
+    "@instructure/ui-dom-utils": "8.23.0",
+    "@instructure/ui-form-field": "8.23.0",
+    "@instructure/ui-i18n": "8.23.0",
+    "@instructure/ui-prop-types": "8.23.0",
+    "@instructure/ui-react-utils": "8.23.0",
+    "@instructure/ui-testable": "8.23.0",
+    "@instructure/ui-utils": "8.23.0",
+    "@instructure/ui-view": "8.23.0",
+    "@instructure/uid": "8.23.0",
     "prop-types": "^15"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.22.1-snapshot.4+5809c01bc",
-    "@instructure/ui-test-locator": "8.22.1-snapshot.4+5809c01bc",
-    "@instructure/ui-test-utils": "8.22.1-snapshot.4+5809c01bc",
-    "@instructure/ui-themes": "8.22.1-snapshot.4+5809c01bc"
+    "@instructure/ui-babel-preset": "8.23.0",
+    "@instructure/ui-test-locator": "8.23.0",
+    "@instructure/ui-test-utils": "8.23.0",
+    "@instructure/ui-themes": "8.23.0"
   },
   "peerDependencies": {
     "react": ">=16.8 <=17"
@@ -51,6 +51,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "sideEffects": false,
-  "gitHead": "5809c01bc3fc6e7b468d18d44c22f364304561ed"
+  "sideEffects": false
 }

package/src/RangeInput/README.md

@@ -10,25 +10,67 @@ render: false
 example: true
 ---
 class Example extends React.Component {
-  state = { size: "small" }
-  handleModalSizeChange = (event, value) => {
+  state = {
+    size: "small",
+    thumbVariant: "accessible",
+  }
+
+  handleSizeChange = (event, value) => {
     this.setState({ size: value })
   }
+
+  handleThumbVariantChange = (event, value) => {
+    this.setState({ thumbVariant: value })
+  }
+
   render() {
     return (
       <div>
-        <RangeInput label="Grading range" defaultValue={30} max={100} min={0} size={this.state.size} />
-        <RadioInputGroup
-          onChange={this.handleModalSizeChange}
-          name="labelSize"
-          defaultValue="small"
-          description="Label size"
-          variant="toggle"
+        <View
+          as="div"
+          padding="medium"
+          background="primary"
         >
-          <RadioInput label="small" value="small" />
-          <RadioInput label="medium" value="medium" />
-          <RadioInput label="large" value="large" />
-        </RadioInputGroup>
+          <RangeInput
+            label="Grading range"
+            defaultValue={30}
+            max={100}
+            min={0}
+            size={this.state.size}
+            thumbVariant={this.state.thumbVariant}
+          />
+        </View>
+
+        <View as="div" margin='medium 0 0'>
+          <FormFieldGroup
+            description={
+              <ScreenReaderContent>RangeInput Example Settings</ScreenReaderContent>
+            }
+            layout='columns'
+            vAlign='top'
+          >
+            <RadioInputGroup
+              onChange={this.handleSizeChange}
+              name="labelSize"
+              value={this.state.size}
+              description="Label size"
+            >
+              <RadioInput label="small" value="small" />
+              <RadioInput label="medium" value="medium" />
+              <RadioInput label="large" value="large" />
+            </RadioInputGroup>
+
+            <RadioInputGroup
+              onChange={this.handleThumbVariantChange}
+              name="thumbVariant"
+              value={this.state.thumbVariant}
+              description="Thumb variant"
+            >
+              <RadioInput label="accessible" value="accessible" />
+              <RadioInput label="deprecated" value="deprecated" />
+            </RadioInputGroup>
+          </FormFieldGroup>
+        </View>
       </div>
     )
   }

package/src/RangeInput/index.tsx

@@ -72,7 +72,8 @@ class RangeInput extends Component<RangeInputProps, RangeInputState> {
     layout: 'stacked',
     displayValue: true,
     disabled: false,
-    readOnly: false
+    readOnly: false,
+    thumbVariant: 'deprecated'
   }
 
   ref: Element | null = null

package/src/RangeInput/props.ts

@@ -26,6 +26,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 
 import { controllable } from '@instructure/ui-prop-types'
+import { deprecated } from '@instructure/ui-react-utils'
 import { FormPropTypes } from '@instructure/ui-form-field'
 
 import type {
@@ -89,6 +90,14 @@ type RangeInputOwnProps = {
   disabled?: boolean
 
   readOnly?: boolean
+
+  /**
+   * The "default" variant has an outer shadow on focus.
+   * The "accessible" variant has better color contrast, border and inset focus ring for better accessibility.
+   */
+  thumbVariant?:
+    | 'deprecated' // TODO: deprecated, remove in V9.
+    | 'accessible'
 }
 
 type PropKeys = keyof RangeInputOwnProps
@@ -101,12 +110,13 @@ type RangeInputProps =
     FormFieldOwnProps,
     'label' | 'inline' | 'id' | 'elementRef'
   > &
-  RangeInputOwnProps &
-  WithStyleProps<RangeInputTheme, RangeInputStyle> &
-  OtherHTMLAttributes<
-    RangeInputOwnProps,
-    InputHTMLAttributes<RangeInputOwnProps>
-  > & WithDeterministicIdProps
+    RangeInputOwnProps &
+    WithStyleProps<RangeInputTheme, RangeInputStyle> &
+    OtherHTMLAttributes<
+      RangeInputOwnProps,
+      InputHTMLAttributes<RangeInputOwnProps>
+    > &
+    WithDeterministicIdProps
 
 type RangeInputStyle = ComponentStyle<
   'rangeInput' | 'rangeInputInput' | 'rangeInputInputValue'
@@ -132,7 +142,12 @@ const propTypes: PropValidators<PropKeys> = {
   formatValue: PropTypes.func,
   inline: PropTypes.bool,
   disabled: PropTypes.bool,
-  readOnly: PropTypes.bool
+  readOnly: PropTypes.bool,
+  thumbVariant: deprecated.deprecatePropValues(
+    PropTypes.oneOf(['deprecated', 'accessible']),
+    ['deprecated'],
+    'The `deprecated` variant is not fully accessible and will be removed in V9. The connected theme variables will be removed as well: `handleShadowColor`, `handleFocusOutlineColor`, `handleFocusOutlineWidth`. Please use the `accessible` variant.'
+  )
 }
 
 const allowedProps: AllowedPropKeys = [
@@ -151,7 +166,8 @@ const allowedProps: AllowedPropKeys = [
   'formatValue',
   'inline',
   'disabled',
-  'readOnly'
+  'readOnly',
+  'thumbVariant'
 ]
 
 export type { RangeInputProps, RangeInputState, RangeInputStyle }

package/src/RangeInput/styles.ts

@@ -39,7 +39,7 @@ const generateStyle = (
   componentTheme: RangeInputTheme,
   props: RangeInputProps
 ): RangeInputStyle => {
-  const { size } = props
+  const { size, thumbVariant } = props
   const valueSizeVariants = {
     small: {
       fontSize: componentTheme.valueSmallFontSize,
@@ -57,6 +57,7 @@ const generateStyle = (
       lineHeight: componentTheme.valueLargeLineHeight
     }
   }
+
   const trackStyle = {
     borderRadius: '0.312em',
     borderColor: 'transparent',
@@ -65,21 +66,61 @@ const generateStyle = (
     background: componentTheme.trackBackground,
     height: `calc(${componentTheme.handleSize} / 2)`
   }
+
+  const borderedHandleSize = `calc(${componentTheme.handleSize} + (${componentTheme.handleBorderSize} * 2))`
+
+  const thumbVariantStyle = {
+    deprecated: {
+      width: componentTheme.handleSize,
+      height: componentTheme.handleSize,
+      boxShadow: `0 0.0625rem 0 ${componentTheme.handleShadowColor}`
+    },
+    accessible: {
+      width: borderedHandleSize,
+      height: borderedHandleSize,
+      borderWidth: componentTheme.handleBorderSize,
+      borderColor: componentTheme.handleBorderColor,
+      borderStyle: 'solid',
+      boxSizing: 'border-box',
+      boxShadow: componentTheme.handleShadow
+    }
+  }
+
   const thumbStyle = {
     appearance: 'none',
     borderRadius: '50%',
     cursor: 'pointer',
     transition: 'all 0.15s ease-in-out',
-    width: componentTheme.handleSize,
-    height: componentTheme.handleSize,
     background: componentTheme.handleBackground,
-    boxShadow: `0 0.0625rem 0 ${componentTheme.handleShadowColor}`,
+    ...thumbVariantStyle[thumbVariant!],
+
     '&:hover': {
       background: componentTheme.handleHoverBackground
     }
   }
+
+  const thumbPosition = {
+    deprecated: {
+      marginTop: `calc(-1 * ${componentTheme.handleSize} / 4)`
+    },
+    accessible: {
+      marginTop: `calc(-1 * ${borderedHandleSize} / 4)`
+    }
+  }
+
   const thumbFocusActiveStyle = {
-    boxShadow: `0 0.0625rem 0 ${componentTheme.handleShadowColor}, 0 0 0 ${componentTheme.handleFocusOutlineWidth} ${componentTheme.handleFocusOutlineColor}`
+    deprecated: {
+      background: componentTheme.handleFocusBackground,
+      boxShadow: `0 0.0625rem 0 ${componentTheme.handleShadowColor}, 0 0 0 ${componentTheme.handleFocusOutlineWidth} ${componentTheme.handleFocusOutlineColor}`
+    },
+    accessible: {
+      background: componentTheme.handleFocusBackground,
+      boxShadow:
+        componentTheme.handleShadow +
+        ', ' +
+        `inset 0 0 0 ${componentTheme.handleFocusInset} ${componentTheme.handleFocusBackground}, ` +
+        `inset 0 0 0 calc(${componentTheme.handleFocusInset} + ${componentTheme.handleFocusRingSize}) ${componentTheme.handleFocusRingColor}`
+    }
   }
 
   return {
@@ -99,15 +140,16 @@ const generateStyle = (
       width: '100%', // for Firefox
       outline: 'none',
       margin: 0,
+
       '&::-webkit-slider-thumb': {
         ...thumbStyle,
-        marginTop: `calc(-1 * ${componentTheme.handleSize} / 4)`
+        ...thumbPosition[thumbVariant!]
       },
       '&::-moz-range-thumb': thumbStyle,
       '&:focus, &:active': {
         outline: 'none',
-        '&::-webkit-slider-thumb': thumbFocusActiveStyle,
-        '&::-moz-range-thumb': thumbFocusActiveStyle
+        '&::-webkit-slider-thumb': thumbFocusActiveStyle[thumbVariant!],
+        '&::-moz-range-thumb': thumbFocusActiveStyle[thumbVariant!]
       },
       // remove outline in FF
       '&::-moz-focus-inner, &::-moz-focus-outer': {