@atlaskit/editor-plugin-code-block-advanced 7.1.2 → 7.1.4

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 (16) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/afm-jira/tsconfig.json +1 -1
  3. package/dist/cjs/nodeviews/codeBlockNodeWithToDOMFixed.js +1 -1
  4. package/dist/cjs/nodeviews/extensions/foldGutter.js +8 -1
  5. package/dist/cjs/ui/syntaxHighlightingTheme.js +4 -4
  6. package/dist/cjs/ui/theme.js +1 -1
  7. package/dist/es2019/nodeviews/codeBlockNodeWithToDOMFixed.js +1 -1
  8. package/dist/es2019/nodeviews/extensions/foldGutter.js +8 -1
  9. package/dist/es2019/ui/syntaxHighlightingTheme.js +4 -4
  10. package/dist/es2019/ui/theme.js +1 -1
  11. package/dist/esm/nodeviews/codeBlockNodeWithToDOMFixed.js +1 -1
  12. package/dist/esm/nodeviews/extensions/foldGutter.js +8 -1
  13. package/dist/esm/ui/syntaxHighlightingTheme.js +4 -4
  14. package/dist/esm/ui/theme.js +1 -1
  15. package/package.json +7 -4
  16. package/src/nodeviews/extensions/foldGutter.ts +8 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # @atlaskit/editor-plugin-code-block-advanced
2
2
 
3
+ ## 7.1.4
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 7.1.3
10
+
11
+ ### Patch Changes
12
+
13
+ - [`3425184968470`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3425184968470) -
14
+ Fix aria-hidden-focus a11y violation by adding tabindex=-1 to fold gutter buttons
15
+ - Updated dependencies
16
+
3
17
  ## 7.1.2
4
18
 
5
19
  ### Patch Changes
package/afm-jira/tsconfig.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "extends": "../../../../tsconfig.entry-points.jira.json",
2
+ "extends": "../../../../tsconfig.local-consumption.json",
3
3
  "compilerOptions": {
4
4
  "target": "es5",
5
5
  "outDir": "../../../../../jira/tsDist/@atlaskit__editor-plugin-code-block-advanced/app",
package/dist/cjs/nodeviews/codeBlockNodeWithToDOMFixed.js CHANGED
@@ -66,7 +66,7 @@ var _toDOM = function toDOM(node, formattedAriaLabel, config) {
66
66
  style: (0, _lazyNodeView.convertToInlineCss)({
67
67
  textAlign: 'right',
68
68
  color: "var(--ds-text-subtlest, #6B6E76)",
69
- fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
69
+ fontFamily: "var(--ds-font-family-code, \"Atlassian Mono\", ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
70
70
  whiteSpace: 'pre-wrap'
71
71
  }),
72
72
  'data-label': content
package/dist/cjs/nodeviews/extensions/foldGutter.js CHANGED
@@ -9,6 +9,7 @@ var _language = require("@codemirror/language");
9
9
  var _codeBlock = require("@atlaskit/editor-common/code-block");
10
10
  var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
11
11
  var _model = require("@atlaskit/editor-prosemirror/model");
12
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
12
13
  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; } } }; }
13
14
  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; } }
14
15
  function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
@@ -76,6 +77,9 @@ function foldGutterExtension(_ref) {
76
77
  var htmlElement = document.createElement('button');
77
78
  htmlElement.setAttribute('data-marker-dom-element', 'true');
78
79
  htmlElement.setAttribute('data-testid', "code-block-fold-button-".concat(open ? 'open' : 'closed'));
80
+ if ((0, _platformFeatureFlags.fg)('platform_editor_a11y_code_block_gutter_focus_fix')) {
81
+ htmlElement.setAttribute('tabindex', '-1');
82
+ }
79
83
  htmlElement.setAttribute('style', (0, _lazyNodeView.convertToInlineCss)({
80
84
  background: 'none',
81
85
  color: 'inherit',
@@ -104,9 +108,12 @@ function foldGutterExtension(_ref) {
104
108
  return htmlElement;
105
109
  }
106
110
  }), (0, _language.codeFolding)({
107
- placeholderDOM: function placeholderDOM(view, onclick, prepared) {
111
+ placeholderDOM: function placeholderDOM(view, onclick, _prepared) {
108
112
  var htmlElement = document.createElement('button');
109
113
  htmlElement.setAttribute('data-marker-dom-element', 'true');
114
+ if ((0, _platformFeatureFlags.fg)('platform_editor_a11y_code_block_gutter_focus_fix')) {
115
+ htmlElement.setAttribute('tabindex', '-1');
116
+ }
110
117
  htmlElement.setAttribute('style', (0, _lazyNodeView.convertToInlineCss)({
111
118
  color: 'inherit',
112
119
  font: 'inherit',
package/dist/cjs/ui/syntaxHighlightingTheme.js CHANGED
@@ -18,7 +18,7 @@ var highlightStyle = exports.highlightStyle = _language.HighlightStyle.define([{
18
18
  textDecoration: 'underline',
19
19
  // Custom syntax styling to match existing styling
20
20
  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
21
- fontWeight: "var(--ds-font-weight-bold, 700)"
21
+ fontWeight: "var(--ds-font-weight-bold, 653)"
22
22
  }, {
23
23
  tag: _highlight.tags.emphasis,
24
24
  fontStyle: 'italic'
@@ -26,7 +26,7 @@ var highlightStyle = exports.highlightStyle = _language.HighlightStyle.define([{
26
26
  tag: _highlight.tags.strong,
27
27
  // Custom syntax styling to match existing styling
28
28
  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
29
- fontWeight: "var(--ds-font-weight-bold, 700)"
29
+ fontWeight: "var(--ds-font-weight-bold, 653)"
30
30
  }, {
31
31
  tag: _highlight.tags.strikethrough,
32
32
  textDecoration: 'line-through'
@@ -35,7 +35,7 @@ var highlightStyle = exports.highlightStyle = _language.HighlightStyle.define([{
35
35
  color: "var(--ds-text-accent-blue, #1558BC)",
36
36
  // Custom syntax styling to match existing styling
37
37
  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
38
- fontWeight: "var(--ds-font-weight-bold, 700)"
38
+ fontWeight: "var(--ds-font-weight-bold, 653)"
39
39
  }, {
40
40
  tag: [_highlight.tags.atom, _highlight.tags.bool, _highlight.tags.url, _highlight.tags.contentSeparator, _highlight.tags.labelName],
41
41
  color: "var(--ds-text-accent-blue, #1558BC)"
@@ -101,7 +101,7 @@ var languageStyling = exports.languageStyling = function languageStyling(languag
101
101
  return _language.HighlightStyle.define([{
102
102
  tag: _highlight.tags.definition(_highlight.tags.propertyName),
103
103
  color: "var(--ds-text-accent-green, #216E4E)",
104
- fontWeight: "var(--ds-font-weight-bold, 700)"
104
+ fontWeight: "var(--ds-font-weight-bold, 653)"
105
105
  }], {
106
106
  scope: language
107
107
  });
package/dist/cjs/ui/theme.js CHANGED
@@ -52,7 +52,7 @@ var cmTheme = exports.cmTheme = function cmTheme(options) {
52
52
  // Custom syntax styling to match existing styling
53
53
  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
54
54
  lineHeight: 'unset',
55
- fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
55
+ fontFamily: "var(--ds-font-family-code, \"Atlassian Mono\", ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
56
56
  borderRadius: "var(--ds-radius-small, 4px)",
57
57
  backgroundImage: overflowShadow({
58
58
  leftCoverWidth: "var(--ds-space-300, 24px)"
package/dist/es2019/nodeviews/codeBlockNodeWithToDOMFixed.js CHANGED
@@ -52,7 +52,7 @@ const toDOM = (node, formattedAriaLabel, config) => {
52
52
  style: convertToInlineCss({
53
53
  textAlign: 'right',
54
54
  color: "var(--ds-text-subtlest, #6B6E76)",
55
- fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
55
+ fontFamily: "var(--ds-font-family-code, \"Atlassian Mono\", ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
56
56
  whiteSpace: 'pre-wrap'
57
57
  }),
58
58
  'data-label': content
package/dist/es2019/nodeviews/extensions/foldGutter.js CHANGED
@@ -2,6 +2,7 @@ import { foldGutter, codeFolding, foldState, foldEffect } from '@codemirror/lang
2
2
  import { setCodeBlockFoldState, getCodeBlockFoldState } from '@atlaskit/editor-common/code-block';
3
3
  import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
4
4
  import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
5
+ import { fg } from '@atlaskit/platform-feature-flags';
5
6
  // Based on platform/packages/design-system/icon/svgs/utility/add.svg
6
7
  const chevronDown = ['http://www.w3.org/2000/svg svg', {
7
8
  width: '12',
@@ -69,6 +70,9 @@ export function foldGutterExtension({
69
70
  const htmlElement = document.createElement('button');
70
71
  htmlElement.setAttribute('data-marker-dom-element', 'true');
71
72
  htmlElement.setAttribute('data-testid', `code-block-fold-button-${open ? 'open' : 'closed'}`);
73
+ if (fg('platform_editor_a11y_code_block_gutter_focus_fix')) {
74
+ htmlElement.setAttribute('tabindex', '-1');
75
+ }
72
76
  htmlElement.setAttribute('style', convertToInlineCss({
73
77
  background: 'none',
74
78
  color: 'inherit',
@@ -97,9 +101,12 @@ export function foldGutterExtension({
97
101
  return htmlElement;
98
102
  }
99
103
  }), codeFolding({
100
- placeholderDOM(view, onclick, prepared) {
104
+ placeholderDOM(view, onclick, _prepared) {
101
105
  const htmlElement = document.createElement('button');
102
106
  htmlElement.setAttribute('data-marker-dom-element', 'true');
107
+ if (fg('platform_editor_a11y_code_block_gutter_focus_fix')) {
108
+ htmlElement.setAttribute('tabindex', '-1');
109
+ }
103
110
  htmlElement.setAttribute('style', convertToInlineCss({
104
111
  color: 'inherit',
105
112
  font: 'inherit',
package/dist/es2019/ui/syntaxHighlightingTheme.js CHANGED
@@ -12,7 +12,7 @@ export const highlightStyle = HighlightStyle.define([{
12
12
  textDecoration: 'underline',
13
13
  // Custom syntax styling to match existing styling
14
14
  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
15
- fontWeight: "var(--ds-font-weight-bold, 700)"
15
+ fontWeight: "var(--ds-font-weight-bold, 653)"
16
16
  }, {
17
17
  tag: tags.emphasis,
18
18
  fontStyle: 'italic'
@@ -20,7 +20,7 @@ export const highlightStyle = HighlightStyle.define([{
20
20
  tag: tags.strong,
21
21
  // Custom syntax styling to match existing styling
22
22
  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
23
- fontWeight: "var(--ds-font-weight-bold, 700)"
23
+ fontWeight: "var(--ds-font-weight-bold, 653)"
24
24
  }, {
25
25
  tag: tags.strikethrough,
26
26
  textDecoration: 'line-through'
@@ -29,7 +29,7 @@ export const highlightStyle = HighlightStyle.define([{
29
29
  color: "var(--ds-text-accent-blue, #1558BC)",
30
30
  // Custom syntax styling to match existing styling
31
31
  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
32
- fontWeight: "var(--ds-font-weight-bold, 700)"
32
+ fontWeight: "var(--ds-font-weight-bold, 653)"
33
33
  }, {
34
34
  tag: [tags.atom, tags.bool, tags.url, tags.contentSeparator, tags.labelName],
35
35
  color: "var(--ds-text-accent-blue, #1558BC)"
@@ -95,7 +95,7 @@ export const languageStyling = language => {
95
95
  return HighlightStyle.define([{
96
96
  tag: tags.definition(tags.propertyName),
97
97
  color: "var(--ds-text-accent-green, #216E4E)",
98
- fontWeight: "var(--ds-font-weight-bold, 700)"
98
+ fontWeight: "var(--ds-font-weight-bold, 653)"
99
99
  }], {
100
100
  scope: language
101
101
  });
package/dist/es2019/ui/theme.js CHANGED
@@ -39,7 +39,7 @@ export const cmTheme = options => CodeMirror.theme({
39
39
  // Custom syntax styling to match existing styling
40
40
  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
41
41
  lineHeight: 'unset',
42
- fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
42
+ fontFamily: "var(--ds-font-family-code, \"Atlassian Mono\", ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
43
43
  borderRadius: "var(--ds-radius-small, 4px)",
44
44
  backgroundImage: overflowShadow({
45
45
  leftCoverWidth: "var(--ds-space-300, 24px)"
package/dist/esm/nodeviews/codeBlockNodeWithToDOMFixed.js CHANGED
@@ -59,7 +59,7 @@ var _toDOM = function toDOM(node, formattedAriaLabel, config) {
59
59
  style: convertToInlineCss({
60
60
  textAlign: 'right',
61
61
  color: "var(--ds-text-subtlest, #6B6E76)",
62
- fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
62
+ fontFamily: "var(--ds-font-family-code, \"Atlassian Mono\", ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
63
63
  whiteSpace: 'pre-wrap'
64
64
  }),
65
65
  'data-label': content
package/dist/esm/nodeviews/extensions/foldGutter.js CHANGED
@@ -5,6 +5,7 @@ import { foldGutter, codeFolding, foldState, foldEffect } from '@codemirror/lang
5
5
  import { setCodeBlockFoldState, getCodeBlockFoldState } from '@atlaskit/editor-common/code-block';
6
6
  import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
7
7
  import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
8
+ import { fg } from '@atlaskit/platform-feature-flags';
8
9
  // Based on platform/packages/design-system/icon/svgs/utility/add.svg
9
10
  var chevronDown = ['http://www.w3.org/2000/svg svg', {
10
11
  width: '12',
@@ -69,6 +70,9 @@ export function foldGutterExtension(_ref) {
69
70
  var htmlElement = document.createElement('button');
70
71
  htmlElement.setAttribute('data-marker-dom-element', 'true');
71
72
  htmlElement.setAttribute('data-testid', "code-block-fold-button-".concat(open ? 'open' : 'closed'));
73
+ if (fg('platform_editor_a11y_code_block_gutter_focus_fix')) {
74
+ htmlElement.setAttribute('tabindex', '-1');
75
+ }
72
76
  htmlElement.setAttribute('style', convertToInlineCss({
73
77
  background: 'none',
74
78
  color: 'inherit',
@@ -97,9 +101,12 @@ export function foldGutterExtension(_ref) {
97
101
  return htmlElement;
98
102
  }
99
103
  }), codeFolding({
100
- placeholderDOM: function placeholderDOM(view, onclick, prepared) {
104
+ placeholderDOM: function placeholderDOM(view, onclick, _prepared) {
101
105
  var htmlElement = document.createElement('button');
102
106
  htmlElement.setAttribute('data-marker-dom-element', 'true');
107
+ if (fg('platform_editor_a11y_code_block_gutter_focus_fix')) {
108
+ htmlElement.setAttribute('tabindex', '-1');
109
+ }
103
110
  htmlElement.setAttribute('style', convertToInlineCss({
104
111
  color: 'inherit',
105
112
  font: 'inherit',
package/dist/esm/ui/syntaxHighlightingTheme.js CHANGED
@@ -12,7 +12,7 @@ export var highlightStyle = HighlightStyle.define([{
12
12
  textDecoration: 'underline',
13
13
  // Custom syntax styling to match existing styling
14
14
  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
15
- fontWeight: "var(--ds-font-weight-bold, 700)"
15
+ fontWeight: "var(--ds-font-weight-bold, 653)"
16
16
  }, {
17
17
  tag: tags.emphasis,
18
18
  fontStyle: 'italic'
@@ -20,7 +20,7 @@ export var highlightStyle = HighlightStyle.define([{
20
20
  tag: tags.strong,
21
21
  // Custom syntax styling to match existing styling
22
22
  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
23
- fontWeight: "var(--ds-font-weight-bold, 700)"
23
+ fontWeight: "var(--ds-font-weight-bold, 653)"
24
24
  }, {
25
25
  tag: tags.strikethrough,
26
26
  textDecoration: 'line-through'
@@ -29,7 +29,7 @@ export var highlightStyle = HighlightStyle.define([{
29
29
  color: "var(--ds-text-accent-blue, #1558BC)",
30
30
  // Custom syntax styling to match existing styling
31
31
  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
32
- fontWeight: "var(--ds-font-weight-bold, 700)"
32
+ fontWeight: "var(--ds-font-weight-bold, 653)"
33
33
  }, {
34
34
  tag: [tags.atom, tags.bool, tags.url, tags.contentSeparator, tags.labelName],
35
35
  color: "var(--ds-text-accent-blue, #1558BC)"
@@ -95,7 +95,7 @@ export var languageStyling = function languageStyling(language) {
95
95
  return HighlightStyle.define([{
96
96
  tag: tags.definition(tags.propertyName),
97
97
  color: "var(--ds-text-accent-green, #216E4E)",
98
- fontWeight: "var(--ds-font-weight-bold, 700)"
98
+ fontWeight: "var(--ds-font-weight-bold, 653)"
99
99
  }], {
100
100
  scope: language
101
101
  });
package/dist/esm/ui/theme.js CHANGED
@@ -46,7 +46,7 @@ export var cmTheme = function cmTheme(options) {
46
46
  // Custom syntax styling to match existing styling
47
47
  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
48
48
  lineHeight: 'unset',
49
- fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
49
+ fontFamily: "var(--ds-font-family-code, \"Atlassian Mono\", ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
50
50
  borderRadius: "var(--ds-radius-small, 4px)",
51
51
  backgroundImage: overflowShadow({
52
52
  leftCoverWidth: "var(--ds-space-300, 24px)"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-code-block-advanced",
3
- "version": "7.1.2",
3
+ "version": "7.1.4",
4
4
  "description": "CodeBlockAdvanced plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -37,8 +37,8 @@
37
37
  "@atlaskit/editor-prosemirror": "^7.2.0",
38
38
  "@atlaskit/platform-feature-flags": "^1.1.0",
39
39
  "@atlaskit/prosemirror-history": "^0.2.0",
40
- "@atlaskit/tmp-editor-statsig": "^16.23.0",
41
- "@atlaskit/tokens": "^10.0.0",
40
+ "@atlaskit/tmp-editor-statsig": "^17.0.0",
41
+ "@atlaskit/tokens": "^10.1.0",
42
42
  "@babel/runtime": "^7.0.0",
43
43
  "@codemirror/autocomplete": "6.18.4",
44
44
  "@codemirror/commands": "6.7.1",
@@ -54,7 +54,7 @@
54
54
  "codemirror-lang-elixir": "4.0.0"
55
55
  },
56
56
  "peerDependencies": {
57
- "@atlaskit/editor-common": "^111.8.0",
57
+ "@atlaskit/editor-common": "^111.9.0",
58
58
  "react": "^18.2.0",
59
59
  "react-intl-next": "npm:react-intl@^5.18.1"
60
60
  },
@@ -103,6 +103,9 @@
103
103
  },
104
104
  "platform_editor_content_mode_button_mvp": {
105
105
  "type": "boolean"
106
+ },
107
+ "platform_editor_a11y_code_block_gutter_focus_fix": {
108
+ "type": "boolean"
106
109
  }
107
110
  }
108
111
  }
package/src/nodeviews/extensions/foldGutter.ts CHANGED
@@ -10,6 +10,7 @@ import {
10
10
  import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
11
11
  import type { DOMOutputSpec, Node as PMNode } from '@atlaskit/editor-prosemirror/model';
12
12
  import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
13
+ import { fg } from '@atlaskit/platform-feature-flags';
13
14
  import { token } from '@atlaskit/tokens';
14
15
 
15
16
  // Based on platform/packages/design-system/icon/svgs/utility/add.svg
@@ -100,6 +101,9 @@ export function foldGutterExtension({
100
101
  'data-testid',
101
102
  `code-block-fold-button-${open ? 'open' : 'closed'}`,
102
103
  );
104
+ if (fg('platform_editor_a11y_code_block_gutter_focus_fix')) {
105
+ htmlElement.setAttribute('tabindex', '-1');
106
+ }
103
107
  htmlElement.setAttribute(
104
108
  'style',
105
109
  convertToInlineCss({
@@ -134,9 +138,12 @@ export function foldGutterExtension({
134
138
  },
135
139
  }),
136
140
  codeFolding({
137
- placeholderDOM(view, onclick, prepared) {
141
+ placeholderDOM(view, onclick, _prepared) {
138
142
  const htmlElement = document.createElement('button');
139
143
  htmlElement.setAttribute('data-marker-dom-element', 'true');
144
+ if (fg('platform_editor_a11y_code_block_gutter_focus_fix')) {
145
+ htmlElement.setAttribute('tabindex', '-1');
146
+ }
140
147
  htmlElement.setAttribute(
141
148
  'style',
142
149
  convertToInlineCss({