@pingux/astro 2.25.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.
- package/lib/cjs/components/AccordionGroup/Accordion.styles.js +8 -5
- package/lib/cjs/components/AccordionGroup/AccordionGroup.js +8 -4
- package/lib/cjs/components/AccordionGroup/AccordionGroup.stories.js +44 -7
- package/lib/cjs/components/AccordionGroup/AccordionGroup.test.js +52 -0
- package/lib/cjs/components/AccordionItem/AccordionItem.js +18 -3
- package/lib/cjs/components/ColorField/ColorField.js +1 -1
- package/lib/cjs/components/ColorField/ColorField.mdx +3 -2
- package/lib/cjs/components/Text/Text.styles.d.ts +138 -94
- package/lib/cjs/components/Text/Text.styles.js +35 -22
- package/lib/cjs/utils/designUtils/figmaLinks.js +2 -1
- package/lib/components/AccordionGroup/Accordion.styles.js +6 -4
- package/lib/components/AccordionGroup/AccordionGroup.js +8 -4
- package/lib/components/AccordionGroup/AccordionGroup.stories.js +42 -6
- package/lib/components/AccordionGroup/AccordionGroup.test.js +52 -0
- package/lib/components/AccordionItem/AccordionItem.js +16 -2
- package/lib/components/ColorField/ColorField.js +2 -2
- package/lib/components/ColorField/ColorField.mdx +3 -2
- package/lib/components/Text/Text.styles.js +35 -22
- package/lib/utils/designUtils/figmaLinks.js +2 -1
- package/package.json +1 -1
@@ -12,7 +12,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
|
|
12
12
|
_Object$defineProperty(exports, "__esModule", {
|
13
13
|
value: true
|
14
14
|
});
|
15
|
-
exports["default"] = void 0;
|
15
|
+
exports.hoveredState = exports["default"] = void 0;
|
16
16
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
|
17
17
|
var _Buttons = require("../Button/Buttons.styles");
|
18
18
|
function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
@@ -44,6 +44,12 @@ var body = {
|
|
44
44
|
display: 'flex'
|
45
45
|
}
|
46
46
|
};
|
47
|
+
var hoveredState = {
|
48
|
+
'&.is-hovered': {
|
49
|
+
color: 'active'
|
50
|
+
}
|
51
|
+
};
|
52
|
+
exports.hoveredState = hoveredState;
|
47
53
|
var header = _objectSpread(_objectSpread({}, _Buttons.base), {}, {
|
48
54
|
display: 'inline-flex',
|
49
55
|
bg: 'transparent',
|
@@ -51,14 +57,11 @@ var header = _objectSpread(_objectSpread({}, _Buttons.base), {}, {
|
|
51
57
|
padding: '0 5px',
|
52
58
|
flexGrow: 0,
|
53
59
|
fontWeight: 700,
|
54
|
-
'&.is-hovered': {
|
55
|
-
color: 'active'
|
56
|
-
},
|
57
60
|
'&.is-pressed': {
|
58
61
|
color: 'accent.20'
|
59
62
|
},
|
60
63
|
'&.is-focused': _objectSpread({}, _Buttons.defaultFocus)
|
61
|
-
});
|
64
|
+
}, hoveredState);
|
62
65
|
var _default = {
|
63
66
|
title: title,
|
64
67
|
accordion: accordion,
|
@@ -30,7 +30,7 @@ var _index = require("../../index");
|
|
30
30
|
var _isIterable = require("../../utils/devUtils/props/isIterable");
|
31
31
|
var _AccordionItem = _interopRequireDefault(require("../AccordionItem"));
|
32
32
|
var _react2 = require("@emotion/react");
|
33
|
-
var _excluded = ["defaultExpandedKeys", "expandedKeys", "onExpandedChange"],
|
33
|
+
var _excluded = ["defaultExpandedKeys", "expandedKeys", "labelHeadingTag", "onExpandedChange"],
|
34
34
|
_excluded2 = ["onFocus"];
|
35
35
|
/**
|
36
36
|
* Console Warning: "Cannot update a component (`Unknown`)...`"
|
@@ -45,6 +45,7 @@ var AccordionGroup = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
45
45
|
var _context;
|
46
46
|
var defaultExpandedKeys = props.defaultExpandedKeys,
|
47
47
|
expandedKeys = props.expandedKeys,
|
48
|
+
labelHeadingTag = props.labelHeadingTag,
|
48
49
|
onExpandedChange = props.onExpandedChange,
|
49
50
|
others = (0, _objectWithoutProperties2["default"])(props, _excluded);
|
50
51
|
var state = (0, _reactStately.useTreeState)(props);
|
@@ -71,9 +72,10 @@ var AccordionGroup = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
71
72
|
ref: accordionRef
|
72
73
|
}, (0, _utils.mergeProps)(theseProps, others)), (0, _map["default"])(_context = (0, _from["default"])(state.collection)).call(_context, function (item) {
|
73
74
|
return (0, _react2.jsx)(_AccordionItem["default"], {
|
74
|
-
|
75
|
+
"data-id": item['data-id'],
|
75
76
|
item: item,
|
76
|
-
|
77
|
+
key: item.key,
|
78
|
+
labelHeadingTag: labelHeadingTag
|
77
79
|
}, item.props.children);
|
78
80
|
})));
|
79
81
|
});
|
@@ -92,7 +94,9 @@ AccordionGroup.propTypes = {
|
|
92
94
|
/** The initial expanded keys in the collection (uncontrolled). */
|
93
95
|
defaultExpandedKeys: _isIterable.isIterableProp,
|
94
96
|
/** Id of the selected element */
|
95
|
-
id: _propTypes["default"].string
|
97
|
+
id: _propTypes["default"].string,
|
98
|
+
/** HTML header element wrapping the label */
|
99
|
+
labelHeadingTag: _AccordionItem["default"].propTypes.labelHeadingTag
|
96
100
|
};
|
97
101
|
AccordionGroup.displayName = 'AccordionGroup';
|
98
102
|
var _default = AccordionGroup;
|
@@ -8,14 +8,16 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
|
|
8
8
|
_Object$defineProperty(exports, "__esModule", {
|
9
9
|
value: true
|
10
10
|
});
|
11
|
-
exports["default"] = exports.UncontrolledExpanded = exports.Multiple = exports.DisabledItems = exports.Default = exports.CustomPresentation = exports.ControlledExpanded = void 0;
|
11
|
+
exports["default"] = exports.UncontrolledExpanded = exports.Multiple = exports.DisabledItems = exports.DifferentLevels = exports.Default = exports.CustomPresentation = exports.ControlledExpanded = void 0;
|
12
12
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
|
13
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
|
13
14
|
var _react = _interopRequireWildcard(require("react"));
|
14
15
|
var _reactStately = require("react-stately");
|
15
16
|
var _storybookAddonDesigns = require("storybook-addon-designs");
|
16
17
|
var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
|
17
18
|
var _index = require("../../index");
|
18
19
|
var _figmaLinks = require("../../utils/designUtils/figmaLinks.js");
|
20
|
+
var _AccordionItem = require("../AccordionItem/AccordionItem");
|
19
21
|
var _AccordionGroup = _interopRequireDefault(require("./AccordionGroup.mdx"));
|
20
22
|
var _react2 = require("@emotion/react");
|
21
23
|
function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
@@ -86,12 +88,18 @@ var _default = {
|
|
86
88
|
control: {
|
87
89
|
type: 'none'
|
88
90
|
}
|
91
|
+
},
|
92
|
+
labelHeadingTag: {
|
93
|
+
control: 'radio',
|
94
|
+
options: _AccordionItem.validHeadingTags
|
89
95
|
}
|
90
96
|
}
|
91
97
|
};
|
92
98
|
exports["default"] = _default;
|
93
99
|
var Default = function Default(args) {
|
94
|
-
return (0, _react2.jsx)(_index.AccordionGroup,
|
100
|
+
return (0, _react2.jsx)(_index.AccordionGroup, (0, _extends2["default"])({
|
101
|
+
labelHeadingTag: "h3"
|
102
|
+
}, args), (0, _react2.jsx)(_reactStately.Item, {
|
95
103
|
key: "accordionKey",
|
96
104
|
textValue: "accordionKey",
|
97
105
|
label: "Accordion Label",
|
@@ -105,6 +113,30 @@ Default.parameters = {
|
|
105
113
|
url: _figmaLinks.FIGMA_LINKS.accordionGroup["default"]
|
106
114
|
}
|
107
115
|
};
|
116
|
+
var DifferentLevels = function DifferentLevels() {
|
117
|
+
return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.AccordionGroup, {
|
118
|
+
labelHeadingTag: "h3"
|
119
|
+
}, (0, _react2.jsx)(_reactStately.Item, {
|
120
|
+
key: "accordionLabelH3Key",
|
121
|
+
textValue: "accordionLabelH3Key",
|
122
|
+
label: "Accordion Label H3",
|
123
|
+
"data-id": "accordionItem"
|
124
|
+
}, (0, _react2.jsx)(_index.Text, null, "Render me!"))), (0, _react2.jsx)(_index.AccordionGroup, {
|
125
|
+
labelHeadingTag: "h2"
|
126
|
+
}, (0, _react2.jsx)(_reactStately.Item, {
|
127
|
+
key: "accordionLabelH2Key",
|
128
|
+
textValue: "accordionLabelH2Key",
|
129
|
+
label: "Accordion Label H2",
|
130
|
+
"data-id": "accordionItem"
|
131
|
+
}, (0, _react2.jsx)(_index.Text, null, "Render me!"))));
|
132
|
+
};
|
133
|
+
exports.DifferentLevels = DifferentLevels;
|
134
|
+
DifferentLevels.parameters = {
|
135
|
+
design: {
|
136
|
+
type: 'figma',
|
137
|
+
url: _figmaLinks.FIGMA_LINKS.accordionGroup.differentLevels
|
138
|
+
}
|
139
|
+
};
|
108
140
|
var Multiple = function Multiple() {
|
109
141
|
return (
|
110
142
|
/*
|
@@ -115,7 +147,8 @@ var Multiple = function Multiple() {
|
|
115
147
|
* ];
|
116
148
|
*/
|
117
149
|
(0, _react2.jsx)(_index.AccordionGroup, {
|
118
|
-
items: itemArray
|
150
|
+
items: itemArray,
|
151
|
+
labelHeadingTag: "h3"
|
119
152
|
}, function (item) {
|
120
153
|
return (0, _react2.jsx)(_reactStately.Item, {
|
121
154
|
key: item.key,
|
@@ -146,7 +179,8 @@ var ControlledExpanded = function ControlledExpanded() {
|
|
146
179
|
(0, _react2.jsx)(_index.AccordionGroup, {
|
147
180
|
onExpandedChange: setExpandedKeys,
|
148
181
|
expandedKeys: expandedKeys,
|
149
|
-
items: itemArray
|
182
|
+
items: itemArray,
|
183
|
+
labelHeadingTag: "h3"
|
150
184
|
}, function (item) {
|
151
185
|
return (0, _react2.jsx)(_reactStately.Item, {
|
152
186
|
key: item.key,
|
@@ -168,7 +202,8 @@ var UncontrolledExpanded = function UncontrolledExpanded() {
|
|
168
202
|
*/
|
169
203
|
(0, _react2.jsx)(_index.AccordionGroup, {
|
170
204
|
defaultExpandedKeys: ['t1'],
|
171
|
-
items: itemArray
|
205
|
+
items: itemArray,
|
206
|
+
labelHeadingTag: "h3"
|
172
207
|
}, function (item) {
|
173
208
|
return (0, _react2.jsx)(_reactStately.Item, {
|
174
209
|
key: item.key,
|
@@ -190,7 +225,8 @@ var DisabledItems = function DisabledItems() {
|
|
190
225
|
*/
|
191
226
|
(0, _react2.jsx)(_index.AccordionGroup, {
|
192
227
|
disabledKeys: ['t1', 't3'],
|
193
|
-
items: itemArrayDisabled
|
228
|
+
items: itemArrayDisabled,
|
229
|
+
labelHeadingTag: "h3"
|
194
230
|
}, function (item) {
|
195
231
|
return (0, _react2.jsx)(_reactStately.Item, {
|
196
232
|
key: item.key,
|
@@ -211,7 +247,8 @@ var CustomPresentation = function CustomPresentation() {
|
|
211
247
|
];
|
212
248
|
*/
|
213
249
|
(0, _react2.jsx)(_index.AccordionGroup, {
|
214
|
-
items: itemArrayDisabled
|
250
|
+
items: itemArrayDisabled,
|
251
|
+
labelHeadingTag: "h3"
|
215
252
|
}, function (item) {
|
216
253
|
return (0, _react2.jsx)(_reactStately.Item, {
|
217
254
|
key: item.key,
|
@@ -1,6 +1,7 @@
|
|
1
1
|
"use strict";
|
2
2
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
4
|
+
var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));
|
4
5
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
|
5
6
|
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
|
6
7
|
var _react = _interopRequireDefault(require("react"));
|
@@ -9,6 +10,7 @@ var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
|
|
9
10
|
var _index = require("../../index");
|
10
11
|
var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
|
11
12
|
var _testWrapper = require("../../utils/testUtils/testWrapper");
|
13
|
+
var _AccordionItem = require("../AccordionItem/AccordionItem");
|
12
14
|
var _Text = _interopRequireDefault(require("../Text"));
|
13
15
|
var _ = _interopRequireDefault(require("."));
|
14
16
|
var _react2 = require("@emotion/react");
|
@@ -353,4 +355,54 @@ test('accordion works if there are multiple, controlled on the same implementati
|
|
353
355
|
expect(secondSelectedItem).toHaveAttribute('aria-expanded', 'true');
|
354
356
|
_userEvent["default"].click(secondSelectedItem);
|
355
357
|
expect(secondSelectedItem).toHaveAttribute('aria-expanded', 'false');
|
358
|
+
});
|
359
|
+
|
360
|
+
// get the last char of heading tag and convert to number, 'h1' => 1
|
361
|
+
var getLabelHeadingLevel = function getLabelHeadingLevel(labelHeading) {
|
362
|
+
return Number((0, _slice["default"])(labelHeading).call(labelHeading, -1));
|
363
|
+
};
|
364
|
+
test('when labelHeadingTag is h1, the label is rendered as an h1 tag', function () {
|
365
|
+
var h1Tag = _AccordionItem.validHeadingTags[0];
|
366
|
+
getComponent({
|
367
|
+
labelHeadingTag: h1Tag
|
368
|
+
});
|
369
|
+
_testWrapper.screen.getAllByRole('heading', {
|
370
|
+
level: getLabelHeadingLevel(h1Tag)
|
371
|
+
});
|
372
|
+
});
|
373
|
+
test('when labelHeadingTag is h2, the label is rendered as an h2 tag', function () {
|
374
|
+
var h2Tag = _AccordionItem.validHeadingTags[1];
|
375
|
+
getComponent({
|
376
|
+
labelHeadingTag: h2Tag
|
377
|
+
});
|
378
|
+
_testWrapper.screen.getAllByRole('heading', {
|
379
|
+
level: getLabelHeadingLevel(h2Tag)
|
380
|
+
});
|
381
|
+
});
|
382
|
+
test('when labelHeadingTag is h3, the label is rendered as an h3 tag', function () {
|
383
|
+
var h3Tag = _AccordionItem.validHeadingTags[2];
|
384
|
+
getComponent({
|
385
|
+
labelHeadingTag: h3Tag
|
386
|
+
});
|
387
|
+
_testWrapper.screen.getAllByRole('heading', {
|
388
|
+
level: getLabelHeadingLevel(h3Tag)
|
389
|
+
});
|
390
|
+
});
|
391
|
+
test('when labelHeadingTag is h4, the label is rendered as an h4 tag', function () {
|
392
|
+
var h4Tag = _AccordionItem.validHeadingTags[3];
|
393
|
+
getComponent({
|
394
|
+
labelHeadingTag: h4Tag
|
395
|
+
});
|
396
|
+
_testWrapper.screen.getAllByRole('heading', {
|
397
|
+
level: getLabelHeadingLevel(h4Tag)
|
398
|
+
});
|
399
|
+
});
|
400
|
+
test('when labelHeadingTag is uppercase, the label is rendered', function () {
|
401
|
+
var h4Tag = _AccordionItem.validHeadingTags[3].toUpperCase();
|
402
|
+
getComponent({
|
403
|
+
labelHeadingTag: h4Tag
|
404
|
+
});
|
405
|
+
_testWrapper.screen.getAllByRole('heading', {
|
406
|
+
level: getLabelHeadingLevel(h4Tag)
|
407
|
+
});
|
356
408
|
});
|
@@ -8,7 +8,10 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
|
|
8
8
|
_Object$defineProperty(exports, "__esModule", {
|
9
9
|
value: true
|
10
10
|
});
|
11
|
-
exports["default"] = void 0;
|
11
|
+
exports.validHeadingTags = exports["default"] = void 0;
|
12
|
+
var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
|
13
|
+
var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
|
14
|
+
var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
|
12
15
|
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
|
13
16
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
|
14
17
|
var _react = _interopRequireWildcard(require("react"));
|
@@ -23,13 +26,18 @@ var _themeUi = require("theme-ui");
|
|
23
26
|
var _AccordionContext = require("../../context/AccordionContext");
|
24
27
|
var _hooks = require("../../hooks");
|
25
28
|
var _index = require("../../index");
|
29
|
+
var _Accordion = require("../AccordionGroup/Accordion.styles");
|
26
30
|
var _react2 = require("@emotion/react");
|
31
|
+
var _context;
|
27
32
|
var _excluded = ["label", "children", "textValue", "containerProps", "buttonProps", "regionProps"];
|
28
33
|
function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
29
34
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
35
|
+
var validHeadingTags = ['h1', 'h2', 'h3', 'h4'];
|
36
|
+
exports.validHeadingTags = validHeadingTags;
|
30
37
|
var AccordionItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
31
38
|
var className = props.className,
|
32
|
-
item = props.item
|
39
|
+
item = props.item,
|
40
|
+
labelHeadingTag = props.labelHeadingTag;
|
33
41
|
var _item$props = item.props,
|
34
42
|
label = _item$props.label,
|
35
43
|
children = _item$props.children,
|
@@ -75,6 +83,8 @@ var AccordionItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
75
83
|
}),
|
76
84
|
buttonClasses = _useStatusClasses2.classNames;
|
77
85
|
var ariaLabel = props['aria-label'] || item.props.label;
|
86
|
+
var isValidHeadingTag = (0, _includes["default"])(validHeadingTags).call(validHeadingTags, labelHeadingTag === null || labelHeadingTag === void 0 ? void 0 : labelHeadingTag.toLowerCase());
|
87
|
+
var validLabelHeadingTag = isValidHeadingTag ? labelHeadingTag === null || labelHeadingTag === void 0 ? void 0 : labelHeadingTag.toLowerCase() : 'span';
|
78
88
|
return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
|
79
89
|
variant: "accordion.accordion",
|
80
90
|
className: itemClasses
|
@@ -89,8 +99,10 @@ var AccordionItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
89
99
|
variant: "variants.accordion.header",
|
90
100
|
className: buttonClasses
|
91
101
|
}, (0, _reactAria.mergeProps)(hoverProps, accordionButtonProps, raButtonProps, buttonProps, focusProps)), (0, _react2.jsx)(_index.Text, {
|
102
|
+
as: validLabelHeadingTag,
|
92
103
|
className: buttonClasses,
|
93
|
-
variant:
|
104
|
+
variant: validLabelHeadingTag,
|
105
|
+
sx: _Accordion.hoveredState
|
94
106
|
}, item.props.label), (0, _react2.jsx)(_index.Box, {
|
95
107
|
as: "span",
|
96
108
|
ml: "5px"
|
@@ -107,6 +119,9 @@ var AccordionItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
107
119
|
});
|
108
120
|
AccordionItem.propTypes = {
|
109
121
|
'aria-label': _propTypes["default"].string,
|
122
|
+
labelHeadingTag: _propTypes["default"].oneOf((0, _concat["default"])(_context = []).call(_context, validHeadingTags, (0, _map["default"])(validHeadingTags).call(validHeadingTags, function (heading) {
|
123
|
+
return heading.toUpperCase();
|
124
|
+
}))),
|
110
125
|
item: _propTypes["default"].shape({
|
111
126
|
key: _propTypes["default"].string,
|
112
127
|
rendered: _propTypes["default"].node,
|
@@ -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.
|