terra-alert - npm Package Compare versions

Comparing version 4.68.0 to 4.69.0

CHANGELOG.md

@@ -5,2 +5,11 @@ # Changelog
 
+## 4.69.0 - (June 14, 2023)
+
+* Added
+  * Added focus shift to the rendered notification banners content when notification is an alert and includes an action element
+
+* Changed
+  * Locked `uuid` to `8.2.0` to maintain IE compatibility.
+  * Updated the Dutch translation for `Terra.alert.success`.
+
 ## 4.68.0 - (May 9, 2023)
@@ -7,0 +16,0 @@

lib/Alert.js

@@ -25,3 +25,3 @@ "use strict";
 var _AlertModule = _interopRequireDefault(require("./Alert.module.scss"));
-var _excluded = ["action", "children", "customIcon", "customColorClass", "onDismiss", "intl", "role", "title", "type"];
+var _excluded = ["action", "children", "customIcon", "customColorClass", "disableAlertActionFocus", "onDismiss", "intl", "role", "title", "type"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -56,3 +56,3 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
   /**
-   * An action element to be added to the action section of the alert to give the user an easy way
+   * An action element to be added to the action section of the notification banner to give the user an easy way
    * to accomplish a task to resolve the notification.
@@ -62,11 +62,11 @@ */
   /**
-   * Child Nodes providing the message content for the alert. Can contain text and HTML.
+   * Child Nodes providing the message content for the notification banner. Can contain text and HTML.
    */
   children: _propTypes.default.node,
   /**
-   * The icon to be used for an alert of type custom. This will not be used for any other alert types.
+   * The icon to be used for a notification banner of type custom. This will not be used for any other notification types.
    */
   customIcon: _propTypes.default.element,
   /**
-   * Sets an author-defined class, to control the status bar color to be used for an alert of type custom.
+   * Sets an author-defined class, to control the status bar color to be used for a notification banner of type custom.
    *
@@ -78,4 +78,8 @@ * ![IMPORTANT](https://badgen.net/badge//IMPORTANT/CSS?icon=github)
   /**
-   * Callback function triggered when Dismiss button is clicked. The presence of this prop will cause the Dismiss button to be included on the alert.
+   * Disables the focus shift to Alert Notification Banners when action element is present.
    */
+  disableAlertActionFocus: _propTypes.default.bool,
+  /**
+   * Callback function triggered when Dismiss button is clicked. The presence of this prop will cause the Dismiss button to be included on the notification banner.
+   */
   onDismiss: _propTypes.default.func,
@@ -90,12 +94,12 @@ /**
   /**
-   * The ARIA role attribute of the alert. If not provided, alert type _alert_ will default to role `"alert"`,
-   * all other alert types will use the role of `"status"`.
+   * The ARIA role attribute of the notification banner. If not provided, notification banner of type _alert_ will default to role `"alert"`,
+   * all other notification banner types will use the role of `"status"`.
    */
   role: _propTypes.default.string,
   /**
-   * The title for the alert which will be bolded.
+   * The title for the notification banner which will be bolded.
    */
   title: _propTypes.default.string,
   /**
-   * The type of alert to be rendered. One of `alert`, `error`, `warning`, `unsatisfied`, `unverified`, `advisory`,
+   * The type of notification banner to be rendered. One of `alert`, `error`, `warning`, `unsatisfied`, `unverified`, `advisory`,
    * `info`, `success`, or `custom`.
@@ -107,2 +111,3 @@ */
   customColorClass: 'custom-default-color',
+  disableAlertActionFocus: false,
   type: AlertTypes.ALERT
@@ -155,2 +160,3 @@ };
     customColorClass = _ref.customColorClass,
+    disableAlertActionFocus = _ref.disableAlertActionFocus,
     onDismiss = _ref.onDismiss,
@@ -167,2 +173,3 @@ intl = _ref.intl,
     setIsNarrow = _useState2[1];
+  var alertBodyRef = (0, _react.useRef)(null);
   var defaultTitle = type === AlertTypes.CUSTOM ? '' : intl.formatMessage({
@@ -172,2 +179,3 @@ id: "Terra.alert.".concat(type)
   var defaultRole = type === AlertTypes.ALERT ? 'alert' : 'status';
+  var isAlert = role === 'alert' || defaultRole === 'alert';
   var alertClassNames = (0, _classnames.default)(cx('alert-base', type, {
@@ -216,2 +224,11 @@ narrow: isNarrow
   }, title || defaultTitle), children);
+  (0, _react.useEffect)(function () {
+    var _alertBodyRef$current;
+    // if the notification is an alert with an action element, focus the alert
+    if (isAlert && action && !disableAlertActionFocus && alertBodyRef !== null && alertBodyRef !== void 0 && (_alertBodyRef$current = alertBodyRef.current) !== null && _alertBodyRef$current !== void 0 && _alertBodyRef$current.focus) {
+      alertBodyRef.current.focus();
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
   return /*#__PURE__*/_react.default.createElement(_terraResponsiveElement.default, {
@@ -229,3 +246,5 @@ onChange: function onChange(value) {
   }), /*#__PURE__*/_react.default.createElement("div", {
-    className: bodyClassNameForParent
+    className: bodyClassNameForParent,
+    ref: alertBodyRef,
+    tabIndex: "-1"
   }, getAlertIcon(type, customIcon), alertMessageContent), actionsSection));
@@ -232,0 +251,0 @@ };

package.json

 {
   "name": "terra-alert",
   "main": "lib/Alert.js",
-  "version": "4.68.0",
+  "version": "4.69.0",
   "description": "The Terra Alert component is a notification banner that can be rendered in your application when there is information that you want to bring to the user's attention. The Alert component supports a number of built-in notification types that render with pre-defined colors and icons that help the user understand the severity and meaning of the notification. A custom notification type is also supported that allows your application to customize an alert that may not fit into the pre-defined types.",
@@ -36,3 +36,3 @@ "repository": {
     "terra-theme-context": "^1.0.0",
-    "uuid": "^9.0.0"
+    "uuid": "8.2.0"
   },
@@ -52,3 +52,3 @@ "scripts": {
   },
-  "gitHead": "530ec2566113aae6bfe1ce27b6160a910d180bb7"
+  "gitHead": "0d0fe3c8865823913787166bee9047ef815ddc34"
 }

src/Alert.jsx

@@ -1,2 +0,2 @@
-import React, { useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
@@ -36,3 +36,3 @@ import ResponsiveElement from 'terra-responsive-element';
   /**
-   * An action element to be added to the action section of the alert to give the user an easy way
+   * An action element to be added to the action section of the notification banner to give the user an easy way
    * to accomplish a task to resolve the notification.
@@ -42,11 +42,11 @@ */
   /**
-   * Child Nodes providing the message content for the alert. Can contain text and HTML.
+   * Child Nodes providing the message content for the notification banner. Can contain text and HTML.
    */
   children: PropTypes.node,
   /**
-   * The icon to be used for an alert of type custom. This will not be used for any other alert types.
+   * The icon to be used for a notification banner of type custom. This will not be used for any other notification types.
    */
   customIcon: PropTypes.element,
   /**
-   * Sets an author-defined class, to control the status bar color to be used for an alert of type custom.
+   * Sets an author-defined class, to control the status bar color to be used for a notification banner of type custom.
    *
@@ -58,4 +58,8 @@ * ![IMPORTANT](https://badgen.net/badge//IMPORTANT/CSS?icon=github)
   /**
-   * Callback function triggered when Dismiss button is clicked. The presence of this prop will cause the Dismiss button to be included on the alert.
+   * Disables the focus shift to Alert Notification Banners when action element is present.
    */
+  disableAlertActionFocus: PropTypes.bool,
+  /**
+   * Callback function triggered when Dismiss button is clicked. The presence of this prop will cause the Dismiss button to be included on the notification banner.
+   */
   onDismiss: PropTypes.func,
@@ -68,12 +72,12 @@ /**
   /**
-   * The ARIA role attribute of the alert. If not provided, alert type _alert_ will default to role `"alert"`,
-   * all other alert types will use the role of `"status"`.
+   * The ARIA role attribute of the notification banner. If not provided, notification banner of type _alert_ will default to role `"alert"`,
+   * all other notification banner types will use the role of `"status"`.
    */
   role: PropTypes.string,
   /**
-   * The title for the alert which will be bolded.
+   * The title for the notification banner which will be bolded.
    */
   title: PropTypes.string,
   /**
-   * The type of alert to be rendered. One of `alert`, `error`, `warning`, `unsatisfied`, `unverified`, `advisory`,
+   * The type of notification banner to be rendered. One of `alert`, `error`, `warning`, `unsatisfied`, `unverified`, `advisory`,
    * `info`, `success`, or `custom`.
@@ -96,2 +100,3 @@ */
   customColorClass: 'custom-default-color',
+  disableAlertActionFocus: false,
   type: AlertTypes.ALERT,
@@ -130,2 +135,3 @@ };
   customColorClass,
+  disableAlertActionFocus,
   onDismiss,
@@ -140,5 +146,7 @@ intl,
   const [isNarrow, setIsNarrow] = useState();
+  const alertBodyRef = useRef(null);
 
   const defaultTitle = type === AlertTypes.CUSTOM ? '' : intl.formatMessage({ id: `Terra.alert.${type}` });
   const defaultRole = type === AlertTypes.ALERT ? 'alert' : 'status';
+  const isAlert = role === 'alert' || defaultRole === 'alert';
   const alertClassNames = classNames(
@@ -181,3 +189,5 @@ cx(
   if (onDismiss || action) {
-    const actionsClassName = cx('actions', { 'actions-custom': type === AlertTypes.CUSTOM });
+    const actionsClassName = cx('actions', {
+      'actions-custom': type === AlertTypes.CUSTOM,
+    });
     actionsSection = (
@@ -205,2 +215,11 @@ <div className={actionsClassName}>
 
+  useEffect(() => {
+    // if the notification is an alert with an action element, focus the alert
+    if (isAlert && action && !disableAlertActionFocus && alertBodyRef?.current?.focus) {
+      alertBodyRef.current.focus();
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   return (
@@ -215,4 +234,8 @@ <ResponsiveElement
     >
-      <div role={role || defaultRole} {...customProps} className={alertClassNames}>
-        <div className={bodyClassNameForParent}>
+      <div
+        role={role || defaultRole}
+        {...customProps}
+        className={alertClassNames}
+      >
+        <div className={bodyClassNameForParent} ref={alertBodyRef} tabIndex="-1">
           {getAlertIcon(type, customIcon)}
@@ -219,0 +242,0 @@ {alertMessageContent}

tests/jest/Alert.test.jsx

@@ -15,4 +15,3 @@ import React from 'react';
 
-const mockUUID = '00000000-0000-0000-0000-000000000000';
-jest.mock('uuid', () => ({ v4: () => mockUUID }));
+jest.mock('uuid', () => ({ v4: () => '00000000-0000-0000-0000-000000000000' }));
 
@@ -22,8 +21,26 @@ describe('Alert with no props', () => {
     const wrapper = mountWithIntl(<Alert />);
+
+    const alert = wrapper.find('Alert');
+    expect(alert.prop('customColorClass')).toEqual('custom-default-color');
+    expect(alert.prop('disableAlertActionFocus')).toEqual(false);
+    expect(alert.prop('type')).toEqual('alert');
     expect(wrapper).toMatchSnapshot();
   });
+
+  it('should render a default notification banner with default props', () => {
+    const wrapper = shallowWithIntl(<Alert />).dive();
+
+    const alertDiv = wrapper.find('div.alert-base');
+    const alertContentDiv = wrapper.find('div.body');
+    expect(alertDiv.prop('className')).toEqual('alert-base alert wide');
+    expect(alertDiv.prop('role')).toEqual('alert');
+    expect(alertContentDiv.prop('tabIndex')).toEqual('-1');
+    expect(wrapper.find(IconAlert).length).toEqual(1);
+    expect(wrapper.find('.title').text()).toEqual('Terra.alert.alert');
+    expect(wrapper).toMatchSnapshot();
+  });
 });
 
-describe('Alert with role prop', () => {
-  it('should render a alert with provided role', () => {
+describe('Alert with props', () => {
+  it('should render an alert with provided role', () => {
     const wrapper = shallowWithIntl(<Alert role="status" />).dive();
@@ -38,2 +55,10 @@
   });
+
+  it('should render disableAlertActionFocus when provided', () => {
+    const wrapper = mountWithIntl(<Alert disableAlertActionFocus />);
+
+    const alert = wrapper.find('Alert');
+    expect(alert.prop('disableAlertActionFocus')).toEqual(true);
+    expect(wrapper).toMatchSnapshot();
+  });
 });
@@ -241,3 +266,3 @@
       const alertContent = wrapper.find('.section');
-      expect(alertContent.prop('id')).toEqual(`alert-message-${mockUUID}`);
+      expect(alertContent.prop('id')).toEqual('alert-message-00000000-0000-0000-0000-000000000000');
     });
@@ -247,3 +272,3 @@
       const dismissButton = wrapper.find('Button');
-      expect(dismissButton.prop('aria-describedby')).toEqual(`alert-message-${mockUUID}`);
+      expect(dismissButton.prop('aria-describedby')).toEqual('alert-message-00000000-0000-0000-0000-000000000000');
     });
@@ -268,3 +293,3 @@ });
       const alertContent = wrapper.find('.section');
-      expect(alertContent.prop('id')).toEqual(`alert-message-${mockUUID}`);
+      expect(alertContent.prop('id')).toEqual('alert-message-00000000-0000-0000-0000-000000000000');
     });
@@ -274,3 +299,3 @@
       const alertTitle = wrapper.find('.title');
-      expect(alertTitle.prop('id')).toEqual(`alert-title-${mockUUID}`);
+      expect(alertTitle.prop('id')).toEqual('alert-title-00000000-0000-0000-0000-000000000000');
     });
@@ -280,3 +305,3 @@
       const dismissButton = wrapper.find('Button');
-      expect(dismissButton.prop('aria-describedby')).toEqual(`alert-title-${mockUUID}`);
+      expect(dismissButton.prop('aria-describedby')).toEqual('alert-title-00000000-0000-0000-0000-000000000000');
     });
@@ -299,3 +324,3 @@ });
       const alertContent = wrapper.find('.section');
-      expect(alertContent.prop('id')).toEqual(`alert-message-${mockUUID}`);
+      expect(alertContent.prop('id')).toEqual('alert-message-00000000-0000-0000-0000-000000000000');
     });
@@ -305,3 +330,3 @@
       const alertTitle = wrapper.find('.title');
-      expect(alertTitle.prop('id')).toEqual(`alert-title-${mockUUID}`);
+      expect(alertTitle.prop('id')).toEqual('alert-title-00000000-0000-0000-0000-000000000000');
     });
@@ -311,3 +336,3 @@
       const dismissButton = wrapper.find('Button');
-      expect(dismissButton.prop('aria-describedby')).toEqual(`alert-title-${mockUUID}`);
+      expect(dismissButton.prop('aria-describedby')).toEqual('alert-title-00000000-0000-0000-0000-000000000000');
     });
@@ -336,3 +361,3 @@ });
       const alertContent = wrapper.find('.section');
-      expect(alertContent.prop('id')).toEqual(`alert-message-${mockUUID}`);
+      expect(alertContent.prop('id')).toEqual('alert-message-00000000-0000-0000-0000-000000000000');
     });
@@ -342,3 +367,3 @@
       const alertTitle = wrapper.find('.title');
-      expect(alertTitle.prop('id')).toEqual(`alert-title-${mockUUID}`);
+      expect(alertTitle.prop('id')).toEqual('alert-title-00000000-0000-0000-0000-000000000000');
     });
@@ -348,3 +373,3 @@
       const dismissButton = wrapper.find('Button');
-      expect(dismissButton.prop('aria-describedby')).toEqual(`alert-title-${mockUUID}`);
+      expect(dismissButton.prop('aria-describedby')).toEqual('alert-title-00000000-0000-0000-0000-000000000000');
     });
@@ -351,0 +376,0 @@ });

tests/wdio/alert-spec.js

@@ -64,2 +64,12 @@ Terra.describeViewports('Alert', ['tiny', 'large'], () => {
 
+  describe('Critical alert notification banner', () => {
+    it('alert content is focused when rendered with an action element', () => {
+      browser.url('/raw/tests/cerner-terra-core-docs/alert/custom-prop-alert');
+
+      browser.keys(['Tab', 'Tab', 'Tab', 'Tab', 'Enter']);
+
+      Terra.validates.element('alert focused');
+    });
+  });
+
   describe('Alert Long Text', () => {
@@ -66,0 +76,0 @@ it('wraps naturally at high magnification', () => {

translations/nl-BE.json

@@ -10,3 +10,3 @@ {
   "Terra.alert.unverified": "Externe records.",
-  "Terra.alert.success": "Succes."
+  "Terra.alert.success": "Geslaagd."
 }

translations/nl.json

@@ -10,3 +10,3 @@ {
   "Terra.alert.unverified": "Externe records.",
-  "Terra.alert.success": "Succes."
+  "Terra.alert.success": "Geslaagd."
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

98297

increased by5.14%

Lines of code

1036

increased by6.8%

Dependency changes

• + Addeduuid@8.2.0(transitive)

• - Removeduuid@9.0.1(transitive)

• Updateduuid@8.2.0