@skyscanner/backpack-web 36.13.1 → 36.14.0

package/bpk-component-info-banner/src/BpkInfoBanner.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-info-banner{padding:.5rem 1rem;overflow:hidden;border-radius:.5rem;margin:0;font-size:.875rem;line-height:1.25rem;font-weight:400}.bpk-info-banner--style-default{background-color:#eff3f8}.bpk-info-banner--style-onContrast{background-color:#fff}.bpk-info-banner__header{display:flex;flex-direction:row;align-items:flex-start}.bpk-info-banner__header--expandable{cursor:pointer}.bpk-info-banner__icon,.bpk-info-banner__toggle{padding:.125rem 0}.bpk-info-banner__message{padding:.25rem .5rem;flex-grow:1}.bpk-info-banner__success-icon{fill:#0c838a}.bpk-info-banner__warning-icon{fill:#f55d42}.bpk-info-banner__error-icon{fill:#e70866}.bpk-info-banner__info-icon{fill:#626971}.bpk-info-banner__toggle-button{padding:0;border:0;background-color:rgba(0,0,0,0);cursor:pointer;appearance:none}.bpk-info-banner__expand-icon{fill:#626971}.bpk-info-banner__children-container{color:#161616;font-size:.875rem;line-height:1.25rem;font-weight:400}.bpk-info-banner__children-container--with-action{padding:.25rem 0 .25rem}.bpk-info-banner__children-container--no-action{padding:.25rem 0 .5rem}
+.bpk-info-banner{padding:.5rem 1rem;overflow:hidden;border-radius:.5rem;margin:0;font-size:.875rem;line-height:1.25rem;font-weight:400}.bpk-info-banner--style-default{background-color:#eff3f8}.bpk-info-banner--style-onContrast{background-color:#fff}.bpk-info-banner__header{display:flex;flex-direction:row;align-items:flex-start}.bpk-info-banner__header--expandable{width:100%;padding:0;border:none;background-color:rgba(0,0,0,0);text-align:start;cursor:pointer}.bpk-info-banner__icon,.bpk-info-banner__toggle{padding:.125rem 0}.bpk-info-banner__message{padding:.25rem .5rem;flex-grow:1}.bpk-info-banner__success-icon{fill:#0c838a}.bpk-info-banner__warning-icon{fill:#f55d42}.bpk-info-banner__error-icon{fill:#e70866}.bpk-info-banner__info-icon{fill:#626971}.bpk-info-banner__toggle-button{padding:0;border:0;background-color:rgba(0,0,0,0);cursor:pointer;appearance:none;fill:#626971}.bpk-info-banner__children-container{color:#161616;font-size:.875rem;line-height:1.25rem;font-weight:400}.bpk-info-banner__children-container--with-action{padding:.25rem 0 .25rem}.bpk-info-banner__children-container--no-action{padding:.25rem 0 .5rem}

package/bpk-component-info-banner/src/BpkInfoBannerInner.js

@@ -67,20 +67,13 @@ const getIconForType = (type, CustomIcon) => {
     children: /*#__PURE__*/_jsx(AlignedIcon, {})
   });
 };
-const ToggleButton = props => {
-  const classNames = getClassName('bpk-info-banner__expand-icon');
-  return /*#__PURE__*/_jsx("button", {
-    type: "button",
-    className: getClassName('bpk-info-banner__toggle-button'),
-    "aria-label": props.label,
-    "aria-expanded": props.expanded,
-    title: props.label,
-    children: /*#__PURE__*/_jsx("div", {
-      className: classNames,
-      children: props.expanded ? /*#__PURE__*/_jsx(CollapseIcon, {}) : /*#__PURE__*/_jsx(ExpandIcon, {})
-    })
-  });
-};
+const ToggleButton = props => /*#__PURE__*/_jsxs("div", {
+  className: getClassName('bpk-info-banner__toggle-button'),
+  children: [props.expanded ? /*#__PURE__*/_jsx(CollapseIcon, {}) : /*#__PURE__*/_jsx(ExpandIcon, {}), /*#__PURE__*/_jsx("span", {
+    className: "visually-hidden",
+    children: props.label
+  })]
+});
 const BpkInfoBannerInner = ({
   action = null,
   animateOnEnter = false,
@@ -113,26 +106,23 @@ const BpkInfoBannerInner = ({
   const isExpandable = configuration === CONFIGURATION.EXPANDABLE;
   const dismissable = configuration === CONFIGURATION.DISMISSABLE;
   const showChildren = isExpandable && expanded;
-  const sectionClassNames = getClassName('bpk-info-banner', `bpk-info-banner--${type}`, `bpk-info-banner--style-${style}`, bannerClassName && bannerClassName);
+  const classNames = getClassName('bpk-info-banner', `bpk-info-banner--${type}`, `bpk-info-banner--style-${style}`, bannerClassName && bannerClassName);
   const headerClassNames = getClassName('bpk-info-banner__header', isExpandable && 'bpk-info-banner__header--expandable');
   const childrenContainerClassName = action && isExpandable ? getClassName('bpk-info-banner__children-container--with-action') : getClassName('bpk-info-banner__children-container--no-action');
-
-  /* eslint-disable
-    jsx-a11y/no-static-element-interactions,
-    jsx-a11y/click-events-have-key-events,
-    */
-  // Disabling 'click-events-have-key-events and interactive-supports-focus' because header element is not focusable.
-  // ToggleButton is focusable and works for this.
+  const BannerHeader = isExpandable ? 'button' : 'div';
   return /*#__PURE__*/_jsx(AnimateAndFade, {
     animateOnEnter: animateOnEnter,
     animateOnLeave: dismissable || animateOnLeave,
     show: show,
     ...rest,
-    children: /*#__PURE__*/_jsxs("section", {
-      className: sectionClassNames,
-      role: "presentation",
-      children: [/*#__PURE__*/_jsxs("div", {
-        role: isExpandable ? 'button' : undefined,
+    children: /*#__PURE__*/_jsxs("div", {
+      className: classNames,
+      children: [/*#__PURE__*/_jsxs(BannerHeader, {
+        "aria-expanded": isExpandable ? expanded : undefined,
+        type: isExpandable ? 'button' : undefined
+        // BannerHeader is just <button> or <div>, so className should be allowed.
+        // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+        ,
         className: headerClassNames,
         onClick: onBannerExpandToggle,
         children: [/*#__PURE__*/_jsx("span", {
@@ -168,6 +158,5 @@ const BpkInfoBannerInner = ({
       })]
     })
   });
-  /* eslint-enable */
 };
 export default BpkInfoBannerInner;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "36.13.1",
+  "version": "36.14.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",