@atlaskit/radio 8.1.7 → 8.2.0
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/CHANGELOG.md +13 -0
- package/dist/cjs/radio.js +8 -3
- package/dist/es2019/radio.js +7 -2
- package/dist/esm/radio.js +8 -3
- package/dist/types/types.d.ts +6 -0
- package/dist/types-ts4.5/types.d.ts +6 -0
- package/package.json +7 -7
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,18 @@
|
|
|
1
1
|
# @atlaskit/radio
|
|
2
2
|
|
|
3
|
+
## 8.2.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [`8f13376aa76a6`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8f13376aa76a6) -
|
|
8
|
+
Add `labelId` prop to allow referencing of external elements for the accessible name.
|
|
9
|
+
|
|
10
|
+
## 8.1.8
|
|
11
|
+
|
|
12
|
+
### Patch Changes
|
|
13
|
+
|
|
14
|
+
- Updated dependencies
|
|
15
|
+
|
|
3
16
|
## 8.1.7
|
|
4
17
|
|
|
5
18
|
### Patch Changes
|
package/dist/cjs/radio.js
CHANGED
|
@@ -17,10 +17,10 @@ var _usePlatformLeafEventHandler = require("@atlaskit/analytics-next/usePlatform
|
|
|
17
17
|
var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
|
|
18
18
|
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
19
19
|
var _colors = require("@atlaskit/theme/colors");
|
|
20
|
-
var _excluded = ["ariaLabel", "isDisabled", "isRequired", "isInvalid", "isChecked", "label", "name", "onChange", "value", "testId", "analyticsContext"];
|
|
20
|
+
var _excluded = ["ariaLabel", "aria-labelledby", "isDisabled", "isRequired", "isInvalid", "isChecked", "label", "labelId", "name", "onChange", "value", "testId", "analyticsContext"];
|
|
21
21
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
22
22
|
var packageName = "@atlaskit/radio";
|
|
23
|
-
var packageVersion = "8.1.
|
|
23
|
+
var packageVersion = "8.1.8";
|
|
24
24
|
var noop = _noop.default;
|
|
25
25
|
var labelPaddingStyles = null;
|
|
26
26
|
var labelStyles = null;
|
|
@@ -28,6 +28,7 @@ var radioStyles = null;
|
|
|
28
28
|
var newRadioStyles = null;
|
|
29
29
|
var InnerRadio = /*#__PURE__*/(0, _react.forwardRef)(function Radio(props, ref) {
|
|
30
30
|
var ariaLabel = props.ariaLabel,
|
|
31
|
+
ariaLabelledBy = props['aria-labelledby'],
|
|
31
32
|
_props$isDisabled = props.isDisabled,
|
|
32
33
|
isDisabled = _props$isDisabled === void 0 ? false : _props$isDisabled,
|
|
33
34
|
isRequired = props.isRequired,
|
|
@@ -36,6 +37,7 @@ var InnerRadio = /*#__PURE__*/(0, _react.forwardRef)(function Radio(props, ref)
|
|
|
36
37
|
_props$isChecked = props.isChecked,
|
|
37
38
|
isChecked = _props$isChecked === void 0 ? false : _props$isChecked,
|
|
38
39
|
label = props.label,
|
|
40
|
+
labelId = props.labelId,
|
|
39
41
|
name = props.name,
|
|
40
42
|
_props$onChange = props.onChange,
|
|
41
43
|
onChange = _props$onChange === void 0 ? noop : _props$onChange,
|
|
@@ -62,7 +64,10 @@ var InnerRadio = /*#__PURE__*/(0, _react.forwardRef)(function Radio(props, ref)
|
|
|
62
64
|
}, /*#__PURE__*/React.createElement("input", (0, _extends2.default)({}, rest, {
|
|
63
65
|
// It is necessary only for Safari. It allows to render focus styles.
|
|
64
66
|
tabIndex: 0,
|
|
65
|
-
"aria-label": ariaLabel
|
|
67
|
+
"aria-label": ariaLabel
|
|
68
|
+
// TODO: Make `aria-labelledby` a `never` in TS. See https://product-fabric.atlassian.net/browse/DSP-23009
|
|
69
|
+
,
|
|
70
|
+
"aria-labelledby": labelId || ariaLabelledBy,
|
|
66
71
|
checked: isChecked,
|
|
67
72
|
disabled: isDisabled,
|
|
68
73
|
name: name,
|
package/dist/es2019/radio.js
CHANGED
|
@@ -9,7 +9,7 @@ import __noop from '@atlaskit/ds-lib/noop';
|
|
|
9
9
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
10
10
|
import { B200, B300, B400, B50, N10, N100, N20, N30, N70, N80, N900, R300 } from '@atlaskit/theme/colors';
|
|
11
11
|
const packageName = "@atlaskit/radio";
|
|
12
|
-
const packageVersion = "8.1.
|
|
12
|
+
const packageVersion = "8.1.8";
|
|
13
13
|
const noop = __noop;
|
|
14
14
|
const labelPaddingStyles = null;
|
|
15
15
|
const labelStyles = null;
|
|
@@ -18,11 +18,13 @@ const newRadioStyles = null;
|
|
|
18
18
|
const InnerRadio = /*#__PURE__*/forwardRef(function Radio(props, ref) {
|
|
19
19
|
const {
|
|
20
20
|
ariaLabel,
|
|
21
|
+
'aria-labelledby': ariaLabelledBy,
|
|
21
22
|
isDisabled = false,
|
|
22
23
|
isRequired,
|
|
23
24
|
isInvalid = false,
|
|
24
25
|
isChecked = false,
|
|
25
26
|
label,
|
|
27
|
+
labelId,
|
|
26
28
|
name,
|
|
27
29
|
onChange = noop,
|
|
28
30
|
value,
|
|
@@ -46,7 +48,10 @@ const InnerRadio = /*#__PURE__*/forwardRef(function Radio(props, ref) {
|
|
|
46
48
|
}, /*#__PURE__*/React.createElement("input", _extends({}, rest, {
|
|
47
49
|
// It is necessary only for Safari. It allows to render focus styles.
|
|
48
50
|
tabIndex: 0,
|
|
49
|
-
"aria-label": ariaLabel
|
|
51
|
+
"aria-label": ariaLabel
|
|
52
|
+
// TODO: Make `aria-labelledby` a `never` in TS. See https://product-fabric.atlassian.net/browse/DSP-23009
|
|
53
|
+
,
|
|
54
|
+
"aria-labelledby": labelId || ariaLabelledBy,
|
|
50
55
|
checked: isChecked,
|
|
51
56
|
disabled: isDisabled,
|
|
52
57
|
name: name,
|
package/dist/esm/radio.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/* radio.tsx generated by @compiled/babel-plugin v0.36.1 */
|
|
2
2
|
import _extends from "@babel/runtime/helpers/extends";
|
|
3
3
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
4
|
-
var _excluded = ["ariaLabel", "isDisabled", "isRequired", "isInvalid", "isChecked", "label", "name", "onChange", "value", "testId", "analyticsContext"];
|
|
4
|
+
var _excluded = ["ariaLabel", "aria-labelledby", "isDisabled", "isRequired", "isInvalid", "isChecked", "label", "labelId", "name", "onChange", "value", "testId", "analyticsContext"];
|
|
5
5
|
import "./radio.compiled.css";
|
|
6
6
|
import * as React from 'react';
|
|
7
7
|
import { ax, ix } from "@compiled/react/runtime";
|
|
@@ -11,7 +11,7 @@ import __noop from '@atlaskit/ds-lib/noop';
|
|
|
11
11
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
12
12
|
import { B200, B300, B400, B50, N10, N100, N20, N30, N70, N80, N900, R300 } from '@atlaskit/theme/colors';
|
|
13
13
|
var packageName = "@atlaskit/radio";
|
|
14
|
-
var packageVersion = "8.1.
|
|
14
|
+
var packageVersion = "8.1.8";
|
|
15
15
|
var noop = __noop;
|
|
16
16
|
var labelPaddingStyles = null;
|
|
17
17
|
var labelStyles = null;
|
|
@@ -19,6 +19,7 @@ var radioStyles = null;
|
|
|
19
19
|
var newRadioStyles = null;
|
|
20
20
|
var InnerRadio = /*#__PURE__*/forwardRef(function Radio(props, ref) {
|
|
21
21
|
var ariaLabel = props.ariaLabel,
|
|
22
|
+
ariaLabelledBy = props['aria-labelledby'],
|
|
22
23
|
_props$isDisabled = props.isDisabled,
|
|
23
24
|
isDisabled = _props$isDisabled === void 0 ? false : _props$isDisabled,
|
|
24
25
|
isRequired = props.isRequired,
|
|
@@ -27,6 +28,7 @@ var InnerRadio = /*#__PURE__*/forwardRef(function Radio(props, ref) {
|
|
|
27
28
|
_props$isChecked = props.isChecked,
|
|
28
29
|
isChecked = _props$isChecked === void 0 ? false : _props$isChecked,
|
|
29
30
|
label = props.label,
|
|
31
|
+
labelId = props.labelId,
|
|
30
32
|
name = props.name,
|
|
31
33
|
_props$onChange = props.onChange,
|
|
32
34
|
onChange = _props$onChange === void 0 ? noop : _props$onChange,
|
|
@@ -53,7 +55,10 @@ var InnerRadio = /*#__PURE__*/forwardRef(function Radio(props, ref) {
|
|
|
53
55
|
}, /*#__PURE__*/React.createElement("input", _extends({}, rest, {
|
|
54
56
|
// It is necessary only for Safari. It allows to render focus styles.
|
|
55
57
|
tabIndex: 0,
|
|
56
|
-
"aria-label": ariaLabel
|
|
58
|
+
"aria-label": ariaLabel
|
|
59
|
+
// TODO: Make `aria-labelledby` a `never` in TS. See https://product-fabric.atlassian.net/browse/DSP-23009
|
|
60
|
+
,
|
|
61
|
+
"aria-labelledby": labelId || ariaLabelledBy,
|
|
57
62
|
checked: isChecked,
|
|
58
63
|
disabled: isDisabled,
|
|
59
64
|
name: name,
|
package/dist/types/types.d.ts
CHANGED
|
@@ -34,6 +34,12 @@ type OwnProps = {
|
|
|
34
34
|
* The label value for the input rendered to the DOM.
|
|
35
35
|
*/
|
|
36
36
|
label?: ReactNode;
|
|
37
|
+
/**
|
|
38
|
+
* This sets the `aria-labelledby` attribute. It sets an accessible name for
|
|
39
|
+
* the radio, for people who use assistive technology. Use of a visible label
|
|
40
|
+
* is highly recommended for greater accessibility support.
|
|
41
|
+
*/
|
|
42
|
+
labelId?: string;
|
|
37
43
|
/**
|
|
38
44
|
* `onChange` event handler, passed into the props of each `Radio` Component instantiated within `RadioGroup`.
|
|
39
45
|
*/
|
|
@@ -34,6 +34,12 @@ type OwnProps = {
|
|
|
34
34
|
* The label value for the input rendered to the DOM.
|
|
35
35
|
*/
|
|
36
36
|
label?: ReactNode;
|
|
37
|
+
/**
|
|
38
|
+
* This sets the `aria-labelledby` attribute. It sets an accessible name for
|
|
39
|
+
* the radio, for people who use assistive technology. Use of a visible label
|
|
40
|
+
* is highly recommended for greater accessibility support.
|
|
41
|
+
*/
|
|
42
|
+
labelId?: string;
|
|
37
43
|
/**
|
|
38
44
|
* `onChange` event handler, passed into the props of each `Radio` Component instantiated within `RadioGroup`.
|
|
39
45
|
*/
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/radio",
|
|
3
|
-
"version": "8.
|
|
3
|
+
"version": "8.2.0",
|
|
4
4
|
"description": "A radio input allows users to select only one option from a number of choices. Radio is generally displayed in a radio group.",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
"@atlaskit/ds-lib": "^5.0.0",
|
|
44
44
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
45
45
|
"@atlaskit/theme": "^19.0.0",
|
|
46
|
-
"@atlaskit/tokens": "^
|
|
46
|
+
"@atlaskit/tokens": "^6.0.0",
|
|
47
47
|
"@babel/runtime": "^7.0.0",
|
|
48
48
|
"@compiled/react": "^0.18.3"
|
|
49
49
|
},
|
|
@@ -54,19 +54,19 @@
|
|
|
54
54
|
"@af/accessibility-testing": "workspace:^",
|
|
55
55
|
"@af/integration-testing": "workspace:^",
|
|
56
56
|
"@af/visual-regression": "workspace:^",
|
|
57
|
-
"@atlaskit/button": "^23.
|
|
57
|
+
"@atlaskit/button": "^23.3.0",
|
|
58
58
|
"@atlaskit/checkbox": "^17.1.0",
|
|
59
59
|
"@atlaskit/docs": "^11.0.0",
|
|
60
60
|
"@atlaskit/form": "^12.0.0",
|
|
61
61
|
"@atlaskit/link": "^3.2.0",
|
|
62
|
-
"@atlaskit/primitives": "^14.
|
|
63
|
-
"@atlaskit/section-message": "^8.
|
|
62
|
+
"@atlaskit/primitives": "^14.11.0",
|
|
63
|
+
"@atlaskit/section-message": "^8.5.0",
|
|
64
64
|
"@atlaskit/ssr": "workspace:^",
|
|
65
65
|
"@atlaskit/visual-regression": "workspace:^",
|
|
66
66
|
"@atlassian/ssr-tests": "^0.2.0",
|
|
67
67
|
"@testing-library/react": "^13.4.0",
|
|
68
|
-
"
|
|
69
|
-
"
|
|
68
|
+
"@testing-library/user-event": "^14.4.3",
|
|
69
|
+
"react-dom": "^18.2.0"
|
|
70
70
|
},
|
|
71
71
|
"keywords": [
|
|
72
72
|
"atlaskit",
|