@atlaskit/primitives 11.0.1 → 11.0.2
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 +8 -0
- package/dist/cjs/components/anchor.js +7 -4
- package/dist/cjs/components/pressable.js +1 -1
- package/dist/es2019/components/anchor.js +7 -3
- package/dist/es2019/components/pressable.js +1 -1
- package/dist/esm/components/anchor.js +7 -4
- package/dist/esm/components/pressable.js +1 -1
- package/dist/types/components/anchor.d.ts +5 -1
- package/dist/types-ts4.5/components/anchor.d.ts +5 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
# @atlaskit/primitives
|
|
2
2
|
|
|
3
|
+
## 11.0.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#120336](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/120336)
|
|
8
|
+
[`62381baf0d2e1`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/62381baf0d2e1) -
|
|
9
|
+
Update 'opens new window' for anchor and link with a nicer AT announcement
|
|
10
|
+
|
|
3
11
|
## 11.0.1
|
|
4
12
|
|
|
5
13
|
### Patch Changes
|
|
@@ -19,7 +19,7 @@ var _interactionContext = _interopRequireDefault(require("@atlaskit/interaction-
|
|
|
19
19
|
var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
|
|
20
20
|
var _styleMaps = require("../xcss/style-maps.partial");
|
|
21
21
|
var _xcss = require("../xcss/xcss");
|
|
22
|
-
var _excluded = ["href", "children", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "onClick", "interactionName", "componentName", "analyticsContext", "aria-label", "aria-labelledby", "style", "target", "testId", "xcss"],
|
|
22
|
+
var _excluded = ["href", "children", "backgroundColor", "newWindowLabel", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "onClick", "interactionName", "componentName", "analyticsContext", "aria-label", "aria-labelledby", "style", "target", "testId", "xcss"],
|
|
23
23
|
_excluded2 = ["className"];
|
|
24
24
|
/**
|
|
25
25
|
* @jsxRuntime classic
|
|
@@ -53,6 +53,7 @@ var baseStyles = (0, _react2.css)({
|
|
|
53
53
|
});
|
|
54
54
|
var IS_EXTERNAL_LINK_REGEX = /^(?:(http|https):\/\/)/;
|
|
55
55
|
var IS_NON_HTTP_BASED = /^(((mailto|tel|sms):)|(#))/;
|
|
56
|
+
// Comma is added here to add a slight pause between announcing the anchor label and "opens in new window"
|
|
56
57
|
var OPENS_NEW_WINDOW_LABEL = '(opens new window)';
|
|
57
58
|
|
|
58
59
|
/**
|
|
@@ -68,6 +69,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
|
|
|
68
69
|
var href = _ref.href,
|
|
69
70
|
children = _ref.children,
|
|
70
71
|
backgroundColor = _ref.backgroundColor,
|
|
72
|
+
newWindowLabel = _ref.newWindowLabel,
|
|
71
73
|
padding = _ref.padding,
|
|
72
74
|
paddingBlock = _ref.paddingBlock,
|
|
73
75
|
paddingBlockStart = _ref.paddingBlockStart,
|
|
@@ -103,7 +105,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
|
|
|
103
105
|
action: 'clicked',
|
|
104
106
|
componentName: componentName || 'Anchor',
|
|
105
107
|
packageName: "@atlaskit/primitives",
|
|
106
|
-
packageVersion: "11.0.
|
|
108
|
+
packageVersion: "11.0.2",
|
|
107
109
|
analyticsData: analyticsContext,
|
|
108
110
|
actionSubject: 'link'
|
|
109
111
|
});
|
|
@@ -142,7 +144,8 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
|
|
|
142
144
|
href: !isRouterLink && typeof href !== 'string' ? undefined : href,
|
|
143
145
|
target: target,
|
|
144
146
|
onClick: onClick,
|
|
145
|
-
"aria-label": ariaLabel && target === '_blank' && !ariaLabelledBy ?
|
|
147
|
+
"aria-label": ariaLabel && target === '_blank' && !ariaLabelledBy ? //`${ariaLabel} ${OPENS_NEW_WINDOW_LABEL}`
|
|
148
|
+
"".concat(ariaLabel, " , ").concat(newWindowLabel ? newWindowLabel : OPENS_NEW_WINDOW_LABEL) : ariaLabel,
|
|
146
149
|
"aria-labelledby": ariaLabelledBy && target === '_blank' ? "".concat(ariaLabelledBy, " ").concat(opensNewWindowLabelId) : ariaLabelledBy,
|
|
147
150
|
css: [baseStyles, focusRingStyles,
|
|
148
151
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
@@ -167,7 +170,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
|
|
|
167
170
|
"data-is-router-link": testId ? isRouterLink ? 'true' : 'false' : undefined
|
|
168
171
|
}), children, target === '_blank' && (children && !ariaLabel && !ariaLabelledBy || ariaLabelledBy) && (0, _react2.jsx)(_visuallyHidden.default, {
|
|
169
172
|
id: opensNewWindowLabelId
|
|
170
|
-
}, OPENS_NEW_WINDOW_LABEL));
|
|
173
|
+
}, ", ".concat(newWindowLabel ? newWindowLabel : OPENS_NEW_WINDOW_LABEL)));
|
|
171
174
|
};
|
|
172
175
|
|
|
173
176
|
// Workarounds to support generic types with forwardRef
|
|
@@ -95,7 +95,7 @@ var Pressable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
95
95
|
action: 'clicked',
|
|
96
96
|
componentName: componentName || 'Pressable',
|
|
97
97
|
packageName: "@atlaskit/primitives",
|
|
98
|
-
packageVersion: "11.0.
|
|
98
|
+
packageVersion: "11.0.2",
|
|
99
99
|
analyticsData: analyticsContext,
|
|
100
100
|
actionSubject: 'button'
|
|
101
101
|
});
|
|
@@ -43,6 +43,7 @@ const baseStyles = css({
|
|
|
43
43
|
});
|
|
44
44
|
const IS_EXTERNAL_LINK_REGEX = /^(?:(http|https):\/\/)/;
|
|
45
45
|
const IS_NON_HTTP_BASED = /^(((mailto|tel|sms):)|(#))/;
|
|
46
|
+
// Comma is added here to add a slight pause between announcing the anchor label and "opens in new window"
|
|
46
47
|
const OPENS_NEW_WINDOW_LABEL = '(opens new window)';
|
|
47
48
|
|
|
48
49
|
/**
|
|
@@ -58,6 +59,7 @@ const AnchorNoRef = ({
|
|
|
58
59
|
href,
|
|
59
60
|
children,
|
|
60
61
|
backgroundColor,
|
|
62
|
+
newWindowLabel,
|
|
61
63
|
padding,
|
|
62
64
|
paddingBlock,
|
|
63
65
|
paddingBlockStart,
|
|
@@ -93,7 +95,7 @@ const AnchorNoRef = ({
|
|
|
93
95
|
action: 'clicked',
|
|
94
96
|
componentName: componentName || 'Anchor',
|
|
95
97
|
packageName: "@atlaskit/primitives",
|
|
96
|
-
packageVersion: "11.0.
|
|
98
|
+
packageVersion: "11.0.2",
|
|
97
99
|
analyticsData: analyticsContext,
|
|
98
100
|
actionSubject: 'link'
|
|
99
101
|
});
|
|
@@ -134,7 +136,9 @@ const AnchorNoRef = ({
|
|
|
134
136
|
href: !isRouterLink && typeof href !== 'string' ? undefined : href,
|
|
135
137
|
target: target,
|
|
136
138
|
onClick: onClick,
|
|
137
|
-
"aria-label": ariaLabel && target === '_blank' && !ariaLabelledBy ?
|
|
139
|
+
"aria-label": ariaLabel && target === '_blank' && !ariaLabelledBy ?
|
|
140
|
+
//`${ariaLabel} ${OPENS_NEW_WINDOW_LABEL}`
|
|
141
|
+
`${ariaLabel} , ${newWindowLabel ? newWindowLabel : OPENS_NEW_WINDOW_LABEL}` : ariaLabel,
|
|
138
142
|
"aria-labelledby": ariaLabelledBy && target === '_blank' ? `${ariaLabelledBy} ${opensNewWindowLabelId}` : ariaLabelledBy,
|
|
139
143
|
css: [baseStyles, focusRingStyles,
|
|
140
144
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
@@ -159,7 +163,7 @@ const AnchorNoRef = ({
|
|
|
159
163
|
"data-is-router-link": testId ? isRouterLink ? 'true' : 'false' : undefined
|
|
160
164
|
}), children, target === '_blank' && (children && !ariaLabel && !ariaLabelledBy || ariaLabelledBy) && jsx(VisuallyHidden, {
|
|
161
165
|
id: opensNewWindowLabelId
|
|
162
|
-
}, OPENS_NEW_WINDOW_LABEL));
|
|
166
|
+
}, `, ${newWindowLabel ? newWindowLabel : OPENS_NEW_WINDOW_LABEL}`));
|
|
163
167
|
};
|
|
164
168
|
|
|
165
169
|
// Workarounds to support generic types with forwardRef
|
|
@@ -85,7 +85,7 @@ const Pressable = /*#__PURE__*/forwardRef(({
|
|
|
85
85
|
action: 'clicked',
|
|
86
86
|
componentName: componentName || 'Pressable',
|
|
87
87
|
packageName: "@atlaskit/primitives",
|
|
88
|
-
packageVersion: "11.0.
|
|
88
|
+
packageVersion: "11.0.2",
|
|
89
89
|
analyticsData: analyticsContext,
|
|
90
90
|
actionSubject: 'button'
|
|
91
91
|
});
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
import _typeof from "@babel/runtime/helpers/typeof";
|
|
3
3
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
4
|
-
var _excluded = ["href", "children", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "onClick", "interactionName", "componentName", "analyticsContext", "aria-label", "aria-labelledby", "style", "target", "testId", "xcss"],
|
|
4
|
+
var _excluded = ["href", "children", "backgroundColor", "newWindowLabel", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "onClick", "interactionName", "componentName", "analyticsContext", "aria-label", "aria-labelledby", "style", "target", "testId", "xcss"],
|
|
5
5
|
_excluded2 = ["className"];
|
|
6
6
|
/**
|
|
7
7
|
* @jsxRuntime classic
|
|
@@ -47,6 +47,7 @@ var baseStyles = css({
|
|
|
47
47
|
});
|
|
48
48
|
var IS_EXTERNAL_LINK_REGEX = /^(?:(http|https):\/\/)/;
|
|
49
49
|
var IS_NON_HTTP_BASED = /^(((mailto|tel|sms):)|(#))/;
|
|
50
|
+
// Comma is added here to add a slight pause between announcing the anchor label and "opens in new window"
|
|
50
51
|
var OPENS_NEW_WINDOW_LABEL = '(opens new window)';
|
|
51
52
|
|
|
52
53
|
/**
|
|
@@ -62,6 +63,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
|
|
|
62
63
|
var href = _ref.href,
|
|
63
64
|
children = _ref.children,
|
|
64
65
|
backgroundColor = _ref.backgroundColor,
|
|
66
|
+
newWindowLabel = _ref.newWindowLabel,
|
|
65
67
|
padding = _ref.padding,
|
|
66
68
|
paddingBlock = _ref.paddingBlock,
|
|
67
69
|
paddingBlockStart = _ref.paddingBlockStart,
|
|
@@ -97,7 +99,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
|
|
|
97
99
|
action: 'clicked',
|
|
98
100
|
componentName: componentName || 'Anchor',
|
|
99
101
|
packageName: "@atlaskit/primitives",
|
|
100
|
-
packageVersion: "11.0.
|
|
102
|
+
packageVersion: "11.0.2",
|
|
101
103
|
analyticsData: analyticsContext,
|
|
102
104
|
actionSubject: 'link'
|
|
103
105
|
});
|
|
@@ -136,7 +138,8 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
|
|
|
136
138
|
href: !isRouterLink && typeof href !== 'string' ? undefined : href,
|
|
137
139
|
target: target,
|
|
138
140
|
onClick: onClick,
|
|
139
|
-
"aria-label": ariaLabel && target === '_blank' && !ariaLabelledBy ?
|
|
141
|
+
"aria-label": ariaLabel && target === '_blank' && !ariaLabelledBy ? //`${ariaLabel} ${OPENS_NEW_WINDOW_LABEL}`
|
|
142
|
+
"".concat(ariaLabel, " , ").concat(newWindowLabel ? newWindowLabel : OPENS_NEW_WINDOW_LABEL) : ariaLabel,
|
|
140
143
|
"aria-labelledby": ariaLabelledBy && target === '_blank' ? "".concat(ariaLabelledBy, " ").concat(opensNewWindowLabelId) : ariaLabelledBy,
|
|
141
144
|
css: [baseStyles, focusRingStyles,
|
|
142
145
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
@@ -161,7 +164,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
|
|
|
161
164
|
"data-is-router-link": testId ? isRouterLink ? 'true' : 'false' : undefined
|
|
162
165
|
}), children, target === '_blank' && (children && !ariaLabel && !ariaLabelledBy || ariaLabelledBy) && jsx(VisuallyHidden, {
|
|
163
166
|
id: opensNewWindowLabelId
|
|
164
|
-
}, OPENS_NEW_WINDOW_LABEL));
|
|
167
|
+
}, ", ".concat(newWindowLabel ? newWindowLabel : OPENS_NEW_WINDOW_LABEL)));
|
|
165
168
|
};
|
|
166
169
|
|
|
167
170
|
// Workarounds to support generic types with forwardRef
|
|
@@ -89,7 +89,7 @@ var Pressable = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
89
89
|
action: 'clicked',
|
|
90
90
|
componentName: componentName || 'Pressable',
|
|
91
91
|
packageName: "@atlaskit/primitives",
|
|
92
|
-
packageVersion: "11.0.
|
|
92
|
+
packageVersion: "11.0.2",
|
|
93
93
|
analyticsData: analyticsContext,
|
|
94
94
|
actionSubject: 'button'
|
|
95
95
|
});
|
|
@@ -33,6 +33,10 @@ type BaseAnchorProps = {
|
|
|
33
33
|
* Token representing background color with a built-in fallback value.
|
|
34
34
|
*/
|
|
35
35
|
backgroundColor?: BackgroundColor;
|
|
36
|
+
/**
|
|
37
|
+
* Use this to set a label for assistive technology that describes the link as opening in a new window. The default label is "(opens new window)".
|
|
38
|
+
*/
|
|
39
|
+
newWindowLabel?: string;
|
|
36
40
|
/**
|
|
37
41
|
* Tokens representing CSS shorthand for `paddingBlock` and `paddingInline` together.
|
|
38
42
|
*
|
|
@@ -85,7 +89,7 @@ export type AnchorProps<RouterLinkConfig extends Record<string, any> = never> =
|
|
|
85
89
|
* - [Code](https://atlassian.design/components/primitives/anchor/code)
|
|
86
90
|
* - [Usage](https://atlassian.design/components/primitives/anchor/usage)
|
|
87
91
|
*/
|
|
88
|
-
declare const AnchorNoRef: <RouterLinkConfig extends Record<string, any> = never>({ href, children, backgroundColor, padding, paddingBlock, paddingBlockStart, paddingBlockEnd, paddingInline, paddingInlineStart, paddingInlineEnd, onClick: providedOnClick, interactionName, componentName, analyticsContext, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, style, target, testId, xcss, ...htmlAttributes }: AnchorProps<RouterLinkConfig>, ref?: Ref<HTMLAnchorElement>) => jsx.JSX.Element;
|
|
92
|
+
declare const AnchorNoRef: <RouterLinkConfig extends Record<string, any> = never>({ href, children, backgroundColor, newWindowLabel, padding, paddingBlock, paddingBlockStart, paddingBlockEnd, paddingInline, paddingInlineStart, paddingInlineEnd, onClick: providedOnClick, interactionName, componentName, analyticsContext, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, style, target, testId, xcss, ...htmlAttributes }: AnchorProps<RouterLinkConfig>, ref?: Ref<HTMLAnchorElement>) => jsx.JSX.Element;
|
|
89
93
|
/**
|
|
90
94
|
* __Anchor__
|
|
91
95
|
*
|
|
@@ -33,6 +33,10 @@ type BaseAnchorProps = {
|
|
|
33
33
|
* Token representing background color with a built-in fallback value.
|
|
34
34
|
*/
|
|
35
35
|
backgroundColor?: BackgroundColor;
|
|
36
|
+
/**
|
|
37
|
+
* Use this to set a label for assistive technology that describes the link as opening in a new window. The default label is "(opens new window)".
|
|
38
|
+
*/
|
|
39
|
+
newWindowLabel?: string;
|
|
36
40
|
/**
|
|
37
41
|
* Tokens representing CSS shorthand for `paddingBlock` and `paddingInline` together.
|
|
38
42
|
*
|
|
@@ -85,7 +89,7 @@ export type AnchorProps<RouterLinkConfig extends Record<string, any> = never> =
|
|
|
85
89
|
* - [Code](https://atlassian.design/components/primitives/anchor/code)
|
|
86
90
|
* - [Usage](https://atlassian.design/components/primitives/anchor/usage)
|
|
87
91
|
*/
|
|
88
|
-
declare const AnchorNoRef: <RouterLinkConfig extends Record<string, any> = never>({ href, children, backgroundColor, padding, paddingBlock, paddingBlockStart, paddingBlockEnd, paddingInline, paddingInlineStart, paddingInlineEnd, onClick: providedOnClick, interactionName, componentName, analyticsContext, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, style, target, testId, xcss, ...htmlAttributes }: AnchorProps<RouterLinkConfig>, ref?: Ref<HTMLAnchorElement>) => jsx.JSX.Element;
|
|
92
|
+
declare const AnchorNoRef: <RouterLinkConfig extends Record<string, any> = never>({ href, children, backgroundColor, newWindowLabel, padding, paddingBlock, paddingBlockStart, paddingBlockEnd, paddingInline, paddingInlineStart, paddingInlineEnd, onClick: providedOnClick, interactionName, componentName, analyticsContext, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, style, target, testId, xcss, ...htmlAttributes }: AnchorProps<RouterLinkConfig>, ref?: Ref<HTMLAnchorElement>) => jsx.JSX.Element;
|
|
89
93
|
/**
|
|
90
94
|
* __Anchor__
|
|
91
95
|
*
|