@atlaskit/renderer 125.0.1 → 125.0.2

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 (8) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/dist/cjs/react/nodes/extension.js +8 -2
  3. package/dist/cjs/react/nodes/table.js +6 -11
  4. package/dist/es2019/react/nodes/extension.js +8 -2
  5. package/dist/es2019/react/nodes/table.js +6 -11
  6. package/dist/esm/react/nodes/extension.js +8 -2
  7. package/dist/esm/react/nodes/table.js +6 -11
  8. package/package.json +6 -9
package/CHANGELOG.md CHANGED
@@ -1,5 +1,14 @@
1
1
  # @atlaskit/renderer
2
2
 
3
+ ## 125.0.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [`ba0e1d49e14cb`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ba0e1d49e14cb) -
8
+ ENGHEALTH-40073: Make tables and extensions focusable if they have overscroll so that they can be
9
+ interacted with in an accessible way.
10
+ - Updated dependencies
11
+
3
12
  ## 125.0.1
4
13
 
5
14
  ### Patch Changes
package/dist/cjs/react/nodes/extension.js CHANGED
@@ -85,7 +85,9 @@ var renderExtension = exports.renderExtension = function renderExtension(content
85
85
  "data-testid": "extension--wrapper",
86
86
  "data-node-type": "extension"
87
87
  }, (0, _react.jsx)("div", {
88
+ tabIndex: (0, _platformFeatureFlags.fg)('platform_editor_dec_a11y_fixes') ? options.tabIndex : undefined
88
89
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
90
+ ,
89
91
  className: overflowContainerClass,
90
92
  css: [(0, _platformFeatureFlags.fg)('platform_fix_macro_renders_in_layouts') && containerStyle]
91
93
  }, content));
@@ -106,7 +108,9 @@ var renderExtension = exports.renderExtension = function renderExtension(content
106
108
  "data-layout": layout,
107
109
  "data-local-id": localId
108
110
  }, (0, _react.jsx)("div", {
111
+ tabIndex: (0, _platformFeatureFlags.fg)('platform_editor_dec_a11y_fixes') ? options.tabIndex : undefined
109
112
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
113
+ ,
110
114
  className: overflowContainerClass,
111
115
  css: [(0, _platformFeatureFlags.fg)('platform_fix_macro_renders_in_layouts') && containerStyle]
112
116
  }, content));
@@ -137,7 +141,8 @@ var Extension = function Extension(props) {
137
141
  return renderExtension(result, layout, {
138
142
  isTopLevel: path.length < 1,
139
143
  handleRef: handleRef,
140
- shadowClassNames: shadowClassNames
144
+ shadowClassNames: shadowClassNames,
145
+ tabIndex: (0, _platformFeatureFlags.fg)('platform_editor_dec_a11y_fixes') ? props.tabIndex : undefined
141
146
  }, undefined, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, nodeHeight, localId);
142
147
  }
143
148
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -149,7 +154,8 @@ var Extension = function Extension(props) {
149
154
  return renderExtension(text || 'extension', layout, {
150
155
  isTopLevel: path.length < 1,
151
156
  handleRef: handleRef,
152
- shadowClassNames: shadowClassNames
157
+ shadowClassNames: shadowClassNames,
158
+ tabIndex: (0, _platformFeatureFlags.fg)('platform_editor_dec_a11y_fixes') ? props.tabIndex : undefined
153
159
  }, undefined, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, nodeHeight, localId);
154
160
  });
155
161
  };
package/dist/cjs/react/nodes/table.js CHANGED
@@ -130,13 +130,6 @@ var isHeaderRowEnabled = exports.isHeaderRowEnabled = function isHeaderRowEnable
130
130
  * This TableWrapper component was created to make sure that the aria-label can be
131
131
  * internationalized without needing to add `intl` to the TableContainer.
132
132
  *
133
- * @param {TableWrapperProps} root0 - The props object.
134
- * @param {React.ReactNode} root0.children - The table content to render inside the wrapper.
135
- * @param {React.RefObject<HTMLDivElement>} root0.wrapperRef - Ref to the wrapper div element.
136
- * @param {(() => void) | undefined} root0.onScroll - Optional scroll event handler.
137
- * @param {StickyHeaderConfig | undefined} root0.stickyHeaders - Optional sticky header configuration.
138
- * @returns The rendered table wrapper component.
139
- * @example
140
133
  * <TableWrapper wrapperRef={ref} onScroll={handleScroll} stickyHeaders={config}>
141
134
  * <Table>...</Table>
142
135
  * </TableWrapper>
@@ -145,7 +138,8 @@ var TableWrapper = function TableWrapper(_ref2) {
145
138
  var children = _ref2.children,
146
139
  wrapperRef = _ref2.wrapperRef,
147
140
  onScroll = _ref2.onScroll,
148
- stickyHeaders = _ref2.stickyHeaders;
141
+ stickyHeaders = _ref2.stickyHeaders,
142
+ tabIndex = _ref2.tabIndex;
149
143
  var _useIntl = (0, _reactIntlNext.useIntl)(),
150
144
  formatMessage = _useIntl.formatMessage;
151
145
  return /*#__PURE__*/_react.default.createElement("div", {
@@ -156,7 +150,7 @@ var TableWrapper = function TableWrapper(_ref2) {
156
150
  // Adding tabIndex here because this is a scrollable container and it needs to be focusable so keyboard users can scroll it.
157
151
  // eslint-disable-next-line @atlassian/a11y/no-noninteractive-tabindex
158
152
  ,
159
- tabIndex: 0,
153
+ tabIndex: tabIndex,
160
154
  role: "region",
161
155
  "aria-label": formatMessage(_messages.tableMessages.tableScrollRegion)
162
156
  }, children);
@@ -560,10 +554,11 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
560
554
  tableNode: tableNode,
561
555
  rendererAppearance: rendererAppearance,
562
556
  allowTableResizing: allowTableResizing
563
- }, [children && children[0]]), (0, _platformFeatureFlags.fg)('editor_enghealth_focusable_scrollable_tables') ? /*#__PURE__*/_react.default.createElement(TableWrapper, {
557
+ }, [children && children[0]]), (0, _platformFeatureFlags.fg)('platform_editor_dec_a11y_fixes') ? /*#__PURE__*/_react.default.createElement(TableWrapper, {
564
558
  wrapperRef: this.wrapperRef,
565
559
  onScroll: this.props.stickyHeaders ? this.onWrapperScrolled : undefined,
566
- stickyHeaders: stickyHeaders
560
+ stickyHeaders: stickyHeaders,
561
+ tabIndex: this.props.tabIndex
567
562
  }, /*#__PURE__*/_react.default.createElement(_table.Table, {
568
563
  innerRef: this.tableRef,
569
564
  columnWidths: columnWidths,
package/dist/es2019/react/nodes/extension.js CHANGED
@@ -69,7 +69,9 @@ export const renderExtension = (content, layout, options = {}, removeOverflow, e
69
69
  "data-testid": "extension--wrapper",
70
70
  "data-node-type": "extension"
71
71
  }, jsx("div", {
72
+ tabIndex: fg('platform_editor_dec_a11y_fixes') ? options.tabIndex : undefined
72
73
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
74
+ ,
73
75
  className: overflowContainerClass,
74
76
  css: [fg('platform_fix_macro_renders_in_layouts') && containerStyle]
75
77
  }, content));
@@ -90,7 +92,9 @@ export const renderExtension = (content, layout, options = {}, removeOverflow, e
90
92
  "data-layout": layout,
91
93
  "data-local-id": localId
92
94
  }, jsx("div", {
95
+ tabIndex: fg('platform_editor_dec_a11y_fixes') ? options.tabIndex : undefined
93
96
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
97
+ ,
94
98
  className: overflowContainerClass,
95
99
  css: [fg('platform_fix_macro_renders_in_layouts') && containerStyle]
96
100
  }, content)));
@@ -121,7 +125,8 @@ const Extension = props => {
121
125
  return renderExtension(result, layout, {
122
126
  isTopLevel: path.length < 1,
123
127
  handleRef,
124
- shadowClassNames
128
+ shadowClassNames,
129
+ tabIndex: fg('platform_editor_dec_a11y_fixes') ? props.tabIndex : undefined
125
130
  }, undefined, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, nodeHeight, localId);
126
131
  }
127
132
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -133,7 +138,8 @@ const Extension = props => {
133
138
  return renderExtension(text || 'extension', layout, {
134
139
  isTopLevel: path.length < 1,
135
140
  handleRef,
136
- shadowClassNames
141
+ shadowClassNames,
142
+ tabIndex: fg('platform_editor_dec_a11y_fixes') ? props.tabIndex : undefined
137
143
  }, undefined, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, nodeHeight, localId);
138
144
  });
139
145
  };
package/dist/es2019/react/nodes/table.js CHANGED
@@ -99,13 +99,6 @@ export const isHeaderRowEnabled = rows => {
99
99
  * This TableWrapper component was created to make sure that the aria-label can be
100
100
  * internationalized without needing to add `intl` to the TableContainer.
101
101
  *
102
- * @param {TableWrapperProps} root0 - The props object.
103
- * @param {React.ReactNode} root0.children - The table content to render inside the wrapper.
104
- * @param {React.RefObject<HTMLDivElement>} root0.wrapperRef - Ref to the wrapper div element.
105
- * @param {(() => void) | undefined} root0.onScroll - Optional scroll event handler.
106
- * @param {StickyHeaderConfig | undefined} root0.stickyHeaders - Optional sticky header configuration.
107
- * @returns The rendered table wrapper component.
108
- * @example
109
102
  * <TableWrapper wrapperRef={ref} onScroll={handleScroll} stickyHeaders={config}>
110
103
  * <Table>...</Table>
111
104
  * </TableWrapper>
@@ -114,7 +107,8 @@ const TableWrapper = ({
114
107
  children,
115
108
  wrapperRef,
116
109
  onScroll,
117
- stickyHeaders
110
+ stickyHeaders,
111
+ tabIndex
118
112
  }) => {
119
113
  const {
120
114
  formatMessage
@@ -127,7 +121,7 @@ const TableWrapper = ({
127
121
  // Adding tabIndex here because this is a scrollable container and it needs to be focusable so keyboard users can scroll it.
128
122
  // eslint-disable-next-line @atlassian/a11y/no-noninteractive-tabindex
129
123
  ,
130
- tabIndex: 0,
124
+ tabIndex: tabIndex,
131
125
  role: "region",
132
126
  "aria-label": formatMessage(tableMessages.tableScrollRegion)
133
127
  }, children);
@@ -503,10 +497,11 @@ export class TableContainer extends React.Component {
503
497
  tableNode: tableNode,
504
498
  rendererAppearance: rendererAppearance,
505
499
  allowTableResizing: allowTableResizing
506
- }, [children && children[0]]), fg('editor_enghealth_focusable_scrollable_tables') ? /*#__PURE__*/React.createElement(TableWrapper, {
500
+ }, [children && children[0]]), fg('platform_editor_dec_a11y_fixes') ? /*#__PURE__*/React.createElement(TableWrapper, {
507
501
  wrapperRef: this.wrapperRef,
508
502
  onScroll: this.props.stickyHeaders ? this.onWrapperScrolled : undefined,
509
- stickyHeaders: stickyHeaders
503
+ stickyHeaders: stickyHeaders,
504
+ tabIndex: this.props.tabIndex
510
505
  }, /*#__PURE__*/React.createElement(Table, {
511
506
  innerRef: this.tableRef,
512
507
  columnWidths: columnWidths,
package/dist/esm/react/nodes/extension.js CHANGED
@@ -77,7 +77,9 @@ export var renderExtension = function renderExtension(content, layout) {
77
77
  "data-testid": "extension--wrapper",
78
78
  "data-node-type": "extension"
79
79
  }, jsx("div", {
80
+ tabIndex: fg('platform_editor_dec_a11y_fixes') ? options.tabIndex : undefined
80
81
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
82
+ ,
81
83
  className: overflowContainerClass,
82
84
  css: [fg('platform_fix_macro_renders_in_layouts') && containerStyle]
83
85
  }, content));
@@ -98,7 +100,9 @@ export var renderExtension = function renderExtension(content, layout) {
98
100
  "data-layout": layout,
99
101
  "data-local-id": localId
100
102
  }, jsx("div", {
103
+ tabIndex: fg('platform_editor_dec_a11y_fixes') ? options.tabIndex : undefined
101
104
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
105
+ ,
102
106
  className: overflowContainerClass,
103
107
  css: [fg('platform_fix_macro_renders_in_layouts') && containerStyle]
104
108
  }, content));
@@ -129,7 +133,8 @@ var Extension = function Extension(props) {
129
133
  return renderExtension(result, layout, {
130
134
  isTopLevel: path.length < 1,
131
135
  handleRef: handleRef,
132
- shadowClassNames: shadowClassNames
136
+ shadowClassNames: shadowClassNames,
137
+ tabIndex: fg('platform_editor_dec_a11y_fixes') ? props.tabIndex : undefined
133
138
  }, undefined, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, nodeHeight, localId);
134
139
  }
135
140
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -141,7 +146,8 @@ var Extension = function Extension(props) {
141
146
  return renderExtension(text || 'extension', layout, {
142
147
  isTopLevel: path.length < 1,
143
148
  handleRef: handleRef,
144
- shadowClassNames: shadowClassNames
149
+ shadowClassNames: shadowClassNames,
150
+ tabIndex: fg('platform_editor_dec_a11y_fixes') ? props.tabIndex : undefined
145
151
  }, undefined, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, nodeHeight, localId);
146
152
  });
147
153
  };
package/dist/esm/react/nodes/table.js CHANGED
@@ -123,13 +123,6 @@ export var isHeaderRowEnabled = function isHeaderRowEnabled(rows) {
123
123
  * This TableWrapper component was created to make sure that the aria-label can be
124
124
  * internationalized without needing to add `intl` to the TableContainer.
125
125
  *
126
- * @param {TableWrapperProps} root0 - The props object.
127
- * @param {React.ReactNode} root0.children - The table content to render inside the wrapper.
128
- * @param {React.RefObject<HTMLDivElement>} root0.wrapperRef - Ref to the wrapper div element.
129
- * @param {(() => void) | undefined} root0.onScroll - Optional scroll event handler.
130
- * @param {StickyHeaderConfig | undefined} root0.stickyHeaders - Optional sticky header configuration.
131
- * @returns The rendered table wrapper component.
132
- * @example
133
126
  * <TableWrapper wrapperRef={ref} onScroll={handleScroll} stickyHeaders={config}>
134
127
  * <Table>...</Table>
135
128
  * </TableWrapper>
@@ -138,7 +131,8 @@ var TableWrapper = function TableWrapper(_ref2) {
138
131
  var children = _ref2.children,
139
132
  wrapperRef = _ref2.wrapperRef,
140
133
  onScroll = _ref2.onScroll,
141
- stickyHeaders = _ref2.stickyHeaders;
134
+ stickyHeaders = _ref2.stickyHeaders,
135
+ tabIndex = _ref2.tabIndex;
142
136
  var _useIntl = useIntl(),
143
137
  formatMessage = _useIntl.formatMessage;
144
138
  return /*#__PURE__*/React.createElement("div", {
@@ -149,7 +143,7 @@ var TableWrapper = function TableWrapper(_ref2) {
149
143
  // Adding tabIndex here because this is a scrollable container and it needs to be focusable so keyboard users can scroll it.
150
144
  // eslint-disable-next-line @atlassian/a11y/no-noninteractive-tabindex
151
145
  ,
152
- tabIndex: 0,
146
+ tabIndex: tabIndex,
153
147
  role: "region",
154
148
  "aria-label": formatMessage(tableMessages.tableScrollRegion)
155
149
  }, children);
@@ -553,10 +547,11 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
553
547
  tableNode: tableNode,
554
548
  rendererAppearance: rendererAppearance,
555
549
  allowTableResizing: allowTableResizing
556
- }, [children && children[0]]), fg('editor_enghealth_focusable_scrollable_tables') ? /*#__PURE__*/React.createElement(TableWrapper, {
550
+ }, [children && children[0]]), fg('platform_editor_dec_a11y_fixes') ? /*#__PURE__*/React.createElement(TableWrapper, {
557
551
  wrapperRef: this.wrapperRef,
558
552
  onScroll: this.props.stickyHeaders ? this.onWrapperScrolled : undefined,
559
- stickyHeaders: stickyHeaders
553
+ stickyHeaders: stickyHeaders,
554
+ tabIndex: this.props.tabIndex
560
555
  }, /*#__PURE__*/React.createElement(Table, {
561
556
  innerRef: this.tableRef,
562
557
  columnWidths: columnWidths,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/renderer",
3
- "version": "125.0.1",
3
+ "version": "125.0.2",
4
4
  "description": "Renderer component",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -39,11 +39,11 @@
39
39
  "@atlaskit/emoji": "^69.9.0",
40
40
  "@atlaskit/feature-gate-js-client": "^5.5.0",
41
41
  "@atlaskit/icon": "^29.3.0",
42
- "@atlaskit/link": "^3.2.0",
42
+ "@atlaskit/link": "^3.3.0",
43
43
  "@atlaskit/link-datasource": "^4.30.0",
44
44
  "@atlaskit/link-extractors": "^2.4.0",
45
45
  "@atlaskit/linking-common": "^9.9.0",
46
- "@atlaskit/media-card": "^79.11.0",
46
+ "@atlaskit/media-card": "^79.12.0",
47
47
  "@atlaskit/media-client": "^35.7.0",
48
48
  "@atlaskit/media-client-react": "^4.1.0",
49
49
  "@atlaskit/media-common": "^12.3.0",
@@ -53,7 +53,7 @@
53
53
  "@atlaskit/platform-feature-flags": "^1.1.0",
54
54
  "@atlaskit/platform-feature-flags-react": "^0.4.0",
55
55
  "@atlaskit/react-ufo": "^4.16.0",
56
- "@atlaskit/smart-card": "^43.17.0",
56
+ "@atlaskit/smart-card": "^43.18.0",
57
57
  "@atlaskit/status": "^3.0.0",
58
58
  "@atlaskit/task-decision": "^19.2.0",
59
59
  "@atlaskit/theme": "^21.0.0",
@@ -71,7 +71,7 @@
71
71
  "uuid": "^3.1.0"
72
72
  },
73
73
  "peerDependencies": {
74
- "@atlaskit/editor-common": "^111.0.0",
74
+ "@atlaskit/editor-common": "^111.2.0",
75
75
  "@atlaskit/link-provider": "^4.0.0",
76
76
  "@atlaskit/media-core": "^37.0.0",
77
77
  "react": "^18.2.0",
@@ -81,7 +81,7 @@
81
81
  "@af/integration-testing": "workspace:^",
82
82
  "@af/visual-regression": "workspace:^",
83
83
  "@atlaskit/analytics-gas-types": "^5.1.0",
84
- "@atlaskit/checkbox": "^17.2.0",
84
+ "@atlaskit/checkbox": "^17.3.0",
85
85
  "@atlaskit/link-provider": "^4.0.0",
86
86
  "@atlaskit/link-test-helpers": "^9.0.0",
87
87
  "@atlaskit/media-core": "^37.0.0",
@@ -170,9 +170,6 @@
170
170
  "platform_editor_nested_dnd_styles_changes": {
171
171
  "type": "boolean"
172
172
  },
173
- "editor_enghealth_focusable_scrollable_tables": {
174
- "type": "boolean"
175
- },
176
173
  "platform_editor_comments_api_manager": {
177
174
  "type": "boolean"
178
175
  },