@pingux/astro 1.31.0-alpha.1 → 1.31.0-alpha.11

package/lib/cjs/components/Card/Card.stories.js

@@ -43,10 +43,37 @@ var Default = function Default(args) {
 exports.Default = Default;
 
 var CardRow = function CardRow() {
+  var sx = {
+    li: {
+      display: 'inline',
+      flexGrow: 1,
+      flexBasis: '0%'
+    },
+    card: {
+      display: 'block'
+    }
+  };
   return (0, _react2.jsx)(_Box["default"], {
     isRow: true,
-    gap: "md"
-  }, (0, _react2.jsx)(_Card["default"], null, "First"), (0, _react2.jsx)(_Card["default"], null, "Second"), (0, _react2.jsx)(_Card["default"], null, "Third"));
+    gap: "md",
+    as: "ul",
+    pl: "0px"
+  }, (0, _react2.jsx)(_Box["default"], {
+    as: "li",
+    sx: sx.li
+  }, (0, _react2.jsx)(_Card["default"], {
+    sx: sx.card
+  }, "First")), (0, _react2.jsx)(_Box["default"], {
+    as: "li",
+    sx: sx.li
+  }, (0, _react2.jsx)(_Card["default"], {
+    sx: sx.card
+  }, "Second")), (0, _react2.jsx)(_Box["default"], {
+    as: "li",
+    sx: sx.li
+  }, (0, _react2.jsx)(_Card["default"], {
+    sx: sx.card
+  }, "Third")));
 };
 
 exports.CardRow = CardRow;

package/lib/cjs/components/Chip/Chip.js

@@ -2,13 +2,25 @@
 
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 
-var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
 
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
 
-var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
 
-var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
 
 _Object$defineProperty(exports, "__esModule", {
   value: true
@@ -18,6 +30,8 @@ exports["default"] = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -36,6 +50,10 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
 
 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 = _filterInstanceProperty(symbols).call(symbols, 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 _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 /**
  * Chip component.
  * Built on top of the [Box from Theme-UI](https://theme-ui.com/components/box/) and uses the
@@ -47,7 +65,18 @@ var Chip = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
       textColor = props.textColor,
       textProps = props.textProps,
       label = props.label,
+      align = props.align,
       isUppercase = props.isUppercase;
+
+  var sx = _objectSpread({}, isUppercase && {
+    paddingBottom: '3px'
+  });
+
+  if (align) {
+    sx.position = 'absolute';
+    sx[align] = '15px';
+  }
+
   return (0, _react2.jsx)(_ChipContext.ChipContext.Provider, {
     value: {
       bg: bg
@@ -55,9 +84,7 @@ var Chip = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
   }, (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     isRow: true,
     variant: "boxes.chip",
-    sx: isUppercase && {
-      paddingBottom: '3px'
-    },
+    sx: sx,
     ref: ref
   }, props), (0, _react2.jsx)(_Text["default"], (0, _extends2["default"])({
     variant: "label",
@@ -83,7 +110,10 @@ Chip.propTypes = {
   textProps: _propTypes["default"].shape({}),
 
   /** When true, display chip label as uppercase. */
-  isUppercase: _propTypes["default"].bool
+  isUppercase: _propTypes["default"].bool,
+
+  /** Alignment of chip relative to parent container. */
+  align: _propTypes["default"].oneOf(['top', 'right', 'bottom', 'left'])
 };
 Chip.defaultProps = {
   textColor: 'white',

package/lib/cjs/components/Chip/Chip.test.js

@@ -54,4 +54,12 @@ test('renders Chip component with uppercase', function () {
     isUppercase: isUppercase
   });
   expect(_react2.screen.queryByText('uppercase')).toHaveStyleRule('text-transform', 'uppercase');
+});
+test('renders Chip component with custom alignment', function () {
+  var align = 'right';
+  getComponent({
+    align: align
+  });
+  expect(_react2.screen.getByTestId(testId)).toHaveStyleRule('position', 'absolute');
+  expect(_react2.screen.getByTestId(testId)).toHaveStyleRule('right', '15px');
 });

package/lib/cjs/components/DataTable/DataTable.test.js

@@ -994,7 +994,6 @@ describe('Sortable DataTable with useAsyncList', function () {
                                 var first = a[sortDescriptor.column];
                                 var second = b[sortDescriptor.column]; // eslint-disable-next-line radix
 
-                                // eslint-disable-next-line radix
                                 var cmp = ((0, _parseInt2["default"])(first) || first) < ((0, _parseInt2["default"])(second) || second) ? -1 : 1;
 
                                 if (sortDescriptor.direction === 'descending') {
@@ -1190,7 +1189,6 @@ describe('Sortable DataTable with useAsyncList', function () {
                                 var first = a[sortDescriptor.column];
                                 var second = b[sortDescriptor.column]; // eslint-disable-next-line radix
 
-                                // eslint-disable-next-line radix
                                 var cmp = ((0, _parseInt2["default"])(first) || first) < ((0, _parseInt2["default"])(second) || second) ? -1 : 1;
 
                                 if (sortDescriptor.direction === 'descending') {

package/lib/cjs/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.stories.js

@@ -26,7 +26,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports["default"] = exports.WithSections = exports.OrgLevel = exports.DefaultOpen = exports.Default = exports.ControlledMenu = void 0;
+exports["default"] = exports.WithSections = exports.RightAlignedChips = exports.OrgLevel = exports.DefaultOpen = exports.Default = exports.ControlledMenu = void 0;
 
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 
@@ -410,4 +410,86 @@ var ControlledMenu = function ControlledMenu() {
   });
 };
 
-exports.ControlledMenu = ControlledMenu;
+exports.ControlledMenu = ControlledMenu;
+
+var RightAlignedChips = function RightAlignedChips(args) {
+  var _useState13 = (0, _react.useState)({
+    name: 'Snail',
+    isSandbox: true
+  }),
+      _useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
+      selectedEnvironment = _useState14[0],
+      setSelectedEnvironment = _useState14[1];
+
+  var envNode = (0, _react2.jsx)(_index.Box, {
+    isRow: true
+  }, (0, _react2.jsx)(_index.Text, {
+    color: "inherit"
+  }, selectedEnvironment.name), selectedEnvironment.isSandbox ? (0, _react2.jsx)(_index.Chip, {
+    label: "SANDBOX",
+    variant: "boxes.environmentChip",
+    bg: "neutral.40"
+  }) : null);
+
+  var findEnvObj = function findEnvObj(envName) {
+    return (0, _find["default"])(defaultEnvironments).call(defaultEnvironments, function (_ref9) {
+      var name = _ref9.name;
+      return name === envName;
+    });
+  };
+
+  var handleSelectionChange = function handleSelectionChange(newEnvName) {
+    var envObj = findEnvObj(newEnvName);
+    setSelectedEnvironment(_objectSpread({}, envObj));
+  };
+
+  var items = [{
+    name: 'Default'
+  }, {
+    name: 'Kangaroo',
+    isSandbox: true
+  }, {
+    name: 'Snake',
+    isSandbox: true
+  }, {
+    name: 'Snail'
+  }, {
+    name: 'Slug',
+    isSandbox: true
+  }, {
+    name: 'Crow'
+  }, {
+    name: 'Dog'
+  }, {
+    name: 'Crab',
+    isSandbox: true
+  }, {
+    name: 'Fish',
+    isSandbox: true
+  }, {
+    name: 'Turtle',
+    isSandbox: true
+  }, {
+    name: 'Mouse'
+  }];
+  return (0, _react2.jsx)(_EnvironmentBreadcrumb["default"], (0, _extends2["default"])({}, args, {
+    items: items,
+    name: "Globochem",
+    selectedItem: envNode,
+    onSelectionChange: handleSelectionChange
+  }), function (_ref10) {
+    var name = _ref10.name,
+        isSandbox = _ref10.isSandbox;
+    return (0, _react2.jsx)(_index.Item, {
+      key: name,
+      textValue: name
+    }, name, isSandbox ? (0, _react2.jsx)(_index.Chip, {
+      label: "SANDBOX",
+      variant: "boxes.environmentChip",
+      bg: "neutral.40",
+      align: "right"
+    }) : null);
+  });
+};
+
+exports.RightAlignedChips = RightAlignedChips;

package/lib/cjs/components/ListView/ListView.stories.js

@@ -85,7 +85,8 @@ exports["default"] = _default;
 var items = [{
   key: 'Aardvark',
   name: 'Aardvark',
-  id: '1'
+  id: '1',
+  hasSeparator: false
 }, {
   key: 'Kangaroo',
   name: 'Kangaroo',

package/lib/cjs/components/ListViewItem/ListViewItem.js

@@ -49,6 +49,7 @@ var ListViewItem = function ListViewItem(props) {
       rowProps = _props$item$props.rowProps,
       _props$item$props$has = _props$item$props.hasSeparator,
       hasSeparator = _props$item$props$has === void 0 ? true : _props$item$props$has,
+      hasInsetSeparator = _props$item$props.hasInsetSeparator,
       className = props.className;
   var dataId = item.props['data-id'];
 
@@ -88,7 +89,8 @@ var ListViewItem = function ListViewItem(props) {
     isHovered: isSelectable && isHovered,
     isSelected: isSelected,
     isFocused: isDisabled ? false : isFocusVisible || isFocusVisibleWithin,
-    hasSeparator: hasSeparator
+    hasSeparator: hasSeparator,
+    hasInsetSeparator: hasInsetSeparator
   }),
       classNames = _useStatusClasses.classNames;
 
@@ -120,7 +122,8 @@ ListViewItem.propTypes = {
       'data-id': _propTypes["default"].string,
       listItemProps: _propTypes["default"].shape({}),
       rowProps: _propTypes["default"].shape({}),
-      hasSeparator: _propTypes["default"].bool
+      hasSeparator: _propTypes["default"].bool,
+      hasInsetSeparator: _propTypes["default"].bool
     })
   })
 };

package/lib/cjs/components/MenuItem/MenuItem.js

@@ -136,7 +136,8 @@ var MenuItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     className: classNames,
     ref: menuItemRef,
     variant: isSeparator ? 'menuItem.separator' : 'menuItem.item',
-    "data-id": dataId
+    "data-id": dataId,
+    "aria-disabled": isDisabled
   }, (0, _utils.mergeProps)(pressProps, hoverProps, focusProps, menuItemProps, others)), rendered);
 });
 MenuItem.displayName = 'MenuItem';

package/lib/cjs/components/OverlayPanel/OverlayPanel.stories.js

@@ -79,7 +79,8 @@ var Default = function Default(_ref) {
     // readers when an overlay is open.
     (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."), (0, _react2.jsx)("br", null), (0, _react2.jsx)(_index.Button, {
       ref: triggerRef,
-      onPress: state.open
+      onPress: state.open,
+      "aria-expanded": state.isOpen
     }, "Open Panel"), state.isOpen && (0, _react2.jsx)(_OverlayPanel["default"], (0, _extends2["default"])({
       isOpen: state.isOpen,
       state: state
@@ -88,7 +89,8 @@ var Default = function Default(_ref) {
     }), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Button, {
       onPress: function onPress() {
         onClose(state, triggerRef);
-      }
+      },
+      "aria-expanded": state.isOpen
     }, "Close Panel"), (0, _react2.jsx)(_index.Text, {
       pt: "md"
     }, "Children render here."))))
@@ -158,7 +160,8 @@ var InnerPanel = function InnerPanel(_ref2) {
       p: '12px'
     }
   }, (0, _react2.jsx)(_index.Button, {
-    onPress: closeOuterPanel
+    onPress: closeOuterPanel,
+    "aria-expanded": state.isOpen
   }, "Close Panel"), (0, _react2.jsx)(_index.Text, {
     pt: "md",
     mb: "24px"
@@ -180,13 +183,15 @@ var InnerPanel = function InnerPanel(_ref2) {
     onPress: toggleMessagesOpen
   }, "Toggle Messages"), (0, _react2.jsx)("br", null), (0, _react2.jsx)(_index.Button, {
     ref: innerTriggerRef,
-    onPress: innerState.open
+    onPress: innerState.open,
+    "aria-expanded": innerState.isOpen
   }, "Open Inner Panel"), inner)));
   return (// Application must be wrapped in an OverlayProvider so that it can be hidden from screen
     // readers when an overlay opens.
     (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Button, {
       ref: outerTriggerRef,
-      onPress: state.open
+      onPress: state.open,
+      "aria-expanded": state.isOpen
     }, "Open Panel"), outer), messagesOpen && (0, _react2.jsx)(_index.Messages, {
       sx: {
         zIndex: 11
@@ -210,7 +215,8 @@ var CustomWidth = function CustomWidth() {
     // readers when an overlay opens.
     (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."), (0, _react2.jsx)("br", null), (0, _react2.jsx)(_index.Button, {
       ref: triggerRef,
-      onPress: state.open
+      onPress: state.open,
+      "aria-expanded": state.isOpen
     }, "Open Panel"), state.isOpen && (0, _react2.jsx)(_OverlayPanel["default"], {
       isOpen: state.isOpen,
       state: state,
@@ -221,7 +227,8 @@ var CustomWidth = function CustomWidth() {
     }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Button, {
       onPress: function onPress() {
         onClose(state, triggerRef);
-      }
+      },
+      "aria-expanded": state.isOpen
     }, "Close Panel"), (0, _react2.jsx)(_index.Text, {
       pt: "md"
     }, "Children render here."))))

package/lib/cjs/components/RequirementsList/RequirementsList.js

@@ -98,18 +98,22 @@ var RequirementsList = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
 
   var buildRequirementsLine = function buildRequirementsLine(req) {
     return (0, _react2.jsx)(_Box["default"], {
+      role: "listitem",
       isRow: true,
       key: req.name,
       alignItems: "center",
-      width: "100%"
+      width: "100%",
+      as: "li"
     }, statusIconRender(req.status), (0, _react2.jsx)(_Text["default"], {
       variant: "bodyWeak"
     }, req.name));
   };
 
   return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
+    role: "list",
     p: "lg",
     gap: "md",
+    as: "ul",
     ref: ref
   }, others), (0, _map["default"])(requirements).call(requirements, function (req) {
     return buildRequirementsLine(req);

package/lib/cjs/components/RequirementsList/RequirementsList.test.js

@@ -63,7 +63,7 @@ test('base case requirements list', function () {
 
   var requirementsList = _react2.screen.getByTestId(testId);
 
-  expect(requirementsList).toBeInstanceOf(HTMLDivElement);
+  expect(requirementsList).toBeInstanceOf(HTMLUListElement);
   expect(requirementsList).toBeInTheDocument();
 });
 test('empty variables requirements list', function () {
@@ -73,7 +73,7 @@ test('empty variables requirements list', function () {
 
   var requirementsList = _react2.screen.getByTestId(testId);
 
-  expect(requirementsList).toBeInstanceOf(HTMLDivElement);
+  expect(requirementsList).toBeInstanceOf(HTMLUListElement);
   expect(requirementsList).toBeInTheDocument();
 });
 test('should render default status icon if such passed in props', function () {

package/lib/cjs/components/SearchField/SearchField.js

@@ -105,6 +105,14 @@ var SearchField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       fieldControlProps = _useField.fieldControlProps,
       fieldLabelProps = _useField.fieldLabelProps;
 
+  var handleKeyDownEvent = function handleKeyDownEvent(e) {
+    var key = e.key;
+
+    if (key === 'Enter' || key === ' ') {
+      state.setValue('');
+    }
+  };
+
   return (0, _react2.jsx)(_.Box, fieldContainerProps, label && (0, _react2.jsx)(_.Label, fieldLabelProps), (0, _react2.jsx)(_.Box, {
     variant: "forms.search.container"
   }, (0, _react2.jsx)(_.Input, (0, _extends2["default"])({
@@ -116,6 +124,8 @@ var SearchField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     variant: "forms.search.icon",
     size: 22
   }, iconProps)), !hasNoClearButton && state.value !== '' && (0, _react2.jsx)(_.IconButton, (0, _extends2["default"])({
+    tabIndex: 0,
+    onKeyDown: handleKeyDownEvent,
     sx: {
       position: 'absolute',
       top: 8,

package/lib/cjs/components/SearchField/SearchField.test.js

@@ -242,6 +242,33 @@ test('clear button should be present by default ', function () {
   });
   expect(_testWrapper.screen.getByRole('button')).toBeInTheDocument();
 });
+test('clear button should be keyboard accessible', function () {
+  getComponent();
+
+  var search = _testWrapper.screen.getByLabelText(testLabel);
+
+  _userEvent["default"].type(search, 'clear');
+
+  expect(search).toHaveValue('clear');
+
+  var clearButton = _testWrapper.screen.getByRole('button');
+
+  expect(clearButton).toHaveAttribute('tabindex', '0');
+  (0, _testWrapper.act)(function () {
+    clearButton.focus();
+  });
+  expect(clearButton).toHaveFocus();
+
+  _testWrapper.fireEvent.keyDown(clearButton, {
+    key: 'Enter'
+  });
+
+  _testWrapper.fireEvent.keyUp(clearButton, {
+    key: 'Enter'
+  });
+
+  expect(search).toHaveValue('');
+});
 test('clear button should not be present is hasNoClearButton=true ', function () {
   getComponent({
     value: 'test-value',

package/lib/cjs/components/TabPicker/TabPicker.js

@@ -229,6 +229,7 @@ var TabPicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     ref: menuRef
   }, (0, _map["default"])(items).call(items, function (tab) {
     return (0, _react2.jsx)(_collections.Item, {
+      role: tab.role,
       key: tab.key
     }, tab.name);
   })));

package/lib/cjs/components/Table/Table.stories.js

@@ -26,6 +26,10 @@ var _TableCell = _interopRequireDefault(require("../TableCell"));
 
 var _TableHead = _interopRequireDefault(require("../TableHead"));
 
+var _TableCaption = _interopRequireDefault(require("../TableCaption"));
+
+var _index = require("../../index");
+
 var _react2 = require("@emotion/react");
 
 var _default = {
@@ -33,6 +37,7 @@ var _default = {
   component: _Table["default"]
 };
 exports["default"] = _default;
+var caption = 'Populations of Countries';
 var headers = ['Country', 'Population', 'Continent'];
 var objects = [{
   country: 'USA',
@@ -53,33 +58,10 @@ var objects = [{
 }];
 
 var Default = function Default() {
-  // const headers = [
-  //   'Country', 'Population', 'Continent',
-  // ];
-  //
-  // const objects = [
-  //   {
-  //     country: 'USA',
-  //     population: '320,000,000',
-  //     continent: 'North America',
-  //   },
-  //   {
-  //     country: 'Canada',
-  //     population: '37,000,000',
-  //     continent: 'North America',
-  //   },
-  //   {
-  //     country: 'China',
-  //     population: '1,398,000,000',
-  //     continent: 'Asia',
-  //   },
-  //   {
-  //     country: 'France',
-  //     population: '67,000,000',
-  //     continent: 'Europe',
-  //   },
-  // ];
-  return (0, _react2.jsx)(_Table["default"], null, (0, _react2.jsx)(_TableHead["default"], null, (0, _react2.jsx)(_TableRow["default"], {
+  return (0, _react2.jsx)(_Table["default"], null, (0, _react2.jsx)(_TableCaption["default"], null, (0, _react2.jsx)(_index.Text, {
+    fontWeight: 3,
+    fontSize: "lg"
+  }, caption)), (0, _react2.jsx)(_TableHead["default"], null, (0, _react2.jsx)(_TableRow["default"], {
     key: "head"
   }, (0, _map["default"])(headers).call(headers, function (head) {
     return (0, _react2.jsx)(_TableCell["default"], {

package/lib/cjs/components/Table/Table.test.js

@@ -20,6 +20,10 @@ var _TableCell = _interopRequireDefault(require("../TableCell"));
 
 var _TableHead = _interopRequireDefault(require("../TableHead"));
 
+var _TableCaption = _interopRequireDefault(require("../TableCaption"));
+
+var _index = require("../../index");
+
 var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
 
 var _react3 = require("@emotion/react");
@@ -28,6 +32,7 @@ var testId = 'test-table';
 var defaultProps = {
   'data-testid': testId
 };
+var caption = 'Populations of Countries';
 var headers = ['Country', 'Population', 'Continent'];
 var objects = [{
   country: 'USA',
@@ -48,7 +53,10 @@ var objects = [{
 }];
 
 var getComponent = function getComponent() {
-  return (0, _react2.render)((0, _react3.jsx)(_Table["default"], defaultProps, (0, _react3.jsx)(_TableHead["default"], null, (0, _react3.jsx)(_TableRow["default"], {
+  return (0, _react2.render)((0, _react3.jsx)(_Table["default"], defaultProps, (0, _react3.jsx)(_TableCaption["default"], null, (0, _react3.jsx)(_index.Text, {
+    fontWeight: 3,
+    fontSize: "lg"
+  }, caption)), (0, _react3.jsx)(_TableHead["default"], null, (0, _react3.jsx)(_TableRow["default"], {
     key: "head"
   }, (0, _map["default"])(headers).call(headers, function (head) {
     return (0, _react3.jsx)(_TableCell["default"], {

package/lib/cjs/components/TableCaption/TableCaption.js

@@ -0,0 +1,43 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+var _react2 = require("@emotion/react");
+
+var _excluded = ["children"];
+
+/**
+ * Basic TableCaption component.
+ *
+ * Renders HTML `<caption>`
+ *
+ * Needs to be a child of the `<Table>` component. Accepts text as children.
+ *
+ */
+var TableCaption = function TableCaption(props) {
+  var children = props.children,
+      others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
+    variant: "table.tableCaption",
+    as: "caption"
+  }, others), children);
+};
+
+var _default = TableCaption;
+exports["default"] = _default;

package/lib/cjs/components/TableCaption/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+_Object$defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _TableCaption["default"];
+  }
+});
+
+var _TableCaption = _interopRequireDefault(require("./TableCaption"));

package/lib/cjs/components/Tabs/Tabs.stories.js

@@ -298,11 +298,13 @@ var WithList = function WithList() {
     list: [{
       key: 'tab1list',
       name: 'Tab 1 list',
-      children: 'Tab 1 from list'
+      children: 'Tab 1 from list',
+      role: 'listitem'
     }, {
       key: 'tab2list',
       name: 'Tab 2 list',
-      children: 'Tab 2 from list'
+      children: 'Tab 2 from list',
+      role: 'listitem'
     }]
   }]);
   return (0, _react2.jsx)(_Tabs["default"], {