@pingux/astro 2.26.0-alpha.0 → 2.26.0-alpha.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -127,7 +127,7 @@ var ColorField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
|
127
127
|
restoreFocus: true,
|
|
128
128
|
contain: true,
|
|
129
129
|
autoFocus: true
|
|
130
|
-
}, (0, _react2.jsx)(_reactColor.
|
|
130
|
+
}, (0, _react2.jsx)(_reactColor.SketchPicker, {
|
|
131
131
|
color: getRgbaFromState(state),
|
|
132
132
|
onChange: handleColorChange
|
|
133
133
|
}))));
|
|
@@ -29,10 +29,11 @@ These keys provide additional functionality to the component.
|
|
|
29
29
|
| Shift + Tab | Moves focus to the previous focusable component. |
|
|
30
30
|
| Space or Enter | Opens the color swatch when it is focused. Once opened, the focus moves to the input field and is locked inside the ColorPicker Overlay. |
|
|
31
31
|
| Esc | When the picker is open, pressing the escape key closes the overlay and focuses on the previously focused component. |
|
|
32
|
+
| Up and Down Arrows | Using the up and down arrows on any of the RGBA inputs adjusts the value of the input in focus.
|
|
32
33
|
|
|
33
34
|
#### Screen Readers
|
|
34
35
|
|
|
35
36
|
This component uses the following attributes to assist screen readers:
|
|
36
|
-
- The trigger button uses the **`aria-expanded`** attribute to indicate the expansion and collapse of
|
|
37
|
-
- When expanded, **`aria-controls`** is added to the button pointing to the
|
|
37
|
+
- The trigger button uses the **`aria-expanded`** attribute to indicate the expansion and collapse of Sketch Picker.
|
|
38
|
+
- When expanded, **`aria-controls`** is added to the button pointing to the Sketch Picker.
|
|
38
39
|
- The visibly hidden input uses the **`aria-labelledby`** attribute supplied with label ID.
|
|
@@ -13,7 +13,7 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
|
|
|
13
13
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context5, _context6; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context5 = ownKeys(Object(source), !0)).call(_context5, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context6 = ownKeys(Object(source))).call(_context6, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
14
14
|
import React, { forwardRef, useCallback, useImperativeHandle, useRef } from 'react';
|
|
15
15
|
import { FocusScope, mergeProps, useOverlayPosition, useOverlayTrigger, useVisuallyHidden } from 'react-aria';
|
|
16
|
-
import {
|
|
16
|
+
import { SketchPicker } from 'react-color';
|
|
17
17
|
import { useOverlayTriggerState } from 'react-stately';
|
|
18
18
|
import { useColorField } from '@react-aria/color';
|
|
19
19
|
import { useColorFieldState } from '@react-stately/color';
|
|
@@ -116,7 +116,7 @@ var ColorField = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
116
116
|
restoreFocus: true,
|
|
117
117
|
contain: true,
|
|
118
118
|
autoFocus: true
|
|
119
|
-
}, ___EmotionJSX(
|
|
119
|
+
}, ___EmotionJSX(SketchPicker, {
|
|
120
120
|
color: getRgbaFromState(state),
|
|
121
121
|
onChange: handleColorChange
|
|
122
122
|
}))));
|
|
@@ -29,10 +29,11 @@ These keys provide additional functionality to the component.
|
|
|
29
29
|
| Shift + Tab | Moves focus to the previous focusable component. |
|
|
30
30
|
| Space or Enter | Opens the color swatch when it is focused. Once opened, the focus moves to the input field and is locked inside the ColorPicker Overlay. |
|
|
31
31
|
| Esc | When the picker is open, pressing the escape key closes the overlay and focuses on the previously focused component. |
|
|
32
|
+
| Up and Down Arrows | Using the up and down arrows on any of the RGBA inputs adjusts the value of the input in focus.
|
|
32
33
|
|
|
33
34
|
#### Screen Readers
|
|
34
35
|
|
|
35
36
|
This component uses the following attributes to assist screen readers:
|
|
36
|
-
- The trigger button uses the **`aria-expanded`** attribute to indicate the expansion and collapse of
|
|
37
|
-
- When expanded, **`aria-controls`** is added to the button pointing to the
|
|
37
|
+
- The trigger button uses the **`aria-expanded`** attribute to indicate the expansion and collapse of Sketch Picker.
|
|
38
|
+
- When expanded, **`aria-controls`** is added to the button pointing to the Sketch Picker.
|
|
38
39
|
- The visibly hidden input uses the **`aria-labelledby`** attribute supplied with label ID.
|