@cloudflare/component-card 4.0.16 → 4.0.20

package/CHANGELOG.md

@@ -3,6 +3,44 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.0.20](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-card@4.0.19...@cloudflare/component-card@4.0.20) (2021-12-03)
+
+**Note:** Version bump only for package @cloudflare/component-card
+
+
+
+
+
+## [4.0.19](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-card@4.0.18...@cloudflare/component-card@4.0.19) (2021-11-25)
+
+**Note:** Version bump only for package @cloudflare/component-card
+
+
+
+
+
+## [4.0.18](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-card@4.0.17...@cloudflare/component-card@4.0.18) (2021-11-25)
+
+
+### Bug Fixes
+
+* **component-card:** A11Y-86 Fix missing package ([548b6d4](http://stash.cfops.it:7999/fe/stratus/commits/548b6d4))
+* **component-card:** A11Y-86 Replace H3 tag with Heading ([b3c2372](http://stash.cfops.it:7999/fe/stratus/commits/b3c2372))
+* **component-card:** A11Y-90 Fix package version ([b0dfc79](http://stash.cfops.it:7999/fe/stratus/commits/b0dfc79))
+* **component-page:** A11Y-86 Bug fix ([9ab1079](http://stash.cfops.it:7999/fe/stratus/commits/9ab1079))
+
+
+
+
+
+## [4.0.17](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-card@4.0.16...@cloudflare/component-card@4.0.17) (2021-11-23)
+
+**Note:** Version bump only for package @cloudflare/component-card
+
+
+
+
+
 ## [4.0.16](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-card@4.0.15...@cloudflare/component-card@4.0.16) (2021-11-23)
 
 **Note:** Version bump only for package @cloudflare/component-card

package/es/CardDrawers.js

@@ -62,7 +62,8 @@ class CardDrawers extends React.Component {
           drawerComponent = _ref.drawerComponent,
           onClick = _ref.onClick,
           href = _ref.href,
-          rest = _objectWithoutProperties(_ref, ["id", "name", "content", "drawerComponent", "onClick", "href"]);
+          ariaLabel = _ref.ariaLabel,
+          rest = _objectWithoutProperties(_ref, ["id", "name", "content", "drawerComponent", "onClick", "href", "ariaLabel"]);
 
       // The component used for the drawer can be overridden
       const Drawer = drawerComponent || CardDrawer;
@@ -82,7 +83,8 @@ class CardDrawers extends React.Component {
           isActive: isActive,
           onClick: () => this.handleLinkClick(drawerId),
           ariaControls: drawerId,
-          ariaExpanded: isActive
+          ariaExpanded: isActive,
+          ariaLabel: ariaLabel
         }, name) : /*#__PURE__*/React.createElement(CardToolbarLink, {
           id: triggerId,
           href: href

package/es/CardTitle.js

@@ -1,5 +1,6 @@
 import { createStyledComponent } from '@cloudflare/style-container';
+import { Heading } from '@cloudflare/component-page';
 export default createStyledComponent(() => ({
   fontWeight: 600,
   mb: 2
-}), 'h3');
+}), Heading);

package/es/CardToolbarDrawerTrigger.js

@@ -20,7 +20,8 @@ class CardToolbarDrawerTrigger extends React.Component {
           children = _this$props.children,
           isActive = _this$props.isActive,
           ariaControls = _this$props.ariaControls,
-          ariaExpanded = _this$props.ariaExpanded;
+          ariaExpanded = _this$props.ariaExpanded,
+          ariaLabel = _this$props.ariaLabel;
     return /*#__PURE__*/React.createElement(TextButton, {
       id: id,
       onClick: this.handleClick,
@@ -29,7 +30,8 @@ class CardToolbarDrawerTrigger extends React.Component {
       py: 2,
       fontSize: 3,
       "aria-controls": ariaControls,
-      "aria-expanded": ariaExpanded
+      "aria-expanded": ariaExpanded,
+      "aria-label": ariaLabel
     }, children, /*#__PURE__*/React.createElement(ArrowSwivel, {
       isActive: isActive,
       duration: 50
@@ -44,7 +46,8 @@ CardToolbarDrawerTrigger.propTypes = {
   id: PropTypes.string.isRequired,
   children: PropTypes.node,
   ariaControls: PropTypes.string.isRequired,
-  ariaExpanded: PropTypes.bool.isRequired
+  ariaExpanded: PropTypes.bool.isRequired,
+  ariaLabel: PropTypes.string
 };
 CardToolbarDrawerTrigger.defaultProps = {
   isActive: false

package/lib/CardDrawers.js

@@ -118,7 +118,8 @@ var CardDrawers = /*#__PURE__*/function (_React$Component) {
             drawerComponent = _ref2.drawerComponent,
             onClick = _ref2.onClick,
             href = _ref2.href,
-            rest = _objectWithoutProperties(_ref2, ["id", "name", "content", "drawerComponent", "onClick", "href"]);
+            ariaLabel = _ref2.ariaLabel,
+            rest = _objectWithoutProperties(_ref2, ["id", "name", "content", "drawerComponent", "onClick", "href", "ariaLabel"]);
 
         // The component used for the drawer can be overridden
         var Drawer = drawerComponent || _CardDrawer.default;
@@ -140,7 +141,8 @@ var CardDrawers = /*#__PURE__*/function (_React$Component) {
               return _this3.handleLinkClick(drawerId);
             },
             ariaControls: drawerId,
-            ariaExpanded: isActive
+            ariaExpanded: isActive,
+            ariaLabel: ariaLabel
           }, name) : /*#__PURE__*/_react.default.createElement(_CardToolbarLink.default, {
             id: triggerId,
             href: href

package/lib/CardTitle.js

@@ -7,11 +7,13 @@ exports.default = void 0;
 
 var _styleContainer = require("@cloudflare/style-container");
 
+var _componentPage = require("@cloudflare/component-page");
+
 var _default = (0, _styleContainer.createStyledComponent)(function () {
   return {
     fontWeight: 600,
     mb: 2
   };
-}, 'h3');
+}, _componentPage.Heading);
 
 exports.default = _default;

package/lib/CardToolbarDrawerTrigger.js

@@ -60,7 +60,8 @@ var CardToolbarDrawerTrigger = /*#__PURE__*/function (_React$Component) {
           children = _this$props.children,
           isActive = _this$props.isActive,
           ariaControls = _this$props.ariaControls,
-          ariaExpanded = _this$props.ariaExpanded;
+          ariaExpanded = _this$props.ariaExpanded,
+          ariaLabel = _this$props.ariaLabel;
       return /*#__PURE__*/_react.default.createElement(_componentButton.TextButton, {
         id: id,
         onClick: this.handleClick,
@@ -69,7 +70,8 @@ var CardToolbarDrawerTrigger = /*#__PURE__*/function (_React$Component) {
         py: 2,
         fontSize: 3,
         "aria-controls": ariaControls,
-        "aria-expanded": ariaExpanded
+        "aria-expanded": ariaExpanded,
+        "aria-label": ariaLabel
       }, children, /*#__PURE__*/_react.default.createElement(_componentArrowSwivel.ArrowSwivel, {
         isActive: isActive,
         duration: 50
@@ -86,7 +88,8 @@ CardToolbarDrawerTrigger.propTypes = {
   id: _propTypes.default.string.isRequired,
   children: _propTypes.default.node,
   ariaControls: _propTypes.default.string.isRequired,
-  ariaExpanded: _propTypes.default.bool.isRequired
+  ariaExpanded: _propTypes.default.bool.isRequired,
+  ariaLabel: _propTypes.default.string
 };
 CardToolbarDrawerTrigger.defaultProps = {
   isActive: false

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudflare/component-card",
   "description": "Cloudflare Card Component",
-  "version": "4.0.16",
+  "version": "4.0.20",
   "main": "lib/index.js",
   "module": "es/index.js",
   "author": "James Kyle <jkyle@cloudflare.com>",
@@ -11,10 +11,11 @@
     "access": "public"
   },
   "dependencies": {
-    "@cloudflare/component-arrow-swivel": "^2.4.93",
-    "@cloudflare/component-button": "^2.11.14",
-    "@cloudflare/component-link": "^4.0.15",
-    "@cloudflare/style-container": "^7.5.20",
+    "@cloudflare/component-arrow-swivel": "^2.4.94",
+    "@cloudflare/component-button": "^2.11.15",
+    "@cloudflare/component-link": "^4.0.16",
+    "@cloudflare/component-page": "^5.2.1",
+    "@cloudflare/style-container": "^7.5.21",
     "prop-types": "^15.6.0"
   },
   "peerDependencies": {
@@ -31,5 +32,5 @@
     "test-coverage": "stratus test --coverage",
     "test-watch": "stratus test --watch"
   },
-  "gitHead": "33e724b3b47f1a0afbbf27e0e868959b34e04945"
+  "gitHead": "ceaeb1a7b750bec5b0dfc6edbba94bf2ddac31bf"
 }

package/src/CardDrawers.js

@@ -66,6 +66,7 @@ class CardDrawers extends React.Component {
         drawerComponent,
         onClick,
         href,
+        ariaLabel,
         ...rest
       }) => {
         // The component used for the drawer can be overridden
@@ -93,6 +94,7 @@ class CardDrawers extends React.Component {
                 onClick={() => this.handleLinkClick(drawerId)}
                 ariaControls={drawerId}
                 ariaExpanded={isActive}
+                ariaLabel={ariaLabel}
               >
                 {name}
               </CardToolbarDrawerTrigger>

package/src/CardTitle.js

@@ -1,9 +1,10 @@
 import { createStyledComponent } from '@cloudflare/style-container';
+import { Heading } from '@cloudflare/component-page';
 
 export default createStyledComponent(
   () => ({
     fontWeight: 600,
     mb: 2
   }),
-  'h3'
+  Heading
 );

package/src/CardToolbarDrawerTrigger.js

@@ -15,7 +15,14 @@ class CardToolbarDrawerTrigger extends React.Component {
   }
 
   render() {
-    const { id, children, isActive, ariaControls, ariaExpanded } = this.props;
+    const {
+      id,
+      children,
+      isActive,
+      ariaControls,
+      ariaExpanded,
+      ariaLabel
+    } = this.props;
 
     return (
       <TextButton
@@ -27,6 +34,7 @@ class CardToolbarDrawerTrigger extends React.Component {
         fontSize={3}
         aria-controls={ariaControls}
         aria-expanded={ariaExpanded}
+        aria-label={ariaLabel}
       >
         {children}
         <ArrowSwivel isActive={isActive} duration={50} />
@@ -41,7 +49,8 @@ CardToolbarDrawerTrigger.propTypes = {
   id: PropTypes.string.isRequired,
   children: PropTypes.node,
   ariaControls: PropTypes.string.isRequired,
-  ariaExpanded: PropTypes.bool.isRequired
+  ariaExpanded: PropTypes.bool.isRequired,
+  ariaLabel: PropTypes.string
 };
 
 CardToolbarDrawerTrigger.defaultProps = {