@atlaskit/editor-toolbar 0.16.2 → 0.16.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 (5) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/dist/cjs/ui/ToolbarKeyboardNavigationProvider.js +22 -0
  3. package/dist/es2019/ui/ToolbarKeyboardNavigationProvider.js +18 -0
  4. package/dist/esm/ui/ToolbarKeyboardNavigationProvider.js +22 -0
  5. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # @atlaskit/editor-toolbar
2
2
 
3
+ ## 0.16.4
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 0.16.3
10
+
11
+ ### Patch Changes
12
+
13
+ - [`f65390f90cb53`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f65390f90cb53) -
14
+ [ux] ED-29582 [Keyboard] When tab is pressed using keyboard shortcuts on selection toolbar, focus
15
+ should be moved away
16
+
3
17
  ## 0.16.2
4
18
 
5
19
  ### Patch Changes
package/dist/cjs/ui/ToolbarKeyboardNavigationProvider.js CHANGED
@@ -75,6 +75,23 @@ var ToolbarKeyboardNavigationProvider = exports.ToolbarKeyboardNavigationProvide
75
75
  }
76
76
  (_focusableElements$ne = focusableElements[nextIndex]) === null || _focusableElements$ne === void 0 || _focusableElements$ne.focus();
77
77
  };
78
+ var handleTab = function handleTab() {
79
+ var focusableElements = getFocusableElements();
80
+ if (focusableElements.length === 0) {
81
+ return;
82
+ }
83
+ var doc = (0, _browserApis.getDocument)();
84
+ var index = doc !== null && doc !== void 0 && doc.activeElement ? focusableElements.findIndex(function (el) {
85
+ return el === (doc === null || doc === void 0 ? void 0 : doc.activeElement);
86
+ }) : 0;
87
+ if (index < 0) {
88
+ index = 0;
89
+ }
90
+ focusableElements.forEach(function (el) {
91
+ return el.setAttribute('tabindex', '-1');
92
+ });
93
+ focusableElements[index].setAttribute('tabindex', '0');
94
+ };
78
95
  var handleKeyDown = function handleKeyDown(event) {
79
96
  var targetElement = event.target;
80
97
  if (targetElement instanceof HTMLElement && !targetElement.closest("".concat(childComponentSelector))) {
@@ -93,6 +110,11 @@ var ToolbarKeyboardNavigationProvider = exports.ToolbarKeyboardNavigationProvide
93
110
  event.preventDefault();
94
111
  moveFocus('right');
95
112
  break;
113
+ case 'Tab':
114
+ {
115
+ handleTab();
116
+ break;
117
+ }
96
118
  default:
97
119
  }
98
120
  } else {
package/dist/es2019/ui/ToolbarKeyboardNavigationProvider.js CHANGED
@@ -68,6 +68,19 @@ export const ToolbarKeyboardNavigationProvider = ({
68
68
  }
69
69
  (_focusableElements$ne = focusableElements[nextIndex]) === null || _focusableElements$ne === void 0 ? void 0 : _focusableElements$ne.focus();
70
70
  };
71
+ const handleTab = () => {
72
+ const focusableElements = getFocusableElements();
73
+ if (focusableElements.length === 0) {
74
+ return;
75
+ }
76
+ const doc = getDocument();
77
+ let index = doc !== null && doc !== void 0 && doc.activeElement ? focusableElements.findIndex(el => el === (doc === null || doc === void 0 ? void 0 : doc.activeElement)) : 0;
78
+ if (index < 0) {
79
+ index = 0;
80
+ }
81
+ focusableElements.forEach(el => el.setAttribute('tabindex', '-1'));
82
+ focusableElements[index].setAttribute('tabindex', '0');
83
+ };
71
84
  const handleKeyDown = event => {
72
85
  const targetElement = event.target;
73
86
  if (targetElement instanceof HTMLElement && !targetElement.closest(`${childComponentSelector}`)) {
@@ -86,6 +99,11 @@ export const ToolbarKeyboardNavigationProvider = ({
86
99
  event.preventDefault();
87
100
  moveFocus('right');
88
101
  break;
102
+ case 'Tab':
103
+ {
104
+ handleTab();
105
+ break;
106
+ }
89
107
  default:
90
108
  }
91
109
  } else {
package/dist/esm/ui/ToolbarKeyboardNavigationProvider.js CHANGED
@@ -67,6 +67,23 @@ export var ToolbarKeyboardNavigationProvider = function ToolbarKeyboardNavigatio
67
67
  }
68
68
  (_focusableElements$ne = focusableElements[nextIndex]) === null || _focusableElements$ne === void 0 || _focusableElements$ne.focus();
69
69
  };
70
+ var handleTab = function handleTab() {
71
+ var focusableElements = getFocusableElements();
72
+ if (focusableElements.length === 0) {
73
+ return;
74
+ }
75
+ var doc = getDocument();
76
+ var index = doc !== null && doc !== void 0 && doc.activeElement ? focusableElements.findIndex(function (el) {
77
+ return el === (doc === null || doc === void 0 ? void 0 : doc.activeElement);
78
+ }) : 0;
79
+ if (index < 0) {
80
+ index = 0;
81
+ }
82
+ focusableElements.forEach(function (el) {
83
+ return el.setAttribute('tabindex', '-1');
84
+ });
85
+ focusableElements[index].setAttribute('tabindex', '0');
86
+ };
70
87
  var handleKeyDown = function handleKeyDown(event) {
71
88
  var targetElement = event.target;
72
89
  if (targetElement instanceof HTMLElement && !targetElement.closest("".concat(childComponentSelector))) {
@@ -85,6 +102,11 @@ export var ToolbarKeyboardNavigationProvider = function ToolbarKeyboardNavigatio
85
102
  event.preventDefault();
86
103
  moveFocus('right');
87
104
  break;
105
+ case 'Tab':
106
+ {
107
+ handleTab();
108
+ break;
109
+ }
88
110
  default:
89
111
  }
90
112
  } else {
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "publishConfig": {
4
4
  "registry": "https://registry.npmjs.org/"
5
5
  },
6
- "version": "0.16.2",
6
+ "version": "0.16.4",
7
7
  "description": "Common UI for Toolbars across the platform",
8
8
  "atlassian": {
9
9
  "team": "Editor: Jenga",
@@ -30,7 +30,7 @@
30
30
  "@atlaskit/icon-lab": "^5.10.0",
31
31
  "@atlaskit/logo": "^19.9.0",
32
32
  "@atlaskit/platform-feature-flags": "^1.1.0",
33
- "@atlaskit/platform-feature-flags-react": "^0.3.0",
33
+ "@atlaskit/platform-feature-flags-react": "^0.4.0",
34
34
  "@atlaskit/popup": "^4.4.0",
35
35
  "@atlaskit/primitives": "^16.0.0",
36
36
  "@atlaskit/tmp-editor-statsig": "^13.19.0",