@atlaskit/inline-edit 12.4.2 → 12.4.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/inline-edit
 
+## 12.4.3
+
+### Patch Changes
+
+- [`b59892e4807`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b59892e4807) - "Clean up some small accessibility issues"
+
 ## 12.4.2
 
 ### Patch Changes

package/dist/cjs/inline-edit.js

@@ -20,19 +20,16 @@ var _useButtonFocusHook2 = _interopRequireDefault(require("./internal/hooks/use-
 var _readView = _interopRequireDefault(require("./internal/read-view"));
 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; }
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } /** @jsx jsx */
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+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) { (0, _defineProperty2.default)(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; } /** @jsx jsx */
 var fieldStyles = (0, _react2.css)({
   maxWidth: '100%',
   position: 'relative'
 });
-var buttonStyles = (0, _react2.css)({
-  display: 'none'
-});
 var analyticsAttributes = {
   componentName: 'inlineEdit',
   packageName: "@atlaskit/inline-edit",
-  packageVersion: "12.4.2"
+  packageVersion: "12.4.3"
 };
 var noop = function noop() {};
 var InnerInlineEdit = function InnerInlineEdit(props) {
@@ -168,50 +165,57 @@ var InnerInlineEdit = function InnerInlineEdit(props) {
         _onKeyDown = _ref$formProps.onKeyDown,
         onSubmit = _ref$formProps.onSubmit,
         formRef = _ref$formProps.ref;
-      return (/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */
-        (0, _react2.jsx)("form", {
-          onKeyDown: function onKeyDown(e) {
-            _onKeyDown(e);
-            if (e.key === 'Esc' || e.key === 'Escape') {
-              onCancel();
-            }
+      return (0, _react2.jsx)("form", {
+        /**
+         * It is not normally acceptable to add key handlers to non-interactive elements
+         * as this is an accessibility anti-pattern. However, because this instance is
+         * to add support for keyboard functionality instead of creating an inaccessible
+         * custom element, we can add role="presentation" so that there is no negative
+         * impacts to assistive technologies.
+         */
+        role: "presentation",
+        onKeyDown: function onKeyDown(e) {
+          _onKeyDown(e);
+          if (e.key === 'Esc' || e.key === 'Escape') {
+            onCancel();
+          }
+        },
+        onSubmit: onSubmit,
+        ref: formRef
+      }, (0, _react2.jsx)(_Field.default, {
+        name: "inlineEdit",
+        label: label,
+        defaultValue: defaultValue,
+        validate: validate,
+        isRequired: isRequired,
+        key: "edit-view" // used for reset to default value
+      }, function (_ref2) {
+        var fieldProps = _ref2.fieldProps,
+          error = _ref2.error;
+        return (0, _react2.jsx)("div", {
+          css: fieldStyles,
+          onBlur: function onBlur() {
+            onEditViewWrapperBlur(fieldProps.isInvalid, onSubmit, formRef);
+          },
+          onFocus: onEditViewWrapperFocus
+        }, editView(_objectSpread(_objectSpread({}, fieldProps), {}, {
+          errorMessage: error
+        }), editViewRef), !hideActionButtons ? (0, _react2.jsx)(_buttons.default, {
+          cancelButtonLabel: cancelButtonLabel,
+          confirmButtonLabel: confirmButtonLabel,
+          onMouseDown: function onMouseDown() {
+            /** Prevents focus on edit button only if mouse is used to click button, but not when keyboard is used */
+            doNotFocusOnEditButton();
           },
-          onSubmit: onSubmit,
-          ref: formRef
-        }, (0, _react2.jsx)(_Field.default, {
-          name: "inlineEdit",
-          label: label,
-          defaultValue: defaultValue,
-          validate: validate,
-          isRequired: isRequired,
-          key: "edit-view" // used for reset to default value
-        }, function (_ref2) {
-          var fieldProps = _ref2.fieldProps,
-            error = _ref2.error;
-          return (0, _react2.jsx)("div", {
-            css: fieldStyles,
-            onBlur: function onBlur() {
-              onEditViewWrapperBlur(fieldProps.isInvalid, onSubmit, formRef);
-            },
-            onFocus: onEditViewWrapperFocus
-          }, editView(_objectSpread(_objectSpread({}, fieldProps), {}, {
-            errorMessage: error
-          }), editViewRef), !hideActionButtons ? (0, _react2.jsx)(_buttons.default, {
-            cancelButtonLabel: cancelButtonLabel,
-            confirmButtonLabel: confirmButtonLabel,
-            onMouseDown: function onMouseDown() {
-              /** Prevents focus on edit button only if mouse is used to click button, but not when keyboard is used */
-              doNotFocusOnEditButton();
-            },
-            mode: mode,
-            onCancelClick: onCancelClick
-          }) : /** This is to allow Ctrl + Enter to submit without action buttons */
-          (0, _react2.jsx)("button", {
-            css: buttonStyles,
-            type: "submit"
-          }));
-        }))
-      );
+          mode: mode,
+          onCancelClick: onCancelClick
+        }) : /** This is to allow Ctrl + Enter to submit without action buttons */
+        (0, _react2.jsx)("button", {
+          hidden: true,
+          type: "submit",
+          "aria-label": "Submit"
+        }));
+      }));
     });
   }
   return (/** Form, Field are used here only for the label and spacing */

package/dist/cjs/internal/read-view.js

@@ -66,8 +66,6 @@ var ReadView = function ReadView(_ref) {
       postReadViewClick();
     }
   };
-
-  /* eslint-disable jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions,jsx-a11y/no-noninteractive-element-interactions */
   return (0, _react2.jsx)("div", {
     css: readViewContainerStyles
   }, (0, _react2.jsx)("button", {
@@ -77,7 +75,16 @@ var ReadView = function ReadView(_ref) {
     onClick: onEditRequested,
     ref: editButtonRef
   }), (0, _react2.jsx)("div", {
-    css: [readViewWrapperStyles, readViewFitContainerWidth && readViewFitContainerWidthStyles],
+    css: [readViewWrapperStyles, readViewFitContainerWidth && readViewFitContainerWidthStyles]
+    /**
+     * It is not normally acceptable to add click handlers to non-interactive elements
+     * as this is an accessibility anti-pattern. However, because this instance is
+     * account for clicking on links that may be embedded within inline-edit and not
+     * creating an inaccessible custom element, we can add role="presentation" so that
+     * there is no negative impacts to assistive technologies.
+     * (Why links are embeeded in inline-edit is for another day...)
+     */,
+    role: "presentation",
     onClick: onReadViewClick,
     onMouseDown: function onMouseDown(e) {
       startX.current = e.clientX;
@@ -85,7 +92,6 @@ var ReadView = function ReadView(_ref) {
     },
     "data-read-view-fit-container-width": readViewFitContainerWidth
   }, readView()));
-  /* eslint-enable jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions,jsx-a11y/no-noninteractive-element-interactions */
 };
 var _default = ReadView;
 exports.default = _default;

package/dist/es2019/inline-edit.js

@@ -13,13 +13,10 @@ const fieldStyles = css({
   maxWidth: '100%',
   position: 'relative'
 });
-const buttonStyles = css({
-  display: 'none'
-});
 const analyticsAttributes = {
   componentName: 'inlineEdit',
   packageName: "@atlaskit/inline-edit",
-  packageVersion: "12.4.2"
+  packageVersion: "12.4.3"
 };
 const noop = () => {};
 const InnerInlineEdit = props => {
@@ -143,8 +140,15 @@ const InnerInlineEdit = props => {
         onSubmit,
         ref: formRef
       }
-    }) => /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */
-    jsx("form", {
+    }) => jsx("form", {
+      /**
+       * It is not normally acceptable to add key handlers to non-interactive elements
+       * as this is an accessibility anti-pattern. However, because this instance is
+       * to add support for keyboard functionality instead of creating an inaccessible
+       * custom element, we can add role="presentation" so that there is no negative
+       * impacts to assistive technologies.
+       */
+      role: "presentation",
       onKeyDown: e => {
         onKeyDown(e);
         if (e.key === 'Esc' || e.key === 'Escape') {
@@ -183,8 +187,9 @@ const InnerInlineEdit = props => {
       onCancelClick: onCancelClick
     }) : /** This is to allow Ctrl + Enter to submit without action buttons */
     jsx("button", {
-      css: buttonStyles,
-      type: "submit"
+      hidden: true,
+      type: "submit",
+      "aria-label": "Submit"
     })))));
   }
   return (/** Form, Field are used here only for the label and spacing */

package/dist/es2019/internal/read-view.js

@@ -57,8 +57,6 @@ const ReadView = ({
       postReadViewClick();
     }
   };
-
-  /* eslint-disable jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions,jsx-a11y/no-noninteractive-element-interactions */
   return jsx("div", {
     css: readViewContainerStyles
   }, jsx("button", {
@@ -68,7 +66,16 @@ const ReadView = ({
     onClick: onEditRequested,
     ref: editButtonRef
   }), jsx("div", {
-    css: [readViewWrapperStyles, readViewFitContainerWidth && readViewFitContainerWidthStyles],
+    css: [readViewWrapperStyles, readViewFitContainerWidth && readViewFitContainerWidthStyles]
+    /**
+     * It is not normally acceptable to add click handlers to non-interactive elements
+     * as this is an accessibility anti-pattern. However, because this instance is
+     * account for clicking on links that may be embedded within inline-edit and not
+     * creating an inaccessible custom element, we can add role="presentation" so that
+     * there is no negative impacts to assistive technologies.
+     * (Why links are embeeded in inline-edit is for another day...)
+     */,
+    role: "presentation",
     onClick: onReadViewClick,
     onMouseDown: e => {
       startX.current = e.clientX;
@@ -76,7 +83,5 @@ const ReadView = ({
     },
     "data-read-view-fit-container-width": readViewFitContainerWidth
   }, readView()));
-  /* eslint-enable jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions,jsx-a11y/no-noninteractive-element-interactions */
 };
-
 export default ReadView;

package/dist/esm/inline-edit.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+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; }
 /** @jsx jsx */
 import React, { useCallback, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
@@ -17,13 +17,10 @@ var fieldStyles = css({
   maxWidth: '100%',
   position: 'relative'
 });
-var buttonStyles = css({
-  display: 'none'
-});
 var analyticsAttributes = {
   componentName: 'inlineEdit',
   packageName: "@atlaskit/inline-edit",
-  packageVersion: "12.4.2"
+  packageVersion: "12.4.3"
 };
 var noop = function noop() {};
 var InnerInlineEdit = function InnerInlineEdit(props) {
@@ -159,50 +156,57 @@ var InnerInlineEdit = function InnerInlineEdit(props) {
         _onKeyDown = _ref$formProps.onKeyDown,
         onSubmit = _ref$formProps.onSubmit,
         formRef = _ref$formProps.ref;
-      return (/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */
-        jsx("form", {
-          onKeyDown: function onKeyDown(e) {
-            _onKeyDown(e);
-            if (e.key === 'Esc' || e.key === 'Escape') {
-              onCancel();
-            }
+      return jsx("form", {
+        /**
+         * It is not normally acceptable to add key handlers to non-interactive elements
+         * as this is an accessibility anti-pattern. However, because this instance is
+         * to add support for keyboard functionality instead of creating an inaccessible
+         * custom element, we can add role="presentation" so that there is no negative
+         * impacts to assistive technologies.
+         */
+        role: "presentation",
+        onKeyDown: function onKeyDown(e) {
+          _onKeyDown(e);
+          if (e.key === 'Esc' || e.key === 'Escape') {
+            onCancel();
+          }
+        },
+        onSubmit: onSubmit,
+        ref: formRef
+      }, jsx(Field, {
+        name: "inlineEdit",
+        label: label,
+        defaultValue: defaultValue,
+        validate: validate,
+        isRequired: isRequired,
+        key: "edit-view" // used for reset to default value
+      }, function (_ref2) {
+        var fieldProps = _ref2.fieldProps,
+          error = _ref2.error;
+        return jsx("div", {
+          css: fieldStyles,
+          onBlur: function onBlur() {
+            onEditViewWrapperBlur(fieldProps.isInvalid, onSubmit, formRef);
+          },
+          onFocus: onEditViewWrapperFocus
+        }, editView(_objectSpread(_objectSpread({}, fieldProps), {}, {
+          errorMessage: error
+        }), editViewRef), !hideActionButtons ? jsx(Buttons, {
+          cancelButtonLabel: cancelButtonLabel,
+          confirmButtonLabel: confirmButtonLabel,
+          onMouseDown: function onMouseDown() {
+            /** Prevents focus on edit button only if mouse is used to click button, but not when keyboard is used */
+            doNotFocusOnEditButton();
           },
-          onSubmit: onSubmit,
-          ref: formRef
-        }, jsx(Field, {
-          name: "inlineEdit",
-          label: label,
-          defaultValue: defaultValue,
-          validate: validate,
-          isRequired: isRequired,
-          key: "edit-view" // used for reset to default value
-        }, function (_ref2) {
-          var fieldProps = _ref2.fieldProps,
-            error = _ref2.error;
-          return jsx("div", {
-            css: fieldStyles,
-            onBlur: function onBlur() {
-              onEditViewWrapperBlur(fieldProps.isInvalid, onSubmit, formRef);
-            },
-            onFocus: onEditViewWrapperFocus
-          }, editView(_objectSpread(_objectSpread({}, fieldProps), {}, {
-            errorMessage: error
-          }), editViewRef), !hideActionButtons ? jsx(Buttons, {
-            cancelButtonLabel: cancelButtonLabel,
-            confirmButtonLabel: confirmButtonLabel,
-            onMouseDown: function onMouseDown() {
-              /** Prevents focus on edit button only if mouse is used to click button, but not when keyboard is used */
-              doNotFocusOnEditButton();
-            },
-            mode: mode,
-            onCancelClick: onCancelClick
-          }) : /** This is to allow Ctrl + Enter to submit without action buttons */
-          jsx("button", {
-            css: buttonStyles,
-            type: "submit"
-          }));
-        }))
-      );
+          mode: mode,
+          onCancelClick: onCancelClick
+        }) : /** This is to allow Ctrl + Enter to submit without action buttons */
+        jsx("button", {
+          hidden: true,
+          type: "submit",
+          "aria-label": "Submit"
+        }));
+      }));
     });
   }
   return (/** Form, Field are used here only for the label and spacing */

package/dist/esm/internal/read-view.js

@@ -56,8 +56,6 @@ var ReadView = function ReadView(_ref) {
       postReadViewClick();
     }
   };
-
-  /* eslint-disable jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions,jsx-a11y/no-noninteractive-element-interactions */
   return jsx("div", {
     css: readViewContainerStyles
   }, jsx("button", {
@@ -67,7 +65,16 @@ var ReadView = function ReadView(_ref) {
     onClick: onEditRequested,
     ref: editButtonRef
   }), jsx("div", {
-    css: [readViewWrapperStyles, readViewFitContainerWidth && readViewFitContainerWidthStyles],
+    css: [readViewWrapperStyles, readViewFitContainerWidth && readViewFitContainerWidthStyles]
+    /**
+     * It is not normally acceptable to add click handlers to non-interactive elements
+     * as this is an accessibility anti-pattern. However, because this instance is
+     * account for clicking on links that may be embedded within inline-edit and not
+     * creating an inaccessible custom element, we can add role="presentation" so that
+     * there is no negative impacts to assistive technologies.
+     * (Why links are embeeded in inline-edit is for another day...)
+     */,
+    role: "presentation",
     onClick: onReadViewClick,
     onMouseDown: function onMouseDown(e) {
       startX.current = e.clientX;
@@ -75,7 +82,5 @@ var ReadView = function ReadView(_ref) {
     },
     "data-read-view-fit-container-width": readViewFitContainerWidth
   }, readView()));
-  /* eslint-enable jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions,jsx-a11y/no-noninteractive-element-interactions */
 };
-
 export default ReadView;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/inline-edit",
-  "version": "12.4.2",
+  "version": "12.4.3",
   "description": "An inline edit displays a custom input component that switches between reading and editing on the same page.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -33,14 +33,14 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^9.1.0",
-    "@atlaskit/button": "^16.9.0",
+    "@atlaskit/button": "^16.10.0",
     "@atlaskit/codemod-utils": "^4.2.0",
     "@atlaskit/form": "^8.11.0",
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/inline-dialog": "^13.6.0",
     "@atlaskit/textfield": "^5.6.0",
-    "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.15.0",
+    "@atlaskit/theme": "^12.6.0",
+    "@atlaskit/tokens": "^1.22.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },
@@ -49,12 +49,13 @@
   },
   "devDependencies": {
     "@af/accessibility-testing": "*",
-    "@atlaskit/datetime-picker": "^12.7.0",
+    "@af/integration-testing": "*",
+    "@atlaskit/datetime-picker": "^12.10.0",
     "@atlaskit/docs": "*",
     "@atlaskit/section-message": "^6.4.0",
-    "@atlaskit/select": "^16.5.0",
+    "@atlaskit/select": "^16.6.0",
     "@atlaskit/ssr": "*",
-    "@atlaskit/tag": "^11.5.0",
+    "@atlaskit/tag": "^11.6.0",
     "@atlaskit/tag-group": "^10.2.0",
     "@atlaskit/textarea": "^4.7.0",
     "@atlaskit/visual-regression": "*",