@carbon/ibm-products 2.41.1-canary.11 → 2.41.1-canary.13

package/es/components/Guidebanner/Guidebanner.js

@@ -14,6 +14,7 @@ import { Idea, CaretLeft, CaretRight, Close } from '@carbon/react/icons';
 import { Button, IconButton } from '@carbon/react';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';
+import uuidv4 from '../../global/js/utils/uuidv4.js';
 import { Carousel } from '../Carousel/Carousel.js';
 
 var _CaretLeft, _CaretRight, _Close;
@@ -76,8 +77,9 @@ var Guidebanner = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
       return !prevState;
     });
   };
+  var carouselContentId = "".concat(uuidv4(), "--carousel-content-id");
   return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
-    "aria-expanded": !isCollapsed,
+    "aria-owns": !isCollapsed ? carouselContentId : undefined,
     className: cx(blockClass, className, collapsible && "".concat(blockClass, "__collapsible"), isCollapsed && "".concat(blockClass, "__collapsible-collapsed"), withLeftGutter && "".concat(blockClass, "__with-left-gutter")),
     ref: ref
   }, getDevtoolsProps(componentName)), /*#__PURE__*/React__default.createElement(Idea, {
@@ -86,6 +88,7 @@ var Guidebanner = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   }), /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(blockClass, "__title")
   }, title), /*#__PURE__*/React__default.createElement(Carousel, {
+    id: carouselContentId,
     className: "".concat(blockClass, "__carousel")
     // These colors are to match the Carousel's faded edges
     // against the Guidebanner's gradient background.
@@ -108,7 +111,9 @@ var Guidebanner = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     size: "md",
     className: "".concat(blockClass, "__toggle-button"),
     onClick: handleClickToggle,
-    ref: toggleRef
+    ref: toggleRef,
+    "aria-controls": !isCollapsed ? carouselContentId : undefined,
+    "aria-expanded": !isCollapsed
   }, isCollapsed ? expandButtonLabel : collapseButtonLabel), showNavigation && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("span", {
     className: cx("".concat(blockClass, "__back-button"), [scrollPosition === 0 ? "".concat(blockClass, "__back-button--disabled") : null])
   }, /*#__PURE__*/React__default.createElement(IconButton, {

package/lib/components/Guidebanner/Guidebanner.js

@@ -18,6 +18,7 @@ var icons = require('@carbon/react/icons');
 var react = require('@carbon/react');
 var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
+var uuidv4 = require('../../global/js/utils/uuidv4.js');
 var Carousel = require('../Carousel/Carousel.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -85,8 +86,9 @@ exports.Guidebanner = /*#__PURE__*/React__default["default"].forwardRef(function
       return !prevState;
     });
   };
+  var carouselContentId = "".concat(uuidv4["default"](), "--carousel-content-id");
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
-    "aria-expanded": !isCollapsed,
+    "aria-owns": !isCollapsed ? carouselContentId : undefined,
     className: cx__default["default"](blockClass, className, collapsible && "".concat(blockClass, "__collapsible"), isCollapsed && "".concat(blockClass, "__collapsible-collapsed"), withLeftGutter && "".concat(blockClass, "__with-left-gutter")),
     ref: ref
   }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React__default["default"].createElement(icons.Idea, {
@@ -95,6 +97,7 @@ exports.Guidebanner = /*#__PURE__*/React__default["default"].forwardRef(function
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(blockClass, "__title")
   }, title), /*#__PURE__*/React__default["default"].createElement(Carousel.Carousel, {
+    id: carouselContentId,
     className: "".concat(blockClass, "__carousel")
     // These colors are to match the Carousel's faded edges
     // against the Guidebanner's gradient background.
@@ -117,7 +120,9 @@ exports.Guidebanner = /*#__PURE__*/React__default["default"].forwardRef(function
     size: "md",
     className: "".concat(blockClass, "__toggle-button"),
     onClick: handleClickToggle,
-    ref: toggleRef
+    ref: toggleRef,
+    "aria-controls": !isCollapsed ? carouselContentId : undefined,
+    "aria-expanded": !isCollapsed
   }, isCollapsed ? expandButtonLabel : collapseButtonLabel), showNavigation && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("span", {
     className: cx__default["default"]("".concat(blockClass, "__back-button"), [scrollPosition === 0 ? "".concat(blockClass, "__back-button--disabled") : null])
   }, /*#__PURE__*/React__default["default"].createElement(react.IconButton, {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.41.1-canary.11+b54cbad87",
+  "version": "2.41.1-canary.13+3b244e6e2",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -120,5 +120,5 @@
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
   },
-  "gitHead": "b54cbad876d63df0c280bcd0a843eee7199bf3f7"
+  "gitHead": "3b244e6e25880b04f15bfad0b81299b07725bd4f"
 }