@atlaskit/editor-plugin-code-block-advanced 7.1.24 → 7.1.26

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 CHANGED
@@ -1,5 +1,19 @@
1
1
  # @atlaskit/editor-plugin-code-block-advanced
2
2
 
3
+ ## 7.1.26
4
+
5
+ ### Patch Changes
6
+
7
+ - [`dd5154ad0dec5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/dd5154ad0dec5) -
8
+ [A11Y-10416] Add ARIA role and roledescription to code blocks with experiment gate
9
+ - Updated dependencies
10
+
11
+ ## 7.1.25
12
+
13
+ ### Patch Changes
14
+
15
+ - Updated dependencies
16
+
3
17
  ## 7.1.24
4
18
 
5
19
  ### Patch Changes
@@ -26,6 +26,9 @@
26
26
  {
27
27
  "path": "../../adf-schema/afm-cc/tsconfig.json"
28
28
  },
29
+ {
30
+ "path": "../../../design-system/code/afm-cc/tsconfig.json"
31
+ },
29
32
  {
30
33
  "path": "../../editor-plugin-code-block/afm-cc/tsconfig.json"
31
34
  },
@@ -26,6 +26,9 @@
26
26
  {
27
27
  "path": "../../adf-schema/afm-jira/tsconfig.json"
28
28
  },
29
+ {
30
+ "path": "../../../design-system/code/afm-jira/tsconfig.json"
31
+ },
29
32
  {
30
33
  "path": "../../editor-plugin-code-block/afm-jira/tsconfig.json"
31
34
  },
@@ -26,6 +26,9 @@
26
26
  {
27
27
  "path": "../../adf-schema/afm-products/tsconfig.json"
28
28
  },
29
+ {
30
+ "path": "../../../design-system/code/afm-products/tsconfig.json"
31
+ },
29
32
  {
30
33
  "path": "../../editor-plugin-code-block/afm-products/tsconfig.json"
31
34
  },
@@ -13,7 +13,9 @@ var _autocomplete = require("@codemirror/autocomplete");
13
13
  var _language = require("@codemirror/language");
14
14
  var _state = require("@codemirror/state");
15
15
  var _view = require("@codemirror/view");
16
+ var _browser = require("@atlaskit/editor-common/browser");
16
17
  var _codeBlock = require("@atlaskit/editor-common/code-block");
18
+ var _floatingToolbar = require("@atlaskit/editor-common/floating-toolbar");
17
19
  var _messages = require("@atlaskit/editor-common/messages");
18
20
  var _whitespace = require("@atlaskit/editor-common/whitespace");
19
21
  var _state2 = require("@atlaskit/editor-prosemirror/state");
@@ -32,6 +34,7 @@ var _lineSeparator = require("./extensions/lineSeparator");
32
34
  var _manageSelectionMarker = require("./extensions/manageSelectionMarker");
33
35
  var _prosemirrorDecorations = require("./extensions/prosemirrorDecorations");
34
36
  var _tripleClickExtension = require("./extensions/tripleClickExtension");
37
+ var _getLanguageName = _interopRequireDefault(require("./languages/getLanguageName"));
35
38
  var _loader = require("./languages/loader");
36
39
  function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
37
40
  function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
@@ -58,6 +61,7 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
58
61
  (0, _defineProperty2.default)(this, "maybeTryingToReachNodeSelection", false);
59
62
  (0, _defineProperty2.default)(this, "pmFacet", _state.Facet.define());
60
63
  (0, _defineProperty2.default)(this, "wordWrappingEnabled", false);
64
+ this.config = config;
61
65
  this.node = node;
62
66
  this.view = view;
63
67
  this.getPos = getPos;
@@ -87,6 +91,7 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
87
91
  _this.selectCodeBlockNode(undefined);
88
92
  _this.view.focus();
89
93
  };
94
+ var isMacOS = (0, _browser.getBrowserInfo)().mac;
90
95
  this.cm = new _view.EditorView({
91
96
  doc: this.node.textContent,
92
97
  extensions: [].concat((0, _toConsumableArray2.default)(config.extensions), [this.lineWrappingCompartment.of((0, _codeBlock.isCodeBlockWordWrapEnabled)(node) ? _view.EditorView.lineWrapping : []), this.languageCompartment.of([]), this.pmDecorationsCompartment.of(this.pmFacet.compute([], function () {
@@ -122,9 +127,18 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
122
127
  class: 'code-block'
123
128
  }, (0, _platformFeatureFlags.fg)('platform_editor_adf_with_localid') && {
124
129
  'data-local-id': this.node.attrs.localId
125
- })), (0, _manageSelectionMarker.manageSelectionMarker)(config.api), (0, _prosemirrorDecorations.prosemirrorDecorationPlugin)(this.pmFacet, view, getPos), (0, _tripleClickExtension.tripleClickSelectAllExtension)(), (0, _firstCodeBlockInDocument.firstCodeBlockInDocument)(getPos), _view.EditorView.contentAttributes.of({
130
+ })), (0, _manageSelectionMarker.manageSelectionMarker)(config.api), (0, _prosemirrorDecorations.prosemirrorDecorationPlugin)(this.pmFacet, view, getPos), (0, _tripleClickExtension.tripleClickSelectAllExtension)(), (0, _firstCodeBlockInDocument.firstCodeBlockInDocument)(getPos), _view.EditorView.contentAttributes.of(_objectSpread(_objectSpread(_objectSpread({}, !(0, _expValEquals.expValEquals)('editor_a11y_role_textbox', 'isEnabled', true) && {
131
+ 'aria-label': "".concat(formattedAriaLabel)
132
+ }), isMacOS && (0, _expValEquals.expValEquals)('editor_a11y_role_textbox', 'isEnabled', true) && {
133
+ role: 'textbox',
134
+ 'aria-roledescription': formatMessage(_messages.roleDescriptionMessages.codeSnippetTextBox),
135
+ 'aria-describedby': "codesnippet-".concat(this.node.attrs.localId),
136
+ 'aria-multiline': 'true',
126
137
  'aria-label': formattedAriaLabel
127
- }), config.allowCodeFolding ? [(0, _foldGutter.foldGutterExtension)({
138
+ }), !isMacOS && (0, _expValEquals.expValEquals)('editor_a11y_role_textbox', 'isEnabled', true) && {
139
+ 'aria-label': formattedAriaLabel,
140
+ 'aria-describedby': "codesnippet-".concat(this.node.attrs.localId)
141
+ })), config.allowCodeFolding ? [(0, _foldGutter.foldGutterExtension)({
128
142
  selectNode: selectNode,
129
143
  getNode: function getNode() {
130
144
  return _this.node;
@@ -193,6 +207,13 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
193
207
  // The editor's outer node is our DOM representation
194
208
  this.dom = this.cm.dom;
195
209
  this.dom.appendChild(spaceContainer);
210
+ if ((0, _expValEquals.expValEquals)('editor_a11y_role_textbox', 'isEnabled', true) && (0, _platformFeatureFlags.fg)('platform_editor_adf_with_localid')) {
211
+ this.invisibleAriaDescription = document.createElement('span');
212
+ this.invisibleAriaDescription.hidden = true;
213
+ this.invisibleAriaDescription.id = "codesnippet-".concat(this.node.attrs.localId);
214
+ this.updateAriaDescription();
215
+ this.dom.appendChild(this.invisibleAriaDescription);
216
+ }
196
217
 
197
218
  // This flag is used to avoid an update loop between the outer and
198
219
  // inner editor
@@ -268,6 +289,27 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
268
289
  key: "updateLanguage",
269
290
  value: function updateLanguage() {
270
291
  this.languageLoader.updateLanguage(this.node.attrs.language);
292
+ if ((0, _expValEquals.expValEquals)('editor_a11y_role_textbox', 'isEnabled', true) && (0, _platformFeatureFlags.fg)('platform_editor_adf_with_localid')) {
293
+ this.updateAriaDescription();
294
+ }
295
+ }
296
+ }, {
297
+ key: "updateAriaDescription",
298
+ value: function updateAriaDescription() {
299
+ if (!this.invisibleAriaDescription) {
300
+ return;
301
+ }
302
+ var _this$config$getIntl = this.config.getIntl(),
303
+ formatMessage = _this$config$getIntl.formatMessage;
304
+ var languageName = (0, _getLanguageName.default)(this.node.attrs.language);
305
+ if (languageName) {
306
+ this.invisibleAriaDescription.textContent = "".concat(formatMessage(_messages.codeBlockMessages.codeblockLanguageAriaDescription, {
307
+ language: languageName
308
+ }), " ").concat(formatMessage(_floatingToolbar.messages.floatingToolbarAnnouncer));
309
+ } else {
310
+ // If the lanuage is undefined provide a more human readable message
311
+ this.invisibleAriaDescription.textContent = "".concat(formatMessage(_messages.codeBlockMessages.codeBlockLanguageNotSet), " ").concat(formatMessage(_floatingToolbar.messages.floatingToolbarAnnouncer));
312
+ }
271
313
  }
272
314
  }, {
273
315
  key: "updateLocalIdAttribute",
@@ -0,0 +1,25 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.default = exports.DEFAULT_LANGUAGES = void 0;
8
+ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
9
+ var _constants = require("@atlaskit/code/constants");
10
+ // We expect alias[0] to be used for the ADF attribute, see ED-2813
11
+ var DEFAULT_LANGUAGES = exports.DEFAULT_LANGUAGES = [{
12
+ name: '(None)',
13
+ alias: ['none'],
14
+ value: 'none'
15
+ }].concat((0, _toConsumableArray2.default)(_constants.SUPPORTED_LANGUAGES));
16
+ var getLanguageName = function getLanguageName(languageValue) {
17
+ if (!languageValue) {
18
+ return undefined;
19
+ }
20
+ var language = _constants.SUPPORTED_LANGUAGES.find(function (l) {
21
+ return l.value === languageValue || l.alias && l.alias.includes(languageValue);
22
+ });
23
+ return language ? language.name : undefined;
24
+ };
25
+ var _default = exports.default = getLanguageName;
@@ -3,8 +3,10 @@ import { closeBrackets } from '@codemirror/autocomplete';
3
3
  import { syntaxHighlighting, bracketMatching } from '@codemirror/language';
4
4
  import { Compartment, Facet, EditorState as CodeMirrorState } from '@codemirror/state';
5
5
  import { EditorView as CodeMirror, lineNumbers, gutters } from '@codemirror/view';
6
+ import { getBrowserInfo } from '@atlaskit/editor-common/browser';
6
7
  import { isCodeBlockWordWrapEnabled } from '@atlaskit/editor-common/code-block';
7
- import { blockTypeMessages } from '@atlaskit/editor-common/messages';
8
+ import { messages as floatingToolbarMessages } from '@atlaskit/editor-common/floating-toolbar';
9
+ import { blockTypeMessages, codeBlockMessages, roleDescriptionMessages } from '@atlaskit/editor-common/messages';
8
10
  import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/whitespace';
9
11
  import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
10
12
  import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
@@ -22,6 +24,7 @@ import { lineSeparatorExtension } from './extensions/lineSeparator';
22
24
  import { manageSelectionMarker } from './extensions/manageSelectionMarker';
23
25
  import { prosemirrorDecorationPlugin } from './extensions/prosemirrorDecorations';
24
26
  import { tripleClickSelectAllExtension } from './extensions/tripleClickExtension';
27
+ import getLanguageName from './languages/getLanguageName';
25
28
  import { LanguageLoader } from './languages/loader';
26
29
 
27
30
  // Store last observed heights of code blocks
@@ -38,6 +41,7 @@ class CodeBlockAdvancedNodeView {
38
41
  _defineProperty(this, "maybeTryingToReachNodeSelection", false);
39
42
  _defineProperty(this, "pmFacet", Facet.define());
40
43
  _defineProperty(this, "wordWrappingEnabled", false);
44
+ this.config = config;
41
45
  this.node = node;
42
46
  this.view = view;
43
47
  this.getPos = getPos;
@@ -64,6 +68,7 @@ class CodeBlockAdvancedNodeView {
64
68
  this.selectCodeBlockNode(undefined);
65
69
  this.view.focus();
66
70
  };
71
+ const isMacOS = getBrowserInfo().mac;
67
72
  this.cm = new CodeMirror({
68
73
  doc: this.node.textContent,
69
74
  extensions: [...config.extensions, this.lineWrappingCompartment.of(isCodeBlockWordWrapEnabled(node) ? CodeMirror.lineWrapping : []), this.languageCompartment.of([]), this.pmDecorationsCompartment.of(this.pmFacet.compute([], () => innerDecorations)), keymapExtension({
@@ -97,7 +102,20 @@ class CodeBlockAdvancedNodeView {
97
102
  'data-local-id': this.node.attrs.localId
98
103
  })
99
104
  }), manageSelectionMarker(config.api), prosemirrorDecorationPlugin(this.pmFacet, view, getPos), tripleClickSelectAllExtension(), firstCodeBlockInDocument(getPos), CodeMirror.contentAttributes.of({
100
- 'aria-label': formattedAriaLabel
105
+ ...(!expValEquals('editor_a11y_role_textbox', 'isEnabled', true) && {
106
+ 'aria-label': `${formattedAriaLabel}`
107
+ }),
108
+ ...(isMacOS && expValEquals('editor_a11y_role_textbox', 'isEnabled', true) && {
109
+ role: 'textbox',
110
+ 'aria-roledescription': formatMessage(roleDescriptionMessages.codeSnippetTextBox),
111
+ 'aria-describedby': `codesnippet-${this.node.attrs.localId}`,
112
+ 'aria-multiline': 'true',
113
+ 'aria-label': formattedAriaLabel
114
+ }),
115
+ ...(!isMacOS && expValEquals('editor_a11y_role_textbox', 'isEnabled', true) && {
116
+ 'aria-label': formattedAriaLabel,
117
+ 'aria-describedby': `codesnippet-${this.node.attrs.localId}`
118
+ })
101
119
  }), config.allowCodeFolding ? [foldGutterExtension({
102
120
  selectNode,
103
121
  getNode: () => this.node
@@ -157,6 +175,13 @@ class CodeBlockAdvancedNodeView {
157
175
  // The editor's outer node is our DOM representation
158
176
  this.dom = this.cm.dom;
159
177
  this.dom.appendChild(spaceContainer);
178
+ if (expValEquals('editor_a11y_role_textbox', 'isEnabled', true) && fg('platform_editor_adf_with_localid')) {
179
+ this.invisibleAriaDescription = document.createElement('span');
180
+ this.invisibleAriaDescription.hidden = true;
181
+ this.invisibleAriaDescription.id = `codesnippet-${this.node.attrs.localId}`;
182
+ this.updateAriaDescription();
183
+ this.dom.appendChild(this.invisibleAriaDescription);
184
+ }
160
185
 
161
186
  // This flag is used to avoid an update loop between the outer and
162
187
  // inner editor
@@ -222,6 +247,26 @@ class CodeBlockAdvancedNodeView {
222
247
  }
223
248
  updateLanguage() {
224
249
  this.languageLoader.updateLanguage(this.node.attrs.language);
250
+ if (expValEquals('editor_a11y_role_textbox', 'isEnabled', true) && fg('platform_editor_adf_with_localid')) {
251
+ this.updateAriaDescription();
252
+ }
253
+ }
254
+ updateAriaDescription() {
255
+ if (!this.invisibleAriaDescription) {
256
+ return;
257
+ }
258
+ const {
259
+ formatMessage
260
+ } = this.config.getIntl();
261
+ const languageName = getLanguageName(this.node.attrs.language);
262
+ if (languageName) {
263
+ this.invisibleAriaDescription.textContent = `${formatMessage(codeBlockMessages.codeblockLanguageAriaDescription, {
264
+ language: languageName
265
+ })} ${formatMessage(floatingToolbarMessages.floatingToolbarAnnouncer)}`;
266
+ } else {
267
+ // If the lanuage is undefined provide a more human readable message
268
+ this.invisibleAriaDescription.textContent = `${formatMessage(codeBlockMessages.codeBlockLanguageNotSet)} ${formatMessage(floatingToolbarMessages.floatingToolbarAnnouncer)}`;
269
+ }
225
270
  }
226
271
  updateLocalIdAttribute() {
227
272
  if (fg('platform_editor_adf_with_localid')) {
@@ -0,0 +1,18 @@
1
+ import { SUPPORTED_LANGUAGES } from '@atlaskit/code/constants';
2
+
3
+ // We expect alias[0] to be used for the ADF attribute, see ED-2813
4
+ export const DEFAULT_LANGUAGES = [{
5
+ name: '(None)',
6
+ alias: ['none'],
7
+ value: 'none'
8
+ }, ...SUPPORTED_LANGUAGES];
9
+ const getLanguageName = languageValue => {
10
+ if (!languageValue) {
11
+ return undefined;
12
+ }
13
+ const language = SUPPORTED_LANGUAGES.find(l => {
14
+ return l.value === languageValue || l.alias && l.alias.includes(languageValue);
15
+ });
16
+ return language ? language.name : undefined;
17
+ };
18
+ export default getLanguageName;
@@ -11,8 +11,10 @@ import { closeBrackets } from '@codemirror/autocomplete';
11
11
  import { syntaxHighlighting, bracketMatching } from '@codemirror/language';
12
12
  import { Compartment, Facet, EditorState as CodeMirrorState } from '@codemirror/state';
13
13
  import { EditorView as CodeMirror, lineNumbers, gutters } from '@codemirror/view';
14
+ import { getBrowserInfo } from '@atlaskit/editor-common/browser';
14
15
  import { isCodeBlockWordWrapEnabled } from '@atlaskit/editor-common/code-block';
15
- import { blockTypeMessages } from '@atlaskit/editor-common/messages';
16
+ import { messages as floatingToolbarMessages } from '@atlaskit/editor-common/floating-toolbar';
17
+ import { blockTypeMessages, codeBlockMessages, roleDescriptionMessages } from '@atlaskit/editor-common/messages';
16
18
  import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/whitespace';
17
19
  import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
18
20
  import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
@@ -30,6 +32,7 @@ import { lineSeparatorExtension } from './extensions/lineSeparator';
30
32
  import { manageSelectionMarker } from './extensions/manageSelectionMarker';
31
33
  import { prosemirrorDecorationPlugin } from './extensions/prosemirrorDecorations';
32
34
  import { tripleClickSelectAllExtension } from './extensions/tripleClickExtension';
35
+ import getLanguageName from './languages/getLanguageName';
33
36
  import { LanguageLoader } from './languages/loader';
34
37
 
35
38
  // Store last observed heights of code blocks
@@ -52,6 +55,7 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
52
55
  _defineProperty(this, "maybeTryingToReachNodeSelection", false);
53
56
  _defineProperty(this, "pmFacet", Facet.define());
54
57
  _defineProperty(this, "wordWrappingEnabled", false);
58
+ this.config = config;
55
59
  this.node = node;
56
60
  this.view = view;
57
61
  this.getPos = getPos;
@@ -81,6 +85,7 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
81
85
  _this.selectCodeBlockNode(undefined);
82
86
  _this.view.focus();
83
87
  };
88
+ var isMacOS = getBrowserInfo().mac;
84
89
  this.cm = new CodeMirror({
85
90
  doc: this.node.textContent,
86
91
  extensions: [].concat(_toConsumableArray(config.extensions), [this.lineWrappingCompartment.of(isCodeBlockWordWrapEnabled(node) ? CodeMirror.lineWrapping : []), this.languageCompartment.of([]), this.pmDecorationsCompartment.of(this.pmFacet.compute([], function () {
@@ -116,9 +121,18 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
116
121
  class: 'code-block'
117
122
  }, fg('platform_editor_adf_with_localid') && {
118
123
  'data-local-id': this.node.attrs.localId
119
- })), manageSelectionMarker(config.api), prosemirrorDecorationPlugin(this.pmFacet, view, getPos), tripleClickSelectAllExtension(), firstCodeBlockInDocument(getPos), CodeMirror.contentAttributes.of({
124
+ })), manageSelectionMarker(config.api), prosemirrorDecorationPlugin(this.pmFacet, view, getPos), tripleClickSelectAllExtension(), firstCodeBlockInDocument(getPos), CodeMirror.contentAttributes.of(_objectSpread(_objectSpread(_objectSpread({}, !expValEquals('editor_a11y_role_textbox', 'isEnabled', true) && {
125
+ 'aria-label': "".concat(formattedAriaLabel)
126
+ }), isMacOS && expValEquals('editor_a11y_role_textbox', 'isEnabled', true) && {
127
+ role: 'textbox',
128
+ 'aria-roledescription': formatMessage(roleDescriptionMessages.codeSnippetTextBox),
129
+ 'aria-describedby': "codesnippet-".concat(this.node.attrs.localId),
130
+ 'aria-multiline': 'true',
120
131
  'aria-label': formattedAriaLabel
121
- }), config.allowCodeFolding ? [foldGutterExtension({
132
+ }), !isMacOS && expValEquals('editor_a11y_role_textbox', 'isEnabled', true) && {
133
+ 'aria-label': formattedAriaLabel,
134
+ 'aria-describedby': "codesnippet-".concat(this.node.attrs.localId)
135
+ })), config.allowCodeFolding ? [foldGutterExtension({
122
136
  selectNode: selectNode,
123
137
  getNode: function getNode() {
124
138
  return _this.node;
@@ -187,6 +201,13 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
187
201
  // The editor's outer node is our DOM representation
188
202
  this.dom = this.cm.dom;
189
203
  this.dom.appendChild(spaceContainer);
204
+ if (expValEquals('editor_a11y_role_textbox', 'isEnabled', true) && fg('platform_editor_adf_with_localid')) {
205
+ this.invisibleAriaDescription = document.createElement('span');
206
+ this.invisibleAriaDescription.hidden = true;
207
+ this.invisibleAriaDescription.id = "codesnippet-".concat(this.node.attrs.localId);
208
+ this.updateAriaDescription();
209
+ this.dom.appendChild(this.invisibleAriaDescription);
210
+ }
190
211
 
191
212
  // This flag is used to avoid an update loop between the outer and
192
213
  // inner editor
@@ -262,6 +283,27 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
262
283
  key: "updateLanguage",
263
284
  value: function updateLanguage() {
264
285
  this.languageLoader.updateLanguage(this.node.attrs.language);
286
+ if (expValEquals('editor_a11y_role_textbox', 'isEnabled', true) && fg('platform_editor_adf_with_localid')) {
287
+ this.updateAriaDescription();
288
+ }
289
+ }
290
+ }, {
291
+ key: "updateAriaDescription",
292
+ value: function updateAriaDescription() {
293
+ if (!this.invisibleAriaDescription) {
294
+ return;
295
+ }
296
+ var _this$config$getIntl = this.config.getIntl(),
297
+ formatMessage = _this$config$getIntl.formatMessage;
298
+ var languageName = getLanguageName(this.node.attrs.language);
299
+ if (languageName) {
300
+ this.invisibleAriaDescription.textContent = "".concat(formatMessage(codeBlockMessages.codeblockLanguageAriaDescription, {
301
+ language: languageName
302
+ }), " ").concat(formatMessage(floatingToolbarMessages.floatingToolbarAnnouncer));
303
+ } else {
304
+ // If the lanuage is undefined provide a more human readable message
305
+ this.invisibleAriaDescription.textContent = "".concat(formatMessage(codeBlockMessages.codeBlockLanguageNotSet), " ").concat(formatMessage(floatingToolbarMessages.floatingToolbarAnnouncer));
306
+ }
265
307
  }
266
308
  }, {
267
309
  key: "updateLocalIdAttribute",
@@ -0,0 +1,19 @@
1
+ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
2
+ import { SUPPORTED_LANGUAGES } from '@atlaskit/code/constants';
3
+
4
+ // We expect alias[0] to be used for the ADF attribute, see ED-2813
5
+ export var DEFAULT_LANGUAGES = [{
6
+ name: '(None)',
7
+ alias: ['none'],
8
+ value: 'none'
9
+ }].concat(_toConsumableArray(SUPPORTED_LANGUAGES));
10
+ var getLanguageName = function getLanguageName(languageValue) {
11
+ if (!languageValue) {
12
+ return undefined;
13
+ }
14
+ var language = SUPPORTED_LANGUAGES.find(function (l) {
15
+ return l.value === languageValue || l.alias && l.alias.includes(languageValue);
16
+ });
17
+ return language ? language.name : undefined;
18
+ };
19
+ export default getLanguageName;
@@ -31,12 +31,15 @@ declare class CodeBlockAdvancedNodeView implements NodeView {
31
31
  private pmFacet;
32
32
  private ro?;
33
33
  private unsubscribeContentFormat;
34
+ private invisibleAriaDescription?;
35
+ private config;
34
36
  constructor(node: PMNode, view: EditorView, getPos: getPosHandlerNode, innerDecorations: DecorationSource, config: ConfigProps);
35
37
  destroy(): void;
36
38
  forwardUpdate(update: ViewUpdate): void;
37
39
  setSelection(anchor: number, head: number): void;
38
40
  private updateReadonlyState;
39
41
  private updateLanguage;
42
+ private updateAriaDescription;
40
43
  private updateLocalIdAttribute;
41
44
  private selectCodeBlockNode;
42
45
  private wordWrappingEnabled;