@atlaskit/lozenge 13.4.4 → 13.5.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 +22 -0
- package/dist/cjs/lozenge.js +1 -1
- package/dist/cjs/new/lozenge-base.js +16 -4
- package/dist/cjs/new/lozenge-dropdown-trigger.js +11 -3
- package/dist/cjs/new/lozenge.js +1 -1
- package/dist/es2019/lozenge.js +1 -1
- package/dist/es2019/new/lozenge-base.js +16 -4
- package/dist/es2019/new/lozenge-dropdown-trigger.js +11 -3
- package/dist/es2019/new/lozenge.js +1 -1
- package/dist/esm/lozenge.js +1 -1
- package/dist/esm/new/lozenge-base.js +16 -4
- package/dist/esm/new/lozenge-dropdown-trigger.js +11 -3
- package/dist/esm/new/lozenge.js +1 -1
- package/dist/types/new/types.d.ts +21 -0
- package/dist/types-ts4.5/new/types.d.ts +21 -0
- package/package.json +5 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,27 @@
|
|
|
1
1
|
# @atlaskit/lozenge
|
|
2
2
|
|
|
3
|
+
## 13.5.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [`1090b6ca92c60`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1090b6ca92c60) -
|
|
8
|
+
Added `aria-label` prop support to LozengeDropdownTrigger for providing custom accessible labels
|
|
9
|
+
to the trigger button element.
|
|
10
|
+
|
|
11
|
+
## 13.4.5
|
|
12
|
+
|
|
13
|
+
### Patch Changes
|
|
14
|
+
|
|
15
|
+
- [`a18e28278b0ac`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a18e28278b0ac) -
|
|
16
|
+
Fixed percentage maxWidth truncation in new lozenge component. Text now correctly truncates with
|
|
17
|
+
ellipsis when maxWidth is set to a percentage value (e.g., '50%', '100%').
|
|
18
|
+
|
|
19
|
+
Add aria-controls, aria-expanded, and aria-haspopup props support to LozengeDropdownTrigger for
|
|
20
|
+
improved accessibility when used with DropdownMenu or Popup components. These props are now
|
|
21
|
+
properly passed through to the underlying button element.
|
|
22
|
+
|
|
23
|
+
- Updated dependencies
|
|
24
|
+
|
|
3
25
|
## 13.4.4
|
|
4
26
|
|
|
5
27
|
### Patch Changes
|
package/dist/cjs/lozenge.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* lozenge-base.tsx generated by @compiled/babel-plugin v0.
|
|
1
|
+
/* lozenge-base.tsx generated by @compiled/babel-plugin v0.39.1 */
|
|
2
2
|
"use strict";
|
|
3
3
|
|
|
4
4
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
@@ -123,7 +123,11 @@ var LozengeBase = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forward
|
|
|
123
123
|
onClick = _ref.onClick,
|
|
124
124
|
style = _ref.style,
|
|
125
125
|
analyticsContext = _ref.analyticsContext,
|
|
126
|
-
interactionName = _ref.interactionName
|
|
126
|
+
interactionName = _ref.interactionName,
|
|
127
|
+
ariaControls = _ref['aria-controls'],
|
|
128
|
+
ariaExpanded = _ref['aria-expanded'],
|
|
129
|
+
ariaHaspopup = _ref['aria-haspopup'],
|
|
130
|
+
ariaLabel = _ref['aria-label'];
|
|
127
131
|
var isInteractive = typeof onClick === 'function';
|
|
128
132
|
|
|
129
133
|
// Determine the effective color, with fallback logic for legacy appearances
|
|
@@ -144,6 +148,11 @@ var LozengeBase = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forward
|
|
|
144
148
|
};
|
|
145
149
|
var hasTrailingMetric = trailingMetric != null && trailingMetric !== '';
|
|
146
150
|
var innerContent = /*#__PURE__*/React.createElement("span", {
|
|
151
|
+
style: {
|
|
152
|
+
// When maxWidth is a percentage, constrain the content wrapper
|
|
153
|
+
// so text truncation works correctly within the flex layout
|
|
154
|
+
maxWidth: maxWidthIsPc ? '100%' : undefined
|
|
155
|
+
},
|
|
147
156
|
className: (0, _runtime.ax)([styles.content, spacing === 'spacious' && styles.contentSpacious, isLoading && styles.loadingContent])
|
|
148
157
|
}, iconBefore && /*#__PURE__*/React.createElement(_iconRenderer.default, {
|
|
149
158
|
size: spacing === 'spacious' ? 'medium' : 'small',
|
|
@@ -152,7 +161,7 @@ var LozengeBase = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forward
|
|
|
152
161
|
testId: testId && "".concat(testId, "--icon")
|
|
153
162
|
}), /*#__PURE__*/React.createElement("span", {
|
|
154
163
|
style: {
|
|
155
|
-
maxWidth: maxWidthIsPc ?
|
|
164
|
+
maxWidth: maxWidthIsPc ? undefined : "calc(".concat(maxWidthValue, " - ", "var(--ds-space-100, 8px)", ")"),
|
|
156
165
|
color: style === null || style === void 0 ? void 0 : style.color
|
|
157
166
|
},
|
|
158
167
|
"data-testid": testId && "".concat(testId, "--text"),
|
|
@@ -178,7 +187,10 @@ var LozengeBase = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forward
|
|
|
178
187
|
'aria-disabled': true,
|
|
179
188
|
isDisabled: true
|
|
180
189
|
}, {
|
|
181
|
-
"aria-label": isLoading ? 'Loading' :
|
|
190
|
+
"aria-label": isLoading ? 'Loading' : ariaLabel,
|
|
191
|
+
"aria-controls": ariaControls,
|
|
192
|
+
"aria-expanded": ariaExpanded,
|
|
193
|
+
"aria-haspopup": ariaHaspopup,
|
|
182
194
|
onClick: isLoading ? undefined : onClick,
|
|
183
195
|
style: _objectSpread(_objectSpread({}, commonStyleOverrides), {}, {
|
|
184
196
|
// Specified because Pressable has a default border:none which overrides the border specified on the container
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* lozenge-dropdown-trigger.tsx generated by @compiled/babel-plugin v0.
|
|
1
|
+
/* lozenge-dropdown-trigger.tsx generated by @compiled/babel-plugin v0.39.1 */
|
|
2
2
|
"use strict";
|
|
3
3
|
|
|
4
4
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
@@ -46,7 +46,11 @@ var LozengeDropdownTrigger = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _re
|
|
|
46
46
|
onClick = _ref$onClick === void 0 ? _noop.default : _ref$onClick,
|
|
47
47
|
style = _ref.style,
|
|
48
48
|
analyticsContext = _ref.analyticsContext,
|
|
49
|
-
interactionName = _ref.interactionName
|
|
49
|
+
interactionName = _ref.interactionName,
|
|
50
|
+
ariaControls = _ref['aria-controls'],
|
|
51
|
+
ariaExpanded = _ref['aria-expanded'],
|
|
52
|
+
ariaHaspopup = _ref['aria-haspopup'],
|
|
53
|
+
ariaLabel = _ref['aria-label'];
|
|
50
54
|
var baseProps = {
|
|
51
55
|
appearance: appearance,
|
|
52
56
|
spacing: spacing,
|
|
@@ -61,7 +65,11 @@ var LozengeDropdownTrigger = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _re
|
|
|
61
65
|
onClick: onClick,
|
|
62
66
|
analyticsContext: analyticsContext,
|
|
63
67
|
interactionName: interactionName,
|
|
64
|
-
children: children
|
|
68
|
+
children: children,
|
|
69
|
+
'aria-controls': ariaControls,
|
|
70
|
+
'aria-expanded': ariaExpanded,
|
|
71
|
+
'aria-haspopup': ariaHaspopup,
|
|
72
|
+
'aria-label': ariaLabel
|
|
65
73
|
};
|
|
66
74
|
return /*#__PURE__*/React.createElement(_lozengeBase.default, (0, _extends2.default)({
|
|
67
75
|
ref: ref
|
package/dist/cjs/new/lozenge.js
CHANGED
package/dist/es2019/lozenge.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* lozenge-base.tsx generated by @compiled/babel-plugin v0.
|
|
1
|
+
/* lozenge-base.tsx generated by @compiled/babel-plugin v0.39.1 */
|
|
2
2
|
import _extends from "@babel/runtime/helpers/extends";
|
|
3
3
|
import "./lozenge-base.compiled.css";
|
|
4
4
|
import * as React from 'react';
|
|
@@ -111,7 +111,11 @@ const LozengeBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
|
|
|
111
111
|
// for dropdown trigger
|
|
112
112
|
style,
|
|
113
113
|
analyticsContext,
|
|
114
|
-
interactionName
|
|
114
|
+
interactionName,
|
|
115
|
+
'aria-controls': ariaControls,
|
|
116
|
+
'aria-expanded': ariaExpanded,
|
|
117
|
+
'aria-haspopup': ariaHaspopup,
|
|
118
|
+
'aria-label': ariaLabel
|
|
115
119
|
}, ref) => {
|
|
116
120
|
const isInteractive = typeof onClick === 'function';
|
|
117
121
|
|
|
@@ -134,6 +138,11 @@ const LozengeBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
|
|
|
134
138
|
};
|
|
135
139
|
const hasTrailingMetric = trailingMetric != null && trailingMetric !== '';
|
|
136
140
|
const innerContent = /*#__PURE__*/React.createElement("span", {
|
|
141
|
+
style: {
|
|
142
|
+
// When maxWidth is a percentage, constrain the content wrapper
|
|
143
|
+
// so text truncation works correctly within the flex layout
|
|
144
|
+
maxWidth: maxWidthIsPc ? '100%' : undefined
|
|
145
|
+
},
|
|
137
146
|
className: ax([styles.content, spacing === 'spacious' && styles.contentSpacious, isLoading && styles.loadingContent])
|
|
138
147
|
}, iconBefore && /*#__PURE__*/React.createElement(IconRenderer, {
|
|
139
148
|
size: spacing === 'spacious' ? 'medium' : 'small',
|
|
@@ -142,7 +151,7 @@ const LozengeBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
|
|
|
142
151
|
testId: testId && `${testId}--icon`
|
|
143
152
|
}), /*#__PURE__*/React.createElement("span", {
|
|
144
153
|
style: {
|
|
145
|
-
maxWidth: maxWidthIsPc ?
|
|
154
|
+
maxWidth: maxWidthIsPc ? undefined : `calc(${maxWidthValue} - ${"var(--ds-space-100, 8px)"})`,
|
|
146
155
|
color: style === null || style === void 0 ? void 0 : style.color
|
|
147
156
|
},
|
|
148
157
|
"data-testid": testId && `${testId}--text`,
|
|
@@ -168,7 +177,10 @@ const LozengeBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
|
|
|
168
177
|
'aria-disabled': true,
|
|
169
178
|
isDisabled: true
|
|
170
179
|
}, {
|
|
171
|
-
"aria-label": isLoading ? 'Loading' :
|
|
180
|
+
"aria-label": isLoading ? 'Loading' : ariaLabel,
|
|
181
|
+
"aria-controls": ariaControls,
|
|
182
|
+
"aria-expanded": ariaExpanded,
|
|
183
|
+
"aria-haspopup": ariaHaspopup,
|
|
172
184
|
onClick: isLoading ? undefined : onClick,
|
|
173
185
|
style: {
|
|
174
186
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* lozenge-dropdown-trigger.tsx generated by @compiled/babel-plugin v0.
|
|
1
|
+
/* lozenge-dropdown-trigger.tsx generated by @compiled/babel-plugin v0.39.1 */
|
|
2
2
|
import _extends from "@babel/runtime/helpers/extends";
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
import { ax, ix } from "@compiled/react/runtime";
|
|
@@ -31,7 +31,11 @@ const LozengeDropdownTrigger = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
|
|
|
31
31
|
onClick = __noop,
|
|
32
32
|
style,
|
|
33
33
|
analyticsContext,
|
|
34
|
-
interactionName
|
|
34
|
+
interactionName,
|
|
35
|
+
'aria-controls': ariaControls,
|
|
36
|
+
'aria-expanded': ariaExpanded,
|
|
37
|
+
'aria-haspopup': ariaHaspopup,
|
|
38
|
+
'aria-label': ariaLabel
|
|
35
39
|
}, ref) => {
|
|
36
40
|
const baseProps = {
|
|
37
41
|
appearance,
|
|
@@ -47,7 +51,11 @@ const LozengeDropdownTrigger = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
|
|
|
47
51
|
onClick,
|
|
48
52
|
analyticsContext,
|
|
49
53
|
interactionName,
|
|
50
|
-
children
|
|
54
|
+
children,
|
|
55
|
+
'aria-controls': ariaControls,
|
|
56
|
+
'aria-expanded': ariaExpanded,
|
|
57
|
+
'aria-haspopup': ariaHaspopup,
|
|
58
|
+
'aria-label': ariaLabel
|
|
51
59
|
};
|
|
52
60
|
return /*#__PURE__*/React.createElement(LozengeBase, _extends({
|
|
53
61
|
ref: ref
|
package/dist/esm/lozenge.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* lozenge-base.tsx generated by @compiled/babel-plugin v0.
|
|
1
|
+
/* lozenge-base.tsx generated by @compiled/babel-plugin v0.39.1 */
|
|
2
2
|
import _extends from "@babel/runtime/helpers/extends";
|
|
3
3
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
4
4
|
import "./lozenge-base.compiled.css";
|
|
@@ -114,7 +114,11 @@ var LozengeBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref
|
|
|
114
114
|
onClick = _ref.onClick,
|
|
115
115
|
style = _ref.style,
|
|
116
116
|
analyticsContext = _ref.analyticsContext,
|
|
117
|
-
interactionName = _ref.interactionName
|
|
117
|
+
interactionName = _ref.interactionName,
|
|
118
|
+
ariaControls = _ref['aria-controls'],
|
|
119
|
+
ariaExpanded = _ref['aria-expanded'],
|
|
120
|
+
ariaHaspopup = _ref['aria-haspopup'],
|
|
121
|
+
ariaLabel = _ref['aria-label'];
|
|
118
122
|
var isInteractive = typeof onClick === 'function';
|
|
119
123
|
|
|
120
124
|
// Determine the effective color, with fallback logic for legacy appearances
|
|
@@ -135,6 +139,11 @@ var LozengeBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref
|
|
|
135
139
|
};
|
|
136
140
|
var hasTrailingMetric = trailingMetric != null && trailingMetric !== '';
|
|
137
141
|
var innerContent = /*#__PURE__*/React.createElement("span", {
|
|
142
|
+
style: {
|
|
143
|
+
// When maxWidth is a percentage, constrain the content wrapper
|
|
144
|
+
// so text truncation works correctly within the flex layout
|
|
145
|
+
maxWidth: maxWidthIsPc ? '100%' : undefined
|
|
146
|
+
},
|
|
138
147
|
className: ax([styles.content, spacing === 'spacious' && styles.contentSpacious, isLoading && styles.loadingContent])
|
|
139
148
|
}, iconBefore && /*#__PURE__*/React.createElement(IconRenderer, {
|
|
140
149
|
size: spacing === 'spacious' ? 'medium' : 'small',
|
|
@@ -143,7 +152,7 @@ var LozengeBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref
|
|
|
143
152
|
testId: testId && "".concat(testId, "--icon")
|
|
144
153
|
}), /*#__PURE__*/React.createElement("span", {
|
|
145
154
|
style: {
|
|
146
|
-
maxWidth: maxWidthIsPc ?
|
|
155
|
+
maxWidth: maxWidthIsPc ? undefined : "calc(".concat(maxWidthValue, " - ", "var(--ds-space-100, 8px)", ")"),
|
|
147
156
|
color: style === null || style === void 0 ? void 0 : style.color
|
|
148
157
|
},
|
|
149
158
|
"data-testid": testId && "".concat(testId, "--text"),
|
|
@@ -169,7 +178,10 @@ var LozengeBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref
|
|
|
169
178
|
'aria-disabled': true,
|
|
170
179
|
isDisabled: true
|
|
171
180
|
}, {
|
|
172
|
-
"aria-label": isLoading ? 'Loading' :
|
|
181
|
+
"aria-label": isLoading ? 'Loading' : ariaLabel,
|
|
182
|
+
"aria-controls": ariaControls,
|
|
183
|
+
"aria-expanded": ariaExpanded,
|
|
184
|
+
"aria-haspopup": ariaHaspopup,
|
|
173
185
|
onClick: isLoading ? undefined : onClick,
|
|
174
186
|
style: _objectSpread(_objectSpread({}, commonStyleOverrides), {}, {
|
|
175
187
|
// Specified because Pressable has a default border:none which overrides the border specified on the container
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* lozenge-dropdown-trigger.tsx generated by @compiled/babel-plugin v0.
|
|
1
|
+
/* lozenge-dropdown-trigger.tsx generated by @compiled/babel-plugin v0.39.1 */
|
|
2
2
|
import _extends from "@babel/runtime/helpers/extends";
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
import { ax, ix } from "@compiled/react/runtime";
|
|
@@ -37,7 +37,11 @@ var LozengeDropdownTrigger = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function
|
|
|
37
37
|
onClick = _ref$onClick === void 0 ? __noop : _ref$onClick,
|
|
38
38
|
style = _ref.style,
|
|
39
39
|
analyticsContext = _ref.analyticsContext,
|
|
40
|
-
interactionName = _ref.interactionName
|
|
40
|
+
interactionName = _ref.interactionName,
|
|
41
|
+
ariaControls = _ref['aria-controls'],
|
|
42
|
+
ariaExpanded = _ref['aria-expanded'],
|
|
43
|
+
ariaHaspopup = _ref['aria-haspopup'],
|
|
44
|
+
ariaLabel = _ref['aria-label'];
|
|
41
45
|
var baseProps = {
|
|
42
46
|
appearance: appearance,
|
|
43
47
|
spacing: spacing,
|
|
@@ -52,7 +56,11 @@ var LozengeDropdownTrigger = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function
|
|
|
52
56
|
onClick: onClick,
|
|
53
57
|
analyticsContext: analyticsContext,
|
|
54
58
|
interactionName: interactionName,
|
|
55
|
-
children: children
|
|
59
|
+
children: children,
|
|
60
|
+
'aria-controls': ariaControls,
|
|
61
|
+
'aria-expanded': ariaExpanded,
|
|
62
|
+
'aria-haspopup': ariaHaspopup,
|
|
63
|
+
'aria-label': ariaLabel
|
|
56
64
|
};
|
|
57
65
|
return /*#__PURE__*/React.createElement(LozengeBase, _extends({
|
|
58
66
|
ref: ref
|
package/dist/esm/new/lozenge.js
CHANGED
|
@@ -106,6 +106,10 @@ export type LozengeBaseProps = NewLozengeBaseProps & {
|
|
|
106
106
|
onClick?: (event: React.MouseEvent<HTMLButtonElement>, analyticsEvent: UIAnalyticsEvent) => void;
|
|
107
107
|
analyticsContext?: Record<string, any>;
|
|
108
108
|
interactionName?: string;
|
|
109
|
+
'aria-controls'?: string;
|
|
110
|
+
'aria-expanded'?: boolean;
|
|
111
|
+
'aria-haspopup'?: boolean | 'dialog';
|
|
112
|
+
'aria-label'?: string;
|
|
109
113
|
};
|
|
110
114
|
/**
|
|
111
115
|
* Props for the LozengeDropdownTrigger component
|
|
@@ -132,5 +136,22 @@ export type LozengeDropdownTriggerProps = NewLozengeProps & {
|
|
|
132
136
|
* An optional name used to identify events for React UFO (Unified Frontend Observability) press interactions. For more information, see [React UFO integration](https://go.atlassian.com/react-ufo-dst-integration).
|
|
133
137
|
*/
|
|
134
138
|
interactionName?: string;
|
|
139
|
+
/**
|
|
140
|
+
* Identifies the popup element that the trigger controls.
|
|
141
|
+
* Should match the `id` of the popup content for screen readers to understand the relationship.
|
|
142
|
+
*/
|
|
143
|
+
'aria-controls'?: string;
|
|
144
|
+
/**
|
|
145
|
+
* Announces to assistive technology whether the popup is currently open or closed.
|
|
146
|
+
*/
|
|
147
|
+
'aria-expanded'?: boolean;
|
|
148
|
+
/**
|
|
149
|
+
* Informs assistive technology that this element triggers a popup.
|
|
150
|
+
*/
|
|
151
|
+
'aria-haspopup'?: boolean | 'dialog';
|
|
152
|
+
/**
|
|
153
|
+
* Defines a string value that labels the trigger element for assistive technology.
|
|
154
|
+
*/
|
|
155
|
+
'aria-label'?: string;
|
|
135
156
|
};
|
|
136
157
|
export {};
|
|
@@ -106,6 +106,10 @@ export type LozengeBaseProps = NewLozengeBaseProps & {
|
|
|
106
106
|
onClick?: (event: React.MouseEvent<HTMLButtonElement>, analyticsEvent: UIAnalyticsEvent) => void;
|
|
107
107
|
analyticsContext?: Record<string, any>;
|
|
108
108
|
interactionName?: string;
|
|
109
|
+
'aria-controls'?: string;
|
|
110
|
+
'aria-expanded'?: boolean;
|
|
111
|
+
'aria-haspopup'?: boolean | 'dialog';
|
|
112
|
+
'aria-label'?: string;
|
|
109
113
|
};
|
|
110
114
|
/**
|
|
111
115
|
* Props for the LozengeDropdownTrigger component
|
|
@@ -132,5 +136,22 @@ export type LozengeDropdownTriggerProps = NewLozengeProps & {
|
|
|
132
136
|
* An optional name used to identify events for React UFO (Unified Frontend Observability) press interactions. For more information, see [React UFO integration](https://go.atlassian.com/react-ufo-dst-integration).
|
|
133
137
|
*/
|
|
134
138
|
interactionName?: string;
|
|
139
|
+
/**
|
|
140
|
+
* Identifies the popup element that the trigger controls.
|
|
141
|
+
* Should match the `id` of the popup content for screen readers to understand the relationship.
|
|
142
|
+
*/
|
|
143
|
+
'aria-controls'?: string;
|
|
144
|
+
/**
|
|
145
|
+
* Announces to assistive technology whether the popup is currently open or closed.
|
|
146
|
+
*/
|
|
147
|
+
'aria-expanded'?: boolean;
|
|
148
|
+
/**
|
|
149
|
+
* Informs assistive technology that this element triggers a popup.
|
|
150
|
+
*/
|
|
151
|
+
'aria-haspopup'?: boolean | 'dialog';
|
|
152
|
+
/**
|
|
153
|
+
* Defines a string value that labels the trigger element for assistive technology.
|
|
154
|
+
*/
|
|
155
|
+
'aria-label'?: string;
|
|
135
156
|
};
|
|
136
157
|
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/lozenge",
|
|
3
|
-
"version": "13.
|
|
3
|
+
"version": "13.5.0",
|
|
4
4
|
"description": "A lozenge is a visual indicator used to highlight an item's status for quick recognition.",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -58,9 +58,9 @@
|
|
|
58
58
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
59
59
|
"@atlaskit/primitives": "^18.0.0",
|
|
60
60
|
"@atlaskit/spinner": "^19.0.0",
|
|
61
|
-
"@atlaskit/tokens": "^11.
|
|
61
|
+
"@atlaskit/tokens": "^11.1.0",
|
|
62
62
|
"@babel/runtime": "^7.0.0",
|
|
63
|
-
"@compiled/react": "^0.
|
|
63
|
+
"@compiled/react": "^0.20.0"
|
|
64
64
|
},
|
|
65
65
|
"peerDependencies": {
|
|
66
66
|
"react": "^18.2.0"
|
|
@@ -69,8 +69,8 @@
|
|
|
69
69
|
"@af/accessibility-testing": "workspace:^",
|
|
70
70
|
"@af/integration-testing": "workspace:^",
|
|
71
71
|
"@af/visual-regression": "workspace:^",
|
|
72
|
-
"@atlaskit/docs": "^11.
|
|
73
|
-
"@atlaskit/dropdown-menu": "^16.
|
|
72
|
+
"@atlaskit/docs": "^11.6.0",
|
|
73
|
+
"@atlaskit/dropdown-menu": "^16.5.0",
|
|
74
74
|
"@atlaskit/heading": "^5.3.0",
|
|
75
75
|
"@atlaskit/link": "^3.3.0",
|
|
76
76
|
"@atlaskit/section-message": "^8.12.0",
|