@atlaskit/editor-plugin-media 0.3.4 → 0.3.5

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 (7) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/cjs/pm-plugins/alt-text/ui/AltTextEdit.js +20 -2
  3. package/dist/es2019/pm-plugins/alt-text/ui/AltTextEdit.js +20 -2
  4. package/dist/esm/pm-plugins/alt-text/ui/AltTextEdit.js +20 -2
  5. package/dist/types/pm-plugins/alt-text/ui/AltTextEdit.d.ts +1 -0
  6. package/dist/types-ts4.5/pm-plugins/alt-text/ui/AltTextEdit.d.ts +1 -0
  7. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @atlaskit/editor-plugin-media
2
2
 
3
+ ## 0.3.5
4
+
5
+ ### Patch Changes
6
+
7
+ - [#40861](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/40861) [`a7e65721b8b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a7e65721b8b) - ECA11Y-73: Add announcements for the screen reader users when the user types incorrect values in Alt text input field
8
+
3
9
  ## 0.3.4
4
10
 
5
11
  ### Patch Changes
package/dist/cjs/pm-plugins/alt-text/ui/AltTextEdit.js CHANGED
@@ -75,7 +75,18 @@ var AltTextEditComponent = exports.AltTextEditComponent = /*#__PURE__*/function
75
75
  (0, _commands.updateAltText)(newValue)(view.state, view.dispatch);
76
76
  });
77
77
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleOnChange", function (newAltText) {
78
+ var _this$state;
78
79
  var validationErrors = _this.getValidationErrors(newAltText);
80
+ if (((_this$state = _this.state) === null || _this$state === void 0 || (_this$state = _this$state.validationErrors) === null || _this$state === void 0 ? void 0 : _this$state.length) !== (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.length)) {
81
+ // If number of errors was changed we need to reset attribute to get new SR announcement
82
+
83
+ if (_this.errorsListRef) {
84
+ var _this$errorsListRef;
85
+ var errorsArea = (_this$errorsListRef = _this.errorsListRef) === null || _this$errorsListRef === void 0 ? void 0 : _this$errorsListRef.current;
86
+ errorsArea === null || errorsArea === void 0 || errorsArea.removeAttribute('aria-live');
87
+ errorsArea === null || errorsArea === void 0 || errorsArea.setAttribute('aria-live', 'assertive');
88
+ }
89
+ }
79
90
  _this.setState({
80
91
  showClearTextButton: Boolean(newAltText),
81
92
  validationErrors: validationErrors,
@@ -98,6 +109,7 @@ var AltTextEditComponent = exports.AltTextEditComponent = /*#__PURE__*/function
98
109
  });
99
110
  var createAnalyticsEvent = props.createAnalyticsEvent;
100
111
  _this.fireCustomAnalytics = (0, _analytics.fireAnalyticsEvent)(createAnalyticsEvent);
112
+ _this.errorsListRef = /*#__PURE__*/_react.default.createRef();
101
113
  return _this;
102
114
  }
103
115
  (0, _createClass2.default)(AltTextEditComponent, [{
@@ -144,6 +156,7 @@ var AltTextEditComponent = exports.AltTextEditComponent = /*#__PURE__*/function
144
156
  key: index
145
157
  }, error);
146
158
  });
159
+ var hasErrors = !!errorsList.length;
147
160
  return (0, _react2.jsx)("div", {
148
161
  css: container
149
162
  }, (0, _react2.jsx)("section", {
@@ -160,7 +173,7 @@ var AltTextEditComponent = exports.AltTextEditComponent = /*#__PURE__*/function
160
173
  })), (0, _react2.jsx)(_ui.PanelTextInput, {
161
174
  testId: "alt-text-input",
162
175
  ariaLabel: formatMessage(_messages.messages.placeholder),
163
- describedById: "support-text",
176
+ describedById: "".concat(hasErrors ? 'errors-list' : '', " support-text"),
164
177
  placeholder: formatMessage(_messages.messages.placeholder),
165
178
  defaultValue: this.state.lastValue,
166
179
  onCancel: this.dispatchCancelEvent,
@@ -168,6 +181,8 @@ var AltTextEditComponent = exports.AltTextEditComponent = /*#__PURE__*/function
168
181
  onBlur: this.handleOnBlur,
169
182
  onSubmit: this.closeMediaAltTextMenu,
170
183
  maxLength: MAX_ALT_TEXT_LENGTH,
184
+ ariaRequired: true,
185
+ ariaInvalid: hasErrors,
171
186
  autoFocus: true
172
187
  }), showClearTextButton && (0, _react2.jsx)("div", {
173
188
  css: buttonWrapper
@@ -181,7 +196,10 @@ var AltTextEditComponent = exports.AltTextEditComponent = /*#__PURE__*/function
181
196
  })),
182
197
  tooltipContent: formatMessage(_messages.messages.clear),
183
198
  onClick: this.handleClearText
184
- }))), !!errorsList.length && (0, _react2.jsx)("section", {
199
+ }))), hasErrors && (0, _react2.jsx)("section", {
200
+ id: "errors-list",
201
+ ref: this.errorsListRef,
202
+ "aria-live": "assertive",
185
203
  css: validationWrapper
186
204
  }, errorsList), (0, _react2.jsx)("p", {
187
205
  css: supportText,
package/dist/es2019/pm-plugins/alt-text/ui/AltTextEdit.js CHANGED
@@ -93,7 +93,18 @@ export class AltTextEditComponent extends React.Component {
93
93
  updateAltText(newValue)(view.state, view.dispatch);
94
94
  });
95
95
  _defineProperty(this, "handleOnChange", newAltText => {
96
+ var _this$state, _this$state$validatio;
96
97
  const validationErrors = this.getValidationErrors(newAltText);
98
+ if (((_this$state = this.state) === null || _this$state === void 0 ? void 0 : (_this$state$validatio = _this$state.validationErrors) === null || _this$state$validatio === void 0 ? void 0 : _this$state$validatio.length) !== (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.length)) {
99
+ // If number of errors was changed we need to reset attribute to get new SR announcement
100
+
101
+ if (this.errorsListRef) {
102
+ var _this$errorsListRef;
103
+ const errorsArea = (_this$errorsListRef = this.errorsListRef) === null || _this$errorsListRef === void 0 ? void 0 : _this$errorsListRef.current;
104
+ errorsArea === null || errorsArea === void 0 ? void 0 : errorsArea.removeAttribute('aria-live');
105
+ errorsArea === null || errorsArea === void 0 ? void 0 : errorsArea.setAttribute('aria-live', 'assertive');
106
+ }
107
+ }
97
108
  this.setState({
98
109
  showClearTextButton: Boolean(newAltText),
99
110
  validationErrors,
@@ -120,6 +131,7 @@ export class AltTextEditComponent extends React.Component {
120
131
  createAnalyticsEvent
121
132
  } = props;
122
133
  this.fireCustomAnalytics = fireAnalyticsEvent(createAnalyticsEvent);
134
+ this.errorsListRef = /*#__PURE__*/React.createRef();
123
135
  }
124
136
  componentDidMount() {
125
137
  this.prevValue = this.props.value;
@@ -165,6 +177,7 @@ export class AltTextEditComponent extends React.Component {
165
177
  key: index
166
178
  }, error);
167
179
  });
180
+ const hasErrors = !!errorsList.length;
168
181
  return jsx("div", {
169
182
  css: container
170
183
  }, jsx("section", {
@@ -181,7 +194,7 @@ export class AltTextEditComponent extends React.Component {
181
194
  })), jsx(PanelTextInput, {
182
195
  testId: "alt-text-input",
183
196
  ariaLabel: formatMessage(messages.placeholder),
184
- describedById: "support-text",
197
+ describedById: `${hasErrors ? 'errors-list' : ''} support-text`,
185
198
  placeholder: formatMessage(messages.placeholder),
186
199
  defaultValue: this.state.lastValue,
187
200
  onCancel: this.dispatchCancelEvent,
@@ -189,6 +202,8 @@ export class AltTextEditComponent extends React.Component {
189
202
  onBlur: this.handleOnBlur,
190
203
  onSubmit: this.closeMediaAltTextMenu,
191
204
  maxLength: MAX_ALT_TEXT_LENGTH,
205
+ ariaRequired: true,
206
+ ariaInvalid: hasErrors,
192
207
  autoFocus: true
193
208
  }), showClearTextButton && jsx("div", {
194
209
  css: buttonWrapper
@@ -202,7 +217,10 @@ export class AltTextEditComponent extends React.Component {
202
217
  })),
203
218
  tooltipContent: formatMessage(messages.clear),
204
219
  onClick: this.handleClearText
205
- }))), !!errorsList.length && jsx("section", {
220
+ }))), hasErrors && jsx("section", {
221
+ id: "errors-list",
222
+ ref: this.errorsListRef,
223
+ "aria-live": "assertive",
206
224
  css: validationWrapper
207
225
  }, errorsList), jsx("p", {
208
226
  css: supportText,
package/dist/esm/pm-plugins/alt-text/ui/AltTextEdit.js CHANGED
@@ -72,7 +72,18 @@ export var AltTextEditComponent = /*#__PURE__*/function (_React$Component) {
72
72
  updateAltText(newValue)(view.state, view.dispatch);
73
73
  });
74
74
  _defineProperty(_assertThisInitialized(_this), "handleOnChange", function (newAltText) {
75
+ var _this$state;
75
76
  var validationErrors = _this.getValidationErrors(newAltText);
77
+ if (((_this$state = _this.state) === null || _this$state === void 0 || (_this$state = _this$state.validationErrors) === null || _this$state === void 0 ? void 0 : _this$state.length) !== (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.length)) {
78
+ // If number of errors was changed we need to reset attribute to get new SR announcement
79
+
80
+ if (_this.errorsListRef) {
81
+ var _this$errorsListRef;
82
+ var errorsArea = (_this$errorsListRef = _this.errorsListRef) === null || _this$errorsListRef === void 0 ? void 0 : _this$errorsListRef.current;
83
+ errorsArea === null || errorsArea === void 0 || errorsArea.removeAttribute('aria-live');
84
+ errorsArea === null || errorsArea === void 0 || errorsArea.setAttribute('aria-live', 'assertive');
85
+ }
86
+ }
76
87
  _this.setState({
77
88
  showClearTextButton: Boolean(newAltText),
78
89
  validationErrors: validationErrors,
@@ -95,6 +106,7 @@ export var AltTextEditComponent = /*#__PURE__*/function (_React$Component) {
95
106
  });
96
107
  var createAnalyticsEvent = props.createAnalyticsEvent;
97
108
  _this.fireCustomAnalytics = fireAnalyticsEvent(createAnalyticsEvent);
109
+ _this.errorsListRef = /*#__PURE__*/React.createRef();
98
110
  return _this;
99
111
  }
100
112
  _createClass(AltTextEditComponent, [{
@@ -141,6 +153,7 @@ export var AltTextEditComponent = /*#__PURE__*/function (_React$Component) {
141
153
  key: index
142
154
  }, error);
143
155
  });
156
+ var hasErrors = !!errorsList.length;
144
157
  return jsx("div", {
145
158
  css: container
146
159
  }, jsx("section", {
@@ -157,7 +170,7 @@ export var AltTextEditComponent = /*#__PURE__*/function (_React$Component) {
157
170
  })), jsx(PanelTextInput, {
158
171
  testId: "alt-text-input",
159
172
  ariaLabel: formatMessage(messages.placeholder),
160
- describedById: "support-text",
173
+ describedById: "".concat(hasErrors ? 'errors-list' : '', " support-text"),
161
174
  placeholder: formatMessage(messages.placeholder),
162
175
  defaultValue: this.state.lastValue,
163
176
  onCancel: this.dispatchCancelEvent,
@@ -165,6 +178,8 @@ export var AltTextEditComponent = /*#__PURE__*/function (_React$Component) {
165
178
  onBlur: this.handleOnBlur,
166
179
  onSubmit: this.closeMediaAltTextMenu,
167
180
  maxLength: MAX_ALT_TEXT_LENGTH,
181
+ ariaRequired: true,
182
+ ariaInvalid: hasErrors,
168
183
  autoFocus: true
169
184
  }), showClearTextButton && jsx("div", {
170
185
  css: buttonWrapper
@@ -178,7 +193,10 @@ export var AltTextEditComponent = /*#__PURE__*/function (_React$Component) {
178
193
  })),
179
194
  tooltipContent: formatMessage(messages.clear),
180
195
  onClick: this.handleClearText
181
- }))), !!errorsList.length && jsx("section", {
196
+ }))), hasErrors && jsx("section", {
197
+ id: "errors-list",
198
+ ref: this.errorsListRef,
199
+ "aria-live": "assertive",
182
200
  css: validationWrapper
183
201
  }, errorsList), jsx("p", {
184
202
  css: supportText,
package/dist/types/pm-plugins/alt-text/ui/AltTextEdit.d.ts CHANGED
@@ -18,6 +18,7 @@ export type AltTextEditComponentState = {
18
18
  };
19
19
  export declare class AltTextEditComponent extends React.Component<Props, AltTextEditComponentState> {
20
20
  private fireCustomAnalytics?;
21
+ private errorsListRef;
21
22
  state: {
22
23
  showClearTextButton: boolean;
23
24
  validationErrors: string[];
package/dist/types-ts4.5/pm-plugins/alt-text/ui/AltTextEdit.d.ts CHANGED
@@ -18,6 +18,7 @@ export type AltTextEditComponentState = {
18
18
  };
19
19
  export declare class AltTextEditComponent extends React.Component<Props, AltTextEditComponentState> {
20
20
  private fireCustomAnalytics?;
21
+ private errorsListRef;
21
22
  state: {
22
23
  showClearTextButton: boolean;
23
24
  validationErrors: string[];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-media",
3
- "version": "0.3.4",
3
+ "version": "0.3.5",
4
4
  "description": "Media plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -36,7 +36,7 @@
36
36
  "@atlaskit/analytics-namespaced-context": "^6.7.0",
37
37
  "@atlaskit/analytics-next": "^9.1.0",
38
38
  "@atlaskit/button": "^16.10.0",
39
- "@atlaskit/editor-common": "^76.10.0",
39
+ "@atlaskit/editor-common": "^76.11.0",
40
40
  "@atlaskit/editor-palette": "1.5.1",
41
41
  "@atlaskit/editor-plugin-analytics": "^0.2.0",
42
42
  "@atlaskit/editor-plugin-decorations": "^0.2.0",