@atlaskit/share 2.0.0 → 2.0.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.
Files changed (12) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/cjs/components/CopyLinkButton.js +11 -3
  3. package/dist/cjs/i18n.js +0 -10
  4. package/dist/cjs/version.json +1 -1
  5. package/dist/es2019/components/CopyLinkButton.js +10 -3
  6. package/dist/es2019/i18n.js +0 -10
  7. package/dist/es2019/version.json +1 -1
  8. package/dist/esm/components/CopyLinkButton.js +10 -3
  9. package/dist/esm/i18n.js +0 -10
  10. package/dist/esm/version.json +1 -1
  11. package/dist/types/i18n.d.ts +0 -10
  12. package/package.json +2 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @atlaskit/share
2
2
 
3
+ ## 2.0.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [`edeab5ff699`](https://bitbucket.org/atlassian/atlassian-frontend/commits/edeab5ff699) - AK-15: Share dialog-> make ‘Link copied to clipboard’ notification accessible for screen reader users
8
+
3
9
  ## 2.0.0
4
10
 
5
11
  ### Major Changes
package/dist/cjs/components/CopyLinkButton.js CHANGED
@@ -41,6 +41,8 @@ var _react = _interopRequireDefault(require("react"));
41
41
 
42
42
  var _reactIntlNext = require("react-intl-next");
43
43
 
44
+ var _reactDeviceDetect = require("react-device-detect");
45
+
44
46
  var _styledComponents = _interopRequireDefault(require("styled-components"));
45
47
 
46
48
  var _styles = _interopRequireDefault(require("./styles"));
@@ -74,6 +76,8 @@ function (props, ref) {
74
76
  position: 'absolute',
75
77
  left: '-9999px'
76
78
  },
79
+ tabIndex: -1,
80
+ "aria-hidden": true,
77
81
  ref: ref,
78
82
  value: props.text,
79
83
  readOnly: true
@@ -141,10 +145,11 @@ var CopyLinkButton = /*#__PURE__*/function (_React$Component) {
141
145
  isDisabled = _this$props.isDisabled,
142
146
  isPublicLink = _this$props.isPublicLink;
143
147
  return /*#__PURE__*/_react.default.createElement(_styles.default, (0, _extends2.default)({
148
+ "aria-label": formatMessage(isPublicLink ? _i18n.messages.copyPublicLinkButtonText : _i18n.messages.copyLinkButtonText),
144
149
  isDisabled: isDisabled,
145
150
  appearance: "subtle-link",
146
151
  iconBefore: /*#__PURE__*/_react.default.createElement(_linkFilled.default, {
147
- label: formatMessage(_i18n.messages.copyLinkButtonIconLabel),
152
+ label: "",
148
153
  size: "medium"
149
154
  }),
150
155
  onClick: _this.handleClick
@@ -167,14 +172,17 @@ var CopyLinkButton = /*#__PURE__*/function (_React$Component) {
167
172
  var _this$props2 = this.props,
168
173
  formatMessage = _this$props2.intl.formatMessage,
169
174
  copyTooltipText = _this$props2.copyTooltipText;
170
- return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(HiddenInput, {
175
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, _reactDeviceDetect.isSafari && /*#__PURE__*/_react.default.createElement("div", {
176
+ className: "assistive",
177
+ "aria-live": "assertive"
178
+ }, shouldShowCopiedMessage && formatMessage(_i18n.messages.copiedToClipboardMessage)), /*#__PURE__*/_react.default.createElement(HiddenInput, {
171
179
  ref: this.inputRef,
172
180
  text: this.props.link
173
181
  }), /*#__PURE__*/_react.default.createElement(_popup.default, {
174
182
  zIndex: Z_INDEX,
175
183
  content: function content() {
176
184
  return /*#__PURE__*/_react.default.createElement(_styled.InlineDialogContentWrapper, null, /*#__PURE__*/_react.default.createElement(MessageContainer, null, /*#__PURE__*/_react.default.createElement(_checkCircle.default, {
177
- label: formatMessage(_i18n.messages.copiedToClipboardIconLabel),
185
+ label: "",
178
186
  primaryColor: _colors.G300
179
187
  }), /*#__PURE__*/_react.default.createElement(MessageSpan, null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.copiedToClipboardMessage))));
180
188
  },
package/dist/cjs/i18n.js CHANGED
@@ -108,11 +108,6 @@ var messages = (0, _reactIntlNext.defineMessages)({
108
108
  defaultMessage: 'Invite',
109
109
  description: 'Button label for when the sharee action is set to "edit".'
110
110
  },
111
- copyLinkButtonIconLabel: {
112
- id: 'fabric.elements.share.copylink.button.icon.label',
113
- defaultMessage: 'Copy link icon',
114
- description: 'Default text for the aria-label of the copy Link icon'
115
- },
116
111
  copyLinkButtonText: {
117
112
  id: 'fabric.elements.share.copylink.button.text',
118
113
  defaultMessage: 'Copy link',
@@ -123,11 +118,6 @@ var messages = (0, _reactIntlNext.defineMessages)({
123
118
  defaultMessage: 'Copy public link',
124
119
  description: 'Default text for the Copy Link button when the link is public'
125
120
  },
126
- copiedToClipboardIconLabel: {
127
- id: 'fabric.elements.share.copied.to.clipboard.icon.label',
128
- defaultMessage: 'Copy link success icon',
129
- description: 'Default text for the aria-label of the copied link icon'
130
- },
131
121
  copiedToClipboardMessage: {
132
122
  id: 'fabric.elements.share.copied.to.clipboard.message',
133
123
  defaultMessage: 'Link copied to clipboard',
package/dist/cjs/version.json CHANGED
@@ -1,4 +1,4 @@
1
1
  {
2
2
  "name": "@atlaskit/share",
3
- "version": "2.0.0"
3
+ "version": "2.0.1"
4
4
  }
package/dist/es2019/components/CopyLinkButton.js CHANGED
@@ -8,6 +8,7 @@ import { layers } from '@atlaskit/theme/constants';
8
8
  import Tooltip from '@atlaskit/tooltip';
9
9
  import React from 'react';
10
10
  import { FormattedMessage, injectIntl } from 'react-intl-next';
11
+ import { isSafari } from 'react-device-detect';
11
12
  import styled from 'styled-components';
12
13
  import Button from './styles';
13
14
  import { messages } from '../i18n';
@@ -29,6 +30,8 @@ export const HiddenInput = /*#__PURE__*/React.forwardRef( // we need a hidden in
29
30
  position: 'absolute',
30
31
  left: '-9999px'
31
32
  },
33
+ tabIndex: -1,
34
+ "aria-hidden": true,
32
35
  ref: ref,
33
36
  value: props.text,
34
37
  readOnly: true
@@ -86,10 +89,11 @@ export class CopyLinkButton extends React.Component {
86
89
  isPublicLink
87
90
  } = this.props;
88
91
  return /*#__PURE__*/React.createElement(Button, _extends({
92
+ "aria-label": formatMessage(isPublicLink ? messages.copyPublicLinkButtonText : messages.copyLinkButtonText),
89
93
  isDisabled: isDisabled,
90
94
  appearance: "subtle-link",
91
95
  iconBefore: /*#__PURE__*/React.createElement(LinkFilledIcon, {
92
- label: formatMessage(messages.copyLinkButtonIconLabel),
96
+ label: "",
93
97
  size: "medium"
94
98
  }),
95
99
  onClick: this.handleClick
@@ -111,13 +115,16 @@ export class CopyLinkButton extends React.Component {
111
115
  },
112
116
  copyTooltipText
113
117
  } = this.props;
114
- return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HiddenInput, {
118
+ return /*#__PURE__*/React.createElement(React.Fragment, null, isSafari && /*#__PURE__*/React.createElement("div", {
119
+ className: "assistive",
120
+ "aria-live": "assertive"
121
+ }, shouldShowCopiedMessage && formatMessage(messages.copiedToClipboardMessage)), /*#__PURE__*/React.createElement(HiddenInput, {
115
122
  ref: this.inputRef,
116
123
  text: this.props.link
117
124
  }), /*#__PURE__*/React.createElement(Popup, {
118
125
  zIndex: Z_INDEX,
119
126
  content: () => /*#__PURE__*/React.createElement(InlineDialogContentWrapper, null, /*#__PURE__*/React.createElement(MessageContainer, null, /*#__PURE__*/React.createElement(CheckCircleIcon, {
120
- label: formatMessage(messages.copiedToClipboardIconLabel),
127
+ label: "",
121
128
  primaryColor: G300
122
129
  }), /*#__PURE__*/React.createElement(MessageSpan, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.copiedToClipboardMessage)))),
123
130
  isOpen: shouldShowCopiedMessage,
package/dist/es2019/i18n.js CHANGED
@@ -100,11 +100,6 @@ export const messages = defineMessages({
100
100
  defaultMessage: 'Invite',
101
101
  description: 'Button label for when the sharee action is set to "edit".'
102
102
  },
103
- copyLinkButtonIconLabel: {
104
- id: 'fabric.elements.share.copylink.button.icon.label',
105
- defaultMessage: 'Copy link icon',
106
- description: 'Default text for the aria-label of the copy Link icon'
107
- },
108
103
  copyLinkButtonText: {
109
104
  id: 'fabric.elements.share.copylink.button.text',
110
105
  defaultMessage: 'Copy link',
@@ -115,11 +110,6 @@ export const messages = defineMessages({
115
110
  defaultMessage: 'Copy public link',
116
111
  description: 'Default text for the Copy Link button when the link is public'
117
112
  },
118
- copiedToClipboardIconLabel: {
119
- id: 'fabric.elements.share.copied.to.clipboard.icon.label',
120
- defaultMessage: 'Copy link success icon',
121
- description: 'Default text for the aria-label of the copied link icon'
122
- },
123
113
  copiedToClipboardMessage: {
124
114
  id: 'fabric.elements.share.copied.to.clipboard.message',
125
115
  defaultMessage: 'Link copied to clipboard',
package/dist/es2019/version.json CHANGED
@@ -1,4 +1,4 @@
1
1
  {
2
2
  "name": "@atlaskit/share",
3
- "version": "2.0.0"
3
+ "version": "2.0.1"
4
4
  }
package/dist/esm/components/CopyLinkButton.js CHANGED
@@ -22,6 +22,7 @@ import { layers } from '@atlaskit/theme/constants';
22
22
  import Tooltip from '@atlaskit/tooltip';
23
23
  import React from 'react';
24
24
  import { FormattedMessage, injectIntl } from 'react-intl-next';
25
+ import { isSafari } from 'react-device-detect';
25
26
  import styled from 'styled-components';
26
27
  import Button from './styles';
27
28
  import { messages } from '../i18n';
@@ -38,6 +39,8 @@ function (props, ref) {
38
39
  position: 'absolute',
39
40
  left: '-9999px'
40
41
  },
42
+ tabIndex: -1,
43
+ "aria-hidden": true,
41
44
  ref: ref,
42
45
  value: props.text,
43
46
  readOnly: true
@@ -108,10 +111,11 @@ export var CopyLinkButton = /*#__PURE__*/function (_React$Component) {
108
111
  isDisabled = _this$props.isDisabled,
109
112
  isPublicLink = _this$props.isPublicLink;
110
113
  return /*#__PURE__*/React.createElement(Button, _extends({
114
+ "aria-label": formatMessage(isPublicLink ? messages.copyPublicLinkButtonText : messages.copyLinkButtonText),
111
115
  isDisabled: isDisabled,
112
116
  appearance: "subtle-link",
113
117
  iconBefore: /*#__PURE__*/React.createElement(LinkFilledIcon, {
114
- label: formatMessage(messages.copyLinkButtonIconLabel),
118
+ label: "",
115
119
  size: "medium"
116
120
  }),
117
121
  onClick: _this.handleClick
@@ -135,14 +139,17 @@ export var CopyLinkButton = /*#__PURE__*/function (_React$Component) {
135
139
  var _this$props2 = this.props,
136
140
  formatMessage = _this$props2.intl.formatMessage,
137
141
  copyTooltipText = _this$props2.copyTooltipText;
138
- return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HiddenInput, {
142
+ return /*#__PURE__*/React.createElement(React.Fragment, null, isSafari && /*#__PURE__*/React.createElement("div", {
143
+ className: "assistive",
144
+ "aria-live": "assertive"
145
+ }, shouldShowCopiedMessage && formatMessage(messages.copiedToClipboardMessage)), /*#__PURE__*/React.createElement(HiddenInput, {
139
146
  ref: this.inputRef,
140
147
  text: this.props.link
141
148
  }), /*#__PURE__*/React.createElement(Popup, {
142
149
  zIndex: Z_INDEX,
143
150
  content: function content() {
144
151
  return /*#__PURE__*/React.createElement(InlineDialogContentWrapper, null, /*#__PURE__*/React.createElement(MessageContainer, null, /*#__PURE__*/React.createElement(CheckCircleIcon, {
145
- label: formatMessage(messages.copiedToClipboardIconLabel),
152
+ label: "",
146
153
  primaryColor: G300
147
154
  }), /*#__PURE__*/React.createElement(MessageSpan, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.copiedToClipboardMessage))));
148
155
  },
package/dist/esm/i18n.js CHANGED
@@ -100,11 +100,6 @@ export var messages = defineMessages({
100
100
  defaultMessage: 'Invite',
101
101
  description: 'Button label for when the sharee action is set to "edit".'
102
102
  },
103
- copyLinkButtonIconLabel: {
104
- id: 'fabric.elements.share.copylink.button.icon.label',
105
- defaultMessage: 'Copy link icon',
106
- description: 'Default text for the aria-label of the copy Link icon'
107
- },
108
103
  copyLinkButtonText: {
109
104
  id: 'fabric.elements.share.copylink.button.text',
110
105
  defaultMessage: 'Copy link',
@@ -115,11 +110,6 @@ export var messages = defineMessages({
115
110
  defaultMessage: 'Copy public link',
116
111
  description: 'Default text for the Copy Link button when the link is public'
117
112
  },
118
- copiedToClipboardIconLabel: {
119
- id: 'fabric.elements.share.copied.to.clipboard.icon.label',
120
- defaultMessage: 'Copy link success icon',
121
- description: 'Default text for the aria-label of the copied link icon'
122
- },
123
113
  copiedToClipboardMessage: {
124
114
  id: 'fabric.elements.share.copied.to.clipboard.message',
125
115
  defaultMessage: 'Link copied to clipboard',
package/dist/esm/version.json CHANGED
@@ -1,4 +1,4 @@
1
1
  {
2
2
  "name": "@atlaskit/share",
3
- "version": "2.0.0"
3
+ "version": "2.0.1"
4
4
  }
package/dist/types/i18n.d.ts CHANGED
@@ -99,11 +99,6 @@ export declare const messages: {
99
99
  defaultMessage: string;
100
100
  description: string;
101
101
  };
102
- copyLinkButtonIconLabel: {
103
- id: string;
104
- defaultMessage: string;
105
- description: string;
106
- };
107
102
  copyLinkButtonText: {
108
103
  id: string;
109
104
  defaultMessage: string;
@@ -114,11 +109,6 @@ export declare const messages: {
114
109
  defaultMessage: string;
115
110
  description: string;
116
111
  };
117
- copiedToClipboardIconLabel: {
118
- id: string;
119
- defaultMessage: string;
120
- description: string;
121
- };
122
112
  copiedToClipboardMessage: {
123
113
  id: string;
124
114
  defaultMessage: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/share",
3
- "version": "2.0.0",
3
+ "version": "2.0.1",
4
4
  "description": "Fabric Share Element",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -47,6 +47,7 @@
47
47
  "@babel/runtime": "^7.0.0",
48
48
  "fast-deep-equal": "^3.1.1",
49
49
  "memoize-one": "^6.0.0",
50
+ "react-device-detect": "^1.15.0",
50
51
  "react-intl-next": "npm:react-intl@^5.18.1",
51
52
  "react-loosely-lazy": "^0.5.0",
52
53
  "tiny-invariant": "^0.0.3"