@atlaskit/status 1.4.0 → 1.4.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/status
 
+## 1.4.1
+
+### Patch Changes
+
+- [`beb32df5147`](https://bitbucket.org/atlassian/atlassian-frontend/commits/beb32df5147) - [ECA11Y-45] [ECA11Y-22] Change the tab key handling the status popup to improve accessibility.
+
 ## 1.4.0
 
 ### Minor Changes

package/dist/cjs/components/analytics.js

@@ -11,7 +11,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 var ELEMENTS_CHANNEL = 'fabric-elements';
 exports.ELEMENTS_CHANNEL = ELEMENTS_CHANNEL;
 var packageName = "@atlaskit/status";
-var packageVersion = "1.4.0";
+var packageVersion = "1.4.1";
 var createStatusAnalyticsAndFire = function createStatusAnalyticsAndFire(createAnalyticsEvent) {
   return function (payload) {
     var statusPayload = _objectSpread(_objectSpread({}, payload), {}, {

package/dist/cjs/components/internal/color-palette.js

@@ -31,21 +31,20 @@ var _default = function _default(_ref) {
     className = _ref.className,
     onHover = _ref.onHover;
   var colorRefs = (0, _react.useRef)([]);
+  var _useState = (0, _react.useState)(0),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    currentFocusedColor = _useState2[0],
+    setCurrentFocusedColor = _useState2[1];
   (0, _react.useEffect)(function () {
     colorRefs.current = colorRefs.current.slice(0, palette.length);
   }, []);
   var memoizedHandleKeyDown = (0, _react.useCallback)(function (e) {
-    var colorIndex = palette.findIndex(function (_ref2) {
-      var _ref3 = (0, _slicedToArray2.default)(_ref2, 1),
-        colorValue = _ref3[0];
-      return colorValue === selectedColor;
-    });
     var newColorIndex = null;
     var nextColor = function nextColor() {
-      return colorIndex + 1 > palette.length - 1 ? 0 : colorIndex + 1;
+      return currentFocusedColor + 1 > palette.length - 1 ? 0 : currentFocusedColor + 1;
     };
     var previousColor = function previousColor() {
-      return colorIndex - 1 < 0 ? palette.length - 1 : colorIndex - 1;
+      return currentFocusedColor - 1 < 0 ? palette.length - 1 : currentFocusedColor - 1;
     };
     switch (e.keyCode) {
       case VK_RIGHT:
@@ -59,22 +58,16 @@ var _default = function _default(_ref) {
         newColorIndex = previousColor();
         break;
       case VK_TAB:
-        e.preventDefault();
-        if (e.shiftKey) {
-          newColorIndex = previousColor();
-        } else {
-          newColorIndex = nextColor();
-        }
+        setCurrentFocusedColor(0);
         break;
     }
     if (newColorIndex === null) {
       return;
     }
-    var newColorValue = palette[newColorIndex][0];
+    setCurrentFocusedColor(newColorIndex);
     var newRef = colorRefs.current[newColorIndex];
     newRef === null || newRef === void 0 ? void 0 : newRef.focus();
-    onClick(newColorValue);
-  }, [selectedColor, onClick, colorRefs]);
+  }, [currentFocusedColor, setCurrentFocusedColor, colorRefs]);
   return (
     /**
       We need to disable below eslint rule becuase of role "radiogroup". This role was added
@@ -90,12 +83,12 @@ var _default = function _default(_ref) {
         maxWidth: cols * 32
       },
       onKeyDown: memoizedHandleKeyDown
-    }, palette.map(function (_ref4, i) {
-      var _ref5 = (0, _slicedToArray2.default)(_ref4, 4),
-        colorValue = _ref5[0],
-        backgroundColor = _ref5[1],
-        borderColor = _ref5[2],
-        iconColor = _ref5[3];
+    }, palette.map(function (_ref2, i) {
+      var _ref3 = (0, _slicedToArray2.default)(_ref2, 4),
+        colorValue = _ref3[0],
+        backgroundColor = _ref3[1],
+        borderColor = _ref3[2],
+        iconColor = _ref3[3];
       return (0, _react2.jsx)(_color.default, {
         key: colorValue,
         value: colorValue,

package/dist/es2019/components/analytics.js

@@ -1,6 +1,6 @@
 export const ELEMENTS_CHANNEL = 'fabric-elements';
 const packageName = "@atlaskit/status";
-const packageVersion = "1.4.0";
+const packageVersion = "1.4.1";
 export const createStatusAnalyticsAndFire = createAnalyticsEvent => payload => {
   const statusPayload = {
     ...payload,

package/dist/es2019/components/internal/color-palette.js

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import * as colors from '@atlaskit/theme/colors';
-import React, { useEffect, useRef, useCallback } from 'react';
+import React, { useEffect, useRef, useCallback, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import Color from './color';
 const palette = [['neutral', `var(--ds-background-neutral, ${colors.N40})`, `var(--ds-border-bold, ${colors.N400})`, `var(--ds-icon, ${colors.N400})`], ['purple', `var(--ds-background-discovery, ${colors.P50})`, `var(--ds-border-discovery, ${colors.P400})`, `var(--ds-icon-discovery, ${colors.P400})`], ['blue', `var(--ds-background-information, ${colors.B50})`, `var(--ds-border-information, ${colors.B400})`, `var(--ds-icon-information, ${colors.B400})`], ['red', `var(--ds-background-danger, ${colors.R50})`, `var(--ds-border-danger, ${colors.R400})`, `var(--ds-icon-danger, ${colors.R400})`], ['yellow', `var(--ds-background-warning, ${colors.Y50})`, `var(--ds-border-warning, ${colors.Y400})`, `var(--ds-icon-warning, ${colors.Y400})`], ['green', `var(--ds-background-success, ${colors.G50})`, `var(--ds-border-success, ${colors.G400})`, `var(--ds-icon-success, ${colors.G400})`]];
@@ -25,14 +25,14 @@ export default (({
   onHover
 }) => {
   const colorRefs = useRef([]);
+  const [currentFocusedColor, setCurrentFocusedColor] = useState(0);
   useEffect(() => {
     colorRefs.current = colorRefs.current.slice(0, palette.length);
   }, []);
   const memoizedHandleKeyDown = useCallback(e => {
-    const colorIndex = palette.findIndex(([colorValue]) => colorValue === selectedColor);
     let newColorIndex = null;
-    const nextColor = () => colorIndex + 1 > palette.length - 1 ? 0 : colorIndex + 1;
-    const previousColor = () => colorIndex - 1 < 0 ? palette.length - 1 : colorIndex - 1;
+    const nextColor = () => currentFocusedColor + 1 > palette.length - 1 ? 0 : currentFocusedColor + 1;
+    const previousColor = () => currentFocusedColor - 1 < 0 ? palette.length - 1 : currentFocusedColor - 1;
     switch (e.keyCode) {
       case VK_RIGHT:
       case VK_DOWN:
@@ -45,22 +45,16 @@ export default (({
         newColorIndex = previousColor();
         break;
       case VK_TAB:
-        e.preventDefault();
-        if (e.shiftKey) {
-          newColorIndex = previousColor();
-        } else {
-          newColorIndex = nextColor();
-        }
+        setCurrentFocusedColor(0);
         break;
     }
     if (newColorIndex === null) {
       return;
     }
-    const newColorValue = palette[newColorIndex][0];
+    setCurrentFocusedColor(newColorIndex);
     const newRef = colorRefs.current[newColorIndex];
     newRef === null || newRef === void 0 ? void 0 : newRef.focus();
-    onClick(newColorValue);
-  }, [selectedColor, onClick, colorRefs]);
+  }, [currentFocusedColor, setCurrentFocusedColor, colorRefs]);
   return (
     /**
       We need to disable below eslint rule becuase of role "radiogroup". This role was added

package/dist/esm/components/analytics.js

@@ -3,7 +3,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 export var ELEMENTS_CHANNEL = 'fabric-elements';
 var packageName = "@atlaskit/status";
-var packageVersion = "1.4.0";
+var packageVersion = "1.4.1";
 export var createStatusAnalyticsAndFire = function createStatusAnalyticsAndFire(createAnalyticsEvent) {
   return function (payload) {
     var statusPayload = _objectSpread(_objectSpread({}, payload), {}, {

package/dist/esm/components/internal/color-palette.js

@@ -3,7 +3,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject;
 /** @jsx jsx */
 import * as colors from '@atlaskit/theme/colors';
-import React, { useEffect, useRef, useCallback } from 'react';
+import React, { useEffect, useRef, useCallback, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import Color from './color';
 var palette = [['neutral', "var(--ds-background-neutral, ".concat(colors.N40, ")"), "var(--ds-border-bold, ".concat(colors.N400, ")"), "var(--ds-icon, ".concat(colors.N400, ")")], ['purple', "var(--ds-background-discovery, ".concat(colors.P50, ")"), "var(--ds-border-discovery, ".concat(colors.P400, ")"), "var(--ds-icon-discovery, ".concat(colors.P400, ")")], ['blue', "var(--ds-background-information, ".concat(colors.B50, ")"), "var(--ds-border-information, ".concat(colors.B400, ")"), "var(--ds-icon-information, ".concat(colors.B400, ")")], ['red', "var(--ds-background-danger, ".concat(colors.R50, ")"), "var(--ds-border-danger, ".concat(colors.R400, ")"), "var(--ds-icon-danger, ".concat(colors.R400, ")")], ['yellow', "var(--ds-background-warning, ".concat(colors.Y50, ")"), "var(--ds-border-warning, ".concat(colors.Y400, ")"), "var(--ds-icon-warning, ".concat(colors.Y400, ")")], ['green', "var(--ds-background-success, ".concat(colors.G50, ")"), "var(--ds-border-success, ".concat(colors.G400, ")"), "var(--ds-icon-success, ".concat(colors.G400, ")")]];
@@ -21,21 +21,20 @@ export default (function (_ref) {
     className = _ref.className,
     onHover = _ref.onHover;
   var colorRefs = useRef([]);
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    currentFocusedColor = _useState2[0],
+    setCurrentFocusedColor = _useState2[1];
   useEffect(function () {
     colorRefs.current = colorRefs.current.slice(0, palette.length);
   }, []);
   var memoizedHandleKeyDown = useCallback(function (e) {
-    var colorIndex = palette.findIndex(function (_ref2) {
-      var _ref3 = _slicedToArray(_ref2, 1),
-        colorValue = _ref3[0];
-      return colorValue === selectedColor;
-    });
     var newColorIndex = null;
     var nextColor = function nextColor() {
-      return colorIndex + 1 > palette.length - 1 ? 0 : colorIndex + 1;
+      return currentFocusedColor + 1 > palette.length - 1 ? 0 : currentFocusedColor + 1;
     };
     var previousColor = function previousColor() {
-      return colorIndex - 1 < 0 ? palette.length - 1 : colorIndex - 1;
+      return currentFocusedColor - 1 < 0 ? palette.length - 1 : currentFocusedColor - 1;
     };
     switch (e.keyCode) {
       case VK_RIGHT:
@@ -49,22 +48,16 @@ export default (function (_ref) {
         newColorIndex = previousColor();
         break;
       case VK_TAB:
-        e.preventDefault();
-        if (e.shiftKey) {
-          newColorIndex = previousColor();
-        } else {
-          newColorIndex = nextColor();
-        }
+        setCurrentFocusedColor(0);
         break;
     }
     if (newColorIndex === null) {
       return;
     }
-    var newColorValue = palette[newColorIndex][0];
+    setCurrentFocusedColor(newColorIndex);
     var newRef = colorRefs.current[newColorIndex];
     newRef === null || newRef === void 0 ? void 0 : newRef.focus();
-    onClick(newColorValue);
-  }, [selectedColor, onClick, colorRefs]);
+  }, [currentFocusedColor, setCurrentFocusedColor, colorRefs]);
   return (
     /**
       We need to disable below eslint rule becuase of role "radiogroup". This role was added
@@ -80,12 +73,12 @@ export default (function (_ref) {
         maxWidth: cols * 32
       },
       onKeyDown: memoizedHandleKeyDown
-    }, palette.map(function (_ref4, i) {
-      var _ref5 = _slicedToArray(_ref4, 4),
-        colorValue = _ref5[0],
-        backgroundColor = _ref5[1],
-        borderColor = _ref5[2],
-        iconColor = _ref5[3];
+    }, palette.map(function (_ref2, i) {
+      var _ref3 = _slicedToArray(_ref2, 4),
+        colorValue = _ref3[0],
+        backgroundColor = _ref3[1],
+        borderColor = _ref3[2],
+        iconColor = _ref3[3];
       return jsx(Color, {
         key: colorValue,
         value: colorValue,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/status",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "Fabric Status React Components",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"