terra-alert - npm Package Compare versions

Comparing version 4.75.0 to 4.76.0

CHANGELOG.md

		@@ -5,2 +5,7 @@ # Changelog

		## 4.76.0 - (August 18, 2023)

		* Changed
		* Updated `terra-alert` focus on the notification banners content when notification is an alert and includes an action element to improve screen reader experience.

		## 4.75.0 - (August 11, 2023)
		@@ -7,0 +12,0 @@

lib/Alert.js

		@@ -182,2 +182,3 @@ "use strict";
		});
		var focusContainerClassName = cx('focus-container');
		var alertId = (0, _uuid.v4)();
		@@ -237,6 +238,8 @@ var alertTitleId = "alert-title-".concat(alertId);
		}), /#__PURE__/_react.default.createElement("div", {
		className: bodyClassNameForParent,
		className: bodyClassNameForParent
		}, getAlertIcon(type, customIcon), alertMessageContent, /#__PURE__/_react.default.createElement("div", {
		className: focusContainerClassName,
		ref: alertBodyRef,
		tabIndex: "-1"
		}, getAlertIcon(type, customIcon), alertMessageContent), actionsSection));
		})), actionsSection));
		};
		@@ -243,0 +246,0 @@ Alert.propTypes = propTypes;

package.json

		{
		"name": "terra-alert",
		"main": "lib/Alert.js",
		"version": "4.75.0",
		"version": "4.76.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.",
		@@ -51,3 +51,3 @@ "repository": {
		},
		"gitHead": "40c1ccb1e04ea40a8109b0d7154bae240e933bac"
		"gitHead": "f835d737f6862fcc7953ca61840c2959b21e675c"
		}

src/Alert.jsx

		@@ -163,2 +163,4 @@ import React, { useEffect, useRef, useState } from 'react';

		const focusContainerClassName = cx('focus-container');

		const alertId = uuidv4();
		@@ -231,5 +233,6 @@ const alertTitleId = `alert-title-${alertId}`;
		>
		<div className={bodyClassNameForParent} ref={alertBodyRef} tabIndex="-1">
		<div className={bodyClassNameForParent}>
		{getAlertIcon(type, customIcon)}
		{alertMessageContent}
		<div className={focusContainerClassName} ref={alertBodyRef} tabIndex="-1" />
		</div>
		@@ -236,0 +239,0 @@ {actionsSection}

tests/jest/Alert.test.jsx

		@@ -32,6 +32,6 @@ import React from 'react';
		const alertDiv = wrapper.find('div.alert-base');
		const alertContentDiv = wrapper.find('div.body');
		const alertFocusDiv = wrapper.find('div.focus-container');
		expect(alertDiv.prop('className')).toEqual('alert-base alert wide');
		expect(alertDiv.prop('role')).toEqual('alert');
		expect(alertContentDiv.prop('tabIndex')).toEqual('-1');
		expect(alertFocusDiv.prop('tabIndex')).toEqual('-1');
		expect(wrapper.find(IconAlert).length).toEqual(1);
		@@ -38,0 +38,0 @@ expect(wrapper.find('.title').text()).toEqual('Terra.alert.alert');

lib/Alert.module.scss

Sorry, the diff of this file is not supported yet

src/Alert.module.scss

Sorry, the diff of this file is not supported yet

New alerts