@innovaccer/design-system 2.7.0-1 → 2.7.0

package/core/components/organisms/verticalNav/__tests__/__snapshots__/VerticalNav.test.tsx.snap

@@ -18,6 +18,7 @@ exports[`Vertical Navigation component
           <i
             class="material-icons material-icons-round Icon Icon--default"
             data-test="DesignSystem-VerticalNav--Icon"
+            role="button"
             style="font-size: 16px; width: 16px;"
           >
             assignment_ind_round
@@ -34,6 +35,7 @@ exports[`Vertical Navigation component
           <i
             class="material-icons material-icons-round Icon Icon--default"
             data-test="DesignSystem-VerticalNav--Icon"
+            role="button"
             style="font-size: 16px; width: 16px;"
           >
             forum_round
@@ -49,6 +51,7 @@ exports[`Vertical Navigation component
           <i
             class="material-icons material-icons-round Icon Icon--info"
             data-test="DesignSystem-VerticalNav--Icon"
+            role="button"
             style="font-size: 16px; width: 16px;"
           >
             assignment_ind_round
@@ -64,6 +67,7 @@ exports[`Vertical Navigation component
           <i
             class="material-icons material-icons-round Icon Icon--default"
             data-test="DesignSystem-VerticalNav--Icon"
+            role="button"
             style="font-size: 16px; width: 16px;"
           >
             events_round
@@ -80,6 +84,7 @@ exports[`Vertical Navigation component
           <i
             class="material-icons material-icons-round Icon Icon--disabled"
             data-test="DesignSystem-VerticalNav--Icon"
+            role="button"
             style="font-size: 16px; width: 16px;"
           >
             airline_seat_flat_angled_round
@@ -96,6 +101,7 @@ exports[`Vertical Navigation component
           <i
             class="material-icons material-icons-round Icon Icon--default"
             data-test="DesignSystem-VerticalNav--Icon"
+            role="button"
             style="font-size: 16px; width: 16px;"
           >
             favorite_round
@@ -135,6 +141,7 @@ exports[`Vertical Navigation component
           <i
             class="material-icons material-icons-round Icon Icon--default mr-4"
             data-test="DesignSystem-VerticalNav--Icon"
+            role="button"
             style="font-size: 16px; width: 16px;"
           >
             assignment_ind_round
@@ -173,6 +180,7 @@ exports[`Vertical Navigation component
           <i
             class="material-icons material-icons-round Icon Icon--default mr-4"
             data-test="DesignSystem-VerticalNav--Icon"
+            role="button"
             style="font-size: 16px; width: 16px;"
           >
             forum_round
@@ -186,6 +194,7 @@ exports[`Vertical Navigation component
         </div>
         <i
           class="material-icons material-icons-round Icon Icon--subtle mx-4"
+          role="button"
           style="font-size: 16px; width: 16px;"
         >
           keyboard_arrow_up_round
@@ -200,6 +209,7 @@ exports[`Vertical Navigation component
           <i
             class="material-icons material-icons-round Icon Icon--info mr-4"
             data-test="DesignSystem-VerticalNav--Icon"
+            role="button"
             style="font-size: 16px; width: 16px;"
           >
             assignment_ind_round
@@ -221,6 +231,7 @@ exports[`Vertical Navigation component
           <i
             class="material-icons material-icons-round Icon Icon--default mr-4"
             data-test="DesignSystem-VerticalNav--Icon"
+            role="button"
             style="font-size: 16px; width: 16px;"
           >
             events_round
@@ -243,6 +254,7 @@ exports[`Vertical Navigation component
           <i
             class="material-icons material-icons-round Icon Icon--disabled mr-4"
             data-test="DesignSystem-VerticalNav--Icon"
+            role="button"
             style="font-size: 16px; width: 16px;"
           >
             airline_seat_flat_angled_round
@@ -271,6 +283,7 @@ exports[`Vertical Navigation component
           <i
             class="material-icons material-icons-round Icon Icon--default mr-4"
             data-test="DesignSystem-VerticalNav--Icon"
+            role="button"
             style="font-size: 16px; width: 16px;"
           >
             favorite_round
@@ -284,6 +297,7 @@ exports[`Vertical Navigation component
         </div>
         <i
           class="material-icons material-icons-round Icon Icon--subtle mx-4"
+          role="button"
           style="font-size: 16px; width: 16px;"
         >
           keyboard_arrow_down_round

package/core/utils/__tests__/__snapshots__/TS.test.tsx.snap

@@ -9,6 +9,7 @@ exports[`TS renders children 1`] = `
     <i
       class="material-icons material-icons-round Icon Icon--white Avatar-content--secondary"
       data-test="DesignSystem-Avatar--Icon"
+      role="button"
       style="font-size: 16px; width: 16px;"
     >
       person_round
@@ -114,6 +115,7 @@ exports[`TS renders children 1`] = `
                 <i
                   class="material-icons material-icons-round Icon Icon--default"
                   data-test="DesignSystem-Button--Icon"
+                  role="button"
                   style="font-size: 16px; width: 16px;"
                 >
                   arrow_back_round
@@ -134,6 +136,7 @@ exports[`TS renders children 1`] = `
                 </h5>
                 <i
                   class="material-icons material-icons-round Icon Icon--inverse pl-3"
+                  role="button"
                   style="font-size: 16px; width: 16px;"
                 >
                   keyboard_arrow_down_round
@@ -150,6 +153,7 @@ exports[`TS renders children 1`] = `
                 </h5>
                 <i
                   class="material-icons material-icons-round Icon Icon--inverse pl-3"
+                  role="button"
                   style="font-size: 16px; width: 16px;"
                 >
                   keyboard_arrow_down_round
@@ -168,6 +172,7 @@ exports[`TS renders children 1`] = `
                 <i
                   class="material-icons material-icons-round Icon Icon--default"
                   data-test="DesignSystem-Button--Icon"
+                  role="button"
                   style="font-size: 16px; width: 16px;"
                 >
                   arrow_forward_round
@@ -759,6 +764,7 @@ exports[`TS renders children 1`] = `
         </div>
         <i
           class="material-icons material-icons-round Icon Icon--default"
+          role="button"
           style="font-size: 16px; width: 16px;"
         >
           keyboard_arrow_down_round
@@ -796,6 +802,7 @@ exports[`TS renders children 1`] = `
               />
               <i
                 class="material-icons material-icons-round Icon Icon--default"
+                role="button"
                 style="font-size: 16px; width: 16px;"
               >
                 keyboard_arrow_down_round
@@ -836,6 +843,7 @@ exports[`TS renders children 1`] = `
   </h4>
   <i
     class="material-icons material-icons-round Icon"
+    role="button"
     style="font-size: 16px; width: 16px;"
   >
     Hello World!_round
@@ -932,6 +940,7 @@ exports[`TS renders children 1`] = `
     <i
       class="material-icons material-icons-round Icon Icon--info Message-icon Message-icon--info"
       data-test="DesignSystem-Message--Icon"
+      role="button"
       style="font-size: 16px; width: 16px;"
     >
       info_round
@@ -1493,6 +1502,7 @@ exports[`TS renders children 1`] = `
   >
     <i
       class="material-icons material-icons-round Icon Toast-icon Toast-icon--left Toast-icon--info"
+      role="button"
       style="font-size: 16px; width: 16px;"
     >
       info_round
@@ -1568,6 +1578,7 @@ exports[`TS renders children 1`] = `
           <i
             class="material-icons material-icons-round Icon Icon--default"
             data-test="DesignSystem-Button--Icon"
+            role="button"
             style="font-size: 16px; width: 16px;"
           >
             close_round
@@ -1621,6 +1632,7 @@ exports[`TS renders children 1`] = `
           <i
             class="material-icons material-icons-round Icon Icon--disabled"
             data-test="DesignSystem-Button--Icon"
+            role="button"
             style="font-size: 16px; width: 16px;"
           >
             first_page_round
@@ -1639,6 +1651,7 @@ exports[`TS renders children 1`] = `
           <i
             class="material-icons material-icons-round Icon Icon--disabled"
             data-test="DesignSystem-Button--Icon"
+            role="button"
             style="font-size: 16px; width: 16px;"
           >
             navigate_before_round
@@ -1661,6 +1674,7 @@ exports[`TS renders children 1`] = `
           <i
             class="material-icons material-icons-round Icon Icon--disabled"
             data-test="DesignSystem-Button--Icon"
+            role="button"
             style="font-size: 16px; width: 16px;"
           >
             navigate_next_round
@@ -1679,6 +1693,7 @@ exports[`TS renders children 1`] = `
           <i
             class="material-icons material-icons-round Icon Icon--disabled"
             data-test="DesignSystem-Button--Icon"
+            role="button"
             style="font-size: 16px; width: 16px;"
           >
             last_page_round
@@ -1766,6 +1781,7 @@ exports[`TS renders children 1`] = `
             <i
               class="material-icons material-icons-round Icon Icon--default"
               data-test="DesignSystem-Button--Icon"
+              role="button"
               style="font-size: 16px; width: 16px;"
             >
               arrow_back_round
@@ -1786,6 +1802,7 @@ exports[`TS renders children 1`] = `
             </h5>
             <i
               class="material-icons material-icons-round Icon Icon--inverse pl-3"
+              role="button"
               style="font-size: 16px; width: 16px;"
             >
               keyboard_arrow_down_round
@@ -1802,6 +1819,7 @@ exports[`TS renders children 1`] = `
             </h5>
             <i
               class="material-icons material-icons-round Icon Icon--inverse pl-3"
+              role="button"
               style="font-size: 16px; width: 16px;"
             >
               keyboard_arrow_down_round
@@ -1820,6 +1838,7 @@ exports[`TS renders children 1`] = `
             <i
               class="material-icons material-icons-round Icon Icon--default"
               data-test="DesignSystem-Button--Icon"
+              role="button"
               style="font-size: 16px; width: 16px;"
             >
               arrow_forward_round

package/dist/core/accessibility/utils/useAccessibilityProps.d.ts

@@ -1,18 +1,19 @@
 import * as React from 'react';
+declare type AriaRoleType = React.AriaRole;
 interface IProps {
     onClick?: (event: React.MouseEvent<HTMLElement>) => void;
     onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void;
-    role?: React.AriaRole;
+    role?: AriaRoleType;
     'aria-label'?: React.AriaAttributes['aria-label'];
 }
 declare const useAccessibilityProps: ({ onClick, onKeyDown, role, ...rest }: IProps) => {
     onClick: (event: React.MouseEvent<HTMLElement>) => void;
-    role: string & {};
+    role: React.AriaRole;
     tabIndex: number;
     'aria-label': string | undefined;
     onKeyDown: (e: React.SyntheticEvent<HTMLElement>) => void;
 } | {
-    role: "search" | "link" | "form" | "list" | "alert" | "article" | "button" | "dialog" | "figure" | "img" | "main" | "menu" | "menuitem" | "option" | "table" | "switch" | "tooltip" | (string & {}) | "none" | "alertdialog" | "application" | "banner" | "cell" | "checkbox" | "columnheader" | "combobox" | "complementary" | "contentinfo" | "definition" | "directory" | "document" | "feed" | "grid" | "gridcell" | "group" | "heading" | "listbox" | "listitem" | "log" | "marquee" | "math" | "menubar" | "menuitemcheckbox" | "menuitemradio" | "navigation" | "note" | "presentation" | "progressbar" | "radio" | "radiogroup" | "region" | "row" | "rowgroup" | "rowheader" | "scrollbar" | "searchbox" | "separator" | "slider" | "spinbutton" | "status" | "tab" | "tablist" | "tabpanel" | "term" | "textbox" | "timer" | "toolbar" | "tree" | "treegrid" | "treeitem" | undefined;
+    role: React.AriaRole;
     'aria-label': string | undefined;
 };
 export default useAccessibilityProps;

package/dist/index.esm.js

@@ -1,8 +1,8 @@
 
   /**
-   * Generated on: 1640111363670 
+   * Generated on: 1640268334979 
    *      Package: @innovaccer/design-system
-   *      Version: v2.7.0-1
+   *      Version: v2.7.0
    *      License: MIT
    *         Docs: https://innovaccer.github.io/design-system
    */
@@ -948,7 +948,8 @@ var AvatarGroup = function AvatarGroup(props) {
     trigger: trigger,
     position: position,
     appendToBody: appendToBody,
-    className: popperClass
+    className: popperClass,
+    offset: "medium"
   }, renderPopper()));
 };
 AvatarGroup.displayName = 'AvatarGroup';
@@ -1342,25 +1343,38 @@ Text.defaultProps = {
   size: 'regular'
 };
 
-var isEnterKey = function isEnterKey(e) {
-  return e.key === 'Enter';
-};
-
 var isSpaceKey = function isSpaceKey(e) {
   return e.key === 'Space';
 };
 
 var _excluded$x = ["onClick", "onKeyDown", "role"];
+var allowed = {
+  button: new Set(['Enter', 'Space', 'Spacebar', ' ']),
+  link: new Set(['Enter']),
+  // onChange handles everything, no need for extra keyboard interaction
+  checkbox: new Set([]),
+  radio: new Set([])
+}; // Refer for keyboard interactions: https://webaim.org/techniques/keyboard/#testing
+
+var isKeyboardInteractionAllowed = function isKeyboardInteractionAllowed(role, key) {
+  if (!allowed[role]) {
+    return false;
+  }
+
+  var allowedKeys = allowed[role];
+  return allowedKeys.has(key);
+};
 
 var useAccessibilityProps = function useAccessibilityProps(_ref) {
   var onClick = _ref.onClick,
       _onKeyDown = _ref.onKeyDown,
-      role = _ref.role,
+      _ref$role = _ref.role,
+      role = _ref$role === void 0 ? 'button' : _ref$role,
       rest = _objectWithoutProperties$1(_ref, _excluded$x);
 
   return _objectSpread2({}, onClick ? {
     onClick: onClick,
-    role: role || 'button',
+    role: role,
     tabIndex: 0,
     'aria-label': rest['aria-label'],
     onKeyDown: function onKeyDown(e) {
@@ -1370,8 +1384,13 @@ var useAccessibilityProps = function useAccessibilityProps(_ref) {
         return;
       }
 
-      if (isEnterKey(e) && onClick) {
-        onClick(e);
+      var key = e.key;
+
+      if (isKeyboardInteractionAllowed(role, key)) {
+        if (onClick) {
+          e.preventDefault();
+          onClick(e);
+        }
       }
     }
   } : {
@@ -6349,7 +6368,7 @@ var Handle = /*#__PURE__*/function (_React$Component) {
       var _this$props2 = _this.props,
           stepSize = _this$props2.stepSize,
           value = _this$props2.value;
-      var keyCode = event.keyCode;
+      var keyCode = event.keyCode; // TODO(a11y): add ARROW_DOWN & ARROW_UP too
 
       if (keyCode === ARROW_LEFT) {
         _this.changeValue(value - stepSize);
@@ -16712,6 +16731,10 @@ var Dropzone = function Dropzone(props) {
     if (isDragActive) return /*#__PURE__*/React.createElement(DropzoneActive, {
       type: type
     });
+    var buttonAccessibilityProps = useAccessibilityProps({
+      onClick: open,
+      'aria-label': 'Drag your files here or click to select files'
+    });
     return /*#__PURE__*/React.createElement(React.Fragment, null, type !== 'tight' && /*#__PURE__*/React.createElement(Icon, {
       name: "backup",
       size: 64,
@@ -16724,14 +16747,13 @@ var Dropzone = function Dropzone(props) {
       weight: "strong",
       className: "mr-2",
       appearance: disabled ? 'disabled' : 'default'
-    }, "Drag your files here or"), /*#__PURE__*/React.createElement("span", {
-      className: "cursor-pointer",
-      onClick: open
-    }, /*#__PURE__*/React.createElement(Text, {
+    }, "Drag your files here or"), /*#__PURE__*/React.createElement(Text, _extends$3({
+      tabIndex: disabled ? -1 : 0,
+      className: "ml-2 cursor-pointer",
       size: "large",
       weight: "strong",
       appearance: disabled ? 'disabled' : 'link'
-    }, "browse files")), /*#__PURE__*/React.createElement("input", getInputProps())), formatLabel && /*#__PURE__*/React.createElement(Text, {
+    }, buttonAccessibilityProps), "browse files"), /*#__PURE__*/React.createElement("input", getInputProps())), formatLabel && /*#__PURE__*/React.createElement(Text, {
       appearance: disabled ? 'disabled' : 'subtle'
     }, formatLabel), sizeLabel && /*#__PURE__*/React.createElement(Text, {
       appearance: disabled ? 'disabled' : 'subtle'
@@ -20324,6 +20346,6 @@ Divider.defaultProps = {
   vertical: false
 };
 
-var version = "2.7.0-1";
+var version = "2.7.0";
 
 export { Avatar, AvatarGroup, Backdrop, Badge, Breadcrumbs, Button, Calendar, Caption, Card, CardBody, CardFooter, CardHeader, CardSubdued, ChatMessage, Checkbox, Chip, ChipGroup, ChipInput, ChoiceList, Collapsible, Column, DatePicker, DateRangePicker, Dialog, Divider, Dropdown, Dropzone, EditableChipInput, EditableDropdown, EditableInput, EmptyState, FileList, FileUploader, FileUploaderList, FullscreenModal, Grid, GridCell, Heading, HorizontalNav, Icon, InlineMessage, Input, X as InputMask, Label, Legend, Link, List, Message, MetaList, MetricInput, Modal, ModalBody, ModalDescription, ModalFooter, ModalHeader, MultiSlider, Navigation, OutsideClick, PageHeader, Pagination, Paragraph, Pills, Placeholder, PlaceholderParagraph, Popover, ProgressBar, ProgressRing, Radio, RangeSlider, Row, Sidesheet, Slider, Spinner, StatusHint, Stepper, Subheading, Switch, Tab, Table, Tabs, TabsWrapper, Text, Textarea, TimePicker, Toast, Tooltip, index$1 as Utils, VerificationCodeInput, VerticalNav, version };

package/dist/index.js

@@ -1,8 +1,8 @@
 
   /**
-   * Generated on: 1640111364015 
+   * Generated on: 1640268335290 
    *      Package: @innovaccer/design-system
-   *      Version: v2.7.0-1
+   *      Version: v2.7.0
    *      License: MIT
    *         Docs: https://innovaccer.github.io/design-system
    */
@@ -593,7 +593,8 @@
         trigger: trigger,
         position: position,
         appendToBody: appendToBody,
-        className: popperClass
+        className: popperClass,
+        offset: "medium"
       }, renderPopper()));
     };
     AvatarGroup.displayName = 'AvatarGroup';
@@ -980,23 +981,36 @@
       size: 'regular'
     };
 
-    var isEnterKey = function isEnterKey(e) {
-      return e.key === 'Enter';
-    };
-
     var isSpaceKey = function isSpaceKey(e) {
       return e.key === 'Space';
     };
 
+    var allowed = {
+      button: new Set(['Enter', 'Space', 'Spacebar', ' ']),
+      link: new Set(['Enter']),
+      checkbox: new Set([]),
+      radio: new Set([])
+    };
+
+    var isKeyboardInteractionAllowed = function isKeyboardInteractionAllowed(role, key) {
+      if (!allowed[role]) {
+        return false;
+      }
+
+      var allowedKeys = allowed[role];
+      return allowedKeys.has(key);
+    };
+
     var useAccessibilityProps = function useAccessibilityProps(_a) {
       var onClick = _a.onClick,
           _onKeyDown = _a.onKeyDown,
-          role = _a.role,
+          _b = _a.role,
+          role = _b === void 0 ? 'button' : _b,
           rest = __rest(_a, ["onClick", "onKeyDown", "role"]);
 
       return __assign({}, onClick ? {
         onClick: onClick,
-        role: role || 'button',
+        role: role,
         tabIndex: 0,
         'aria-label': rest['aria-label'],
         onKeyDown: function onKeyDown(e) {
@@ -1006,8 +1020,13 @@
             return;
           }
 
-          if (isEnterKey(e) && onClick) {
-            onClick(e);
+          var key = e.key;
+
+          if (isKeyboardInteractionAllowed(role, key)) {
+            if (onClick) {
+              e.preventDefault();
+              onClick(e);
+            }
           }
         }
       } : {
@@ -11289,6 +11308,10 @@
         if (isDragActive) return /*#__PURE__*/React__namespace.createElement(DropzoneActive, {
           type: type
         });
+        var buttonAccessibilityProps = useAccessibilityProps({
+          onClick: open,
+          'aria-label': 'Drag your files here or click to select files'
+        });
         return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, type !== 'tight' && /*#__PURE__*/React__namespace.createElement(Icon, {
           name: "backup",
           size: 64,
@@ -11301,14 +11324,13 @@
           weight: "strong",
           className: "mr-2",
           appearance: disabled ? 'disabled' : 'default'
-        }, "Drag your files here or"), /*#__PURE__*/React__namespace.createElement("span", {
-          className: "cursor-pointer",
-          onClick: open
-        }, /*#__PURE__*/React__namespace.createElement(Text, {
+        }, "Drag your files here or"), /*#__PURE__*/React__namespace.createElement(Text, __assign({
+          tabIndex: disabled ? -1 : 0,
+          className: "ml-2 cursor-pointer",
           size: "large",
           weight: "strong",
           appearance: disabled ? 'disabled' : 'link'
-        }, "browse files")), /*#__PURE__*/React__namespace.createElement("input", __assign({}, getInputProps()))), formatLabel && /*#__PURE__*/React__namespace.createElement(Text, {
+        }, buttonAccessibilityProps), "browse files"), /*#__PURE__*/React__namespace.createElement("input", __assign({}, getInputProps()))), formatLabel && /*#__PURE__*/React__namespace.createElement(Text, {
           appearance: disabled ? 'disabled' : 'subtle'
         }, formatLabel), sizeLabel && /*#__PURE__*/React__namespace.createElement(Text, {
           appearance: disabled ? 'disabled' : 'subtle'
@@ -14769,7 +14791,7 @@
       vertical: false
     };
 
-    var version = "2.7.0-1";
+    var version = "2.7.0";
 
     exports.Avatar = Avatar;
     exports.AvatarGroup = AvatarGroup;