@atlaskit/status 1.3.7 → 1.4.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/status
 
+## 1.4.0
+
+### Minor Changes
+
+- [`11861bb36d4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/11861bb36d4) - [ux] [ECA11Y-44] [ECA11Y-22] [ECA11Y-19] Change the focus order in the status popup to improve accessibility.
+
 ## 1.3.7
 
 ### Patch 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.3.7";
+var packageVersion = "1.4.0";
 var createStatusAnalyticsAndFire = function createStatusAnalyticsAndFire(createAnalyticsEvent) {
   return function (payload) {
     var statusPayload = _objectSpread(_objectSpread({}, payload), {}, {

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

@@ -17,7 +17,7 @@ var _templateObject;
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 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, ")")]];
-var colorPaletteWrapperStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  margin: ", " ", " 0\n    ", ";\n  /* Firefox bug fix: https://product-fabric.atlassian.net/browse/ED-1789 */\n  display: flex;\n  flex-wrap: wrap;\n"])), "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)");
+var colorPaletteWrapperStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  padding-left: 0px;\n  margin: ", " ", " 0\n    ", ";\n  /* Firefox bug fix: https://product-fabric.atlassian.net/browse/ED-1789 */\n  display: flex;\n  flex-wrap: wrap;\n"])), "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)");
 var VK_LEFT = 37; //ArrowLeft
 var VK_RIGHT = 39; //ArrowRight
 var VK_UP = 38; //ArrowUp
@@ -83,10 +83,9 @@ var _default = function _default(_ref) {
       Task added in https://product-fabric.atlassian.net/wiki/spaces/E/pages/3182068181/Potential+improvements#Moderate-changes.
      */
     // eslint-disable-next-line jsx-a11y/interactive-supports-focus
-    (0, _react2.jsx)("div", {
+    (0, _react2.jsx)("ul", {
       css: colorPaletteWrapperStyles,
       className: className,
-      role: "radiogroup",
       style: {
         maxWidth: cols * 32
       },
@@ -106,7 +105,7 @@ var _default = function _default(_ref) {
         onClick: onClick,
         onHover: onHover,
         isSelected: colorValue === selectedColor,
-        tabIndex: colorValue === selectedColor ? 0 : -1,
+        tabIndex: i === 0 ? 0 : -1,
         setRef: function setRef(el) {
           return colorRefs.current[i] = el;
         }

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

@@ -75,7 +75,7 @@ var Color = /*#__PURE__*/function (_PureComponent) {
         iconColor = _this$props2.iconColor,
         value = _this$props2.value,
         setRef = _this$props2.setRef;
-      return (0, _react2.jsx)("span", {
+      return (0, _react2.jsx)("li", {
         css: buttonWrapperStyles
       }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages["".concat(value, "Color")], function (labels) {
         return (0, _react2.jsx)("button", {

package/dist/es2019/components/analytics.js

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

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

@@ -5,6 +5,7 @@ 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})`]];
 const colorPaletteWrapperStyles = css`
+  padding-left: 0px;
   margin: ${"var(--ds-space-100, 8px)"} ${"var(--ds-space-100, 8px)"} 0
     ${"var(--ds-space-100, 8px)"};
   /* Firefox bug fix: https://product-fabric.atlassian.net/browse/ED-1789 */
@@ -68,10 +69,9 @@ export default (({
       Task added in https://product-fabric.atlassian.net/wiki/spaces/E/pages/3182068181/Potential+improvements#Moderate-changes.
      */
     // eslint-disable-next-line jsx-a11y/interactive-supports-focus
-    jsx("div", {
+    jsx("ul", {
       css: colorPaletteWrapperStyles,
       className: className,
-      role: "radiogroup",
       style: {
         maxWidth: cols * 32
       },
@@ -86,7 +86,7 @@ export default (({
         onClick: onClick,
         onHover: onHover,
         isSelected: colorValue === selectedColor,
-        tabIndex: colorValue === selectedColor ? 0 : -1,
+        tabIndex: i === 0 ? 0 : -1,
         setRef: el => colorRefs.current[i] = el
       });
     }))

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

@@ -70,7 +70,7 @@ export default class Color extends PureComponent {
       value,
       setRef
     } = this.props;
-    return jsx("span", {
+    return jsx("li", {
       css: buttonWrapperStyles
     }, jsx(FormattedMessage, messages[`${value}Color`], labels => jsx("button", {
       css: buttonStyles,

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.3.7";
+var packageVersion = "1.4.0";
 export var createStatusAnalyticsAndFire = function createStatusAnalyticsAndFire(createAnalyticsEvent) {
   return function (payload) {
     var statusPayload = _objectSpread(_objectSpread({}, payload), {}, {

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

@@ -7,7 +7,7 @@ import React, { useEffect, useRef, useCallback } 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, ")")]];
-var colorPaletteWrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin: ", " ", " 0\n    ", ";\n  /* Firefox bug fix: https://product-fabric.atlassian.net/browse/ED-1789 */\n  display: flex;\n  flex-wrap: wrap;\n"])), "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)");
+var colorPaletteWrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding-left: 0px;\n  margin: ", " ", " 0\n    ", ";\n  /* Firefox bug fix: https://product-fabric.atlassian.net/browse/ED-1789 */\n  display: flex;\n  flex-wrap: wrap;\n"])), "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)");
 var VK_LEFT = 37; //ArrowLeft
 var VK_RIGHT = 39; //ArrowRight
 var VK_UP = 38; //ArrowUp
@@ -73,10 +73,9 @@ export default (function (_ref) {
       Task added in https://product-fabric.atlassian.net/wiki/spaces/E/pages/3182068181/Potential+improvements#Moderate-changes.
      */
     // eslint-disable-next-line jsx-a11y/interactive-supports-focus
-    jsx("div", {
+    jsx("ul", {
       css: colorPaletteWrapperStyles,
       className: className,
-      role: "radiogroup",
       style: {
         maxWidth: cols * 32
       },
@@ -96,7 +95,7 @@ export default (function (_ref) {
         onClick: onClick,
         onHover: onHover,
         isSelected: colorValue === selectedColor,
-        tabIndex: colorValue === selectedColor ? 0 : -1,
+        tabIndex: i === 0 ? 0 : -1,
         setRef: function setRef(el) {
           return colorRefs.current[i] = el;
         }

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

@@ -65,7 +65,7 @@ var Color = /*#__PURE__*/function (_PureComponent) {
         iconColor = _this$props2.iconColor,
         value = _this$props2.value,
         setRef = _this$props2.setRef;
-      return jsx("span", {
+      return jsx("li", {
         css: buttonWrapperStyles
       }, jsx(FormattedMessage, messages["".concat(value, "Color")], function (labels) {
         return jsx("button", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/status",
-  "version": "1.3.7",
+  "version": "1.4.0",
   "description": "Fabric Status React Components",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -30,7 +30,7 @@
     "@atlaskit/lozenge": "^11.4.0",
     "@atlaskit/textfield": "^5.6.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.21.0",
+    "@atlaskit/tokens": "^1.25.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },
@@ -43,6 +43,8 @@
     "@atlaskit/elements-test-helpers": "^0.7.0",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^12.1.5",
     "enzyme": "^3.10.0",
     "enzyme-adapter-react-16": "^1.15.1",
     "react": "^16.8.0",