@ui5/webcomponents-fiori 1.1.2 → 1.2.2

package/dist/types/IllustrationMessageType.js

@@ -324,6 +324,66 @@ const IllustrationMessageTypes = {
 	 */
 	UploadCollection: "UploadCollection",
 	/**
+	* "TntChartArea" illustration type.
+	* @public
+	* @type {TntChartArea}
+	*/
+	TntChartArea: "TntChartArea",
+	/**
+	* "TntChartArea2" illustration type.
+	* @public
+	* @type {TntChartArea2}
+	*/
+	TntChartArea2: "TntChartArea2",
+	/**
+	* "TntChartBar" illustration type.
+	* @public
+	* @type {TntChartBar}
+	*/
+	TntChartBar: "TntChartBar",
+	/**
+	* "TntChartBPMNFlow" illustration type.
+	* @public
+	* @type {TntChartBPMNFlow}
+	*/
+	TntChartBPMNFlow: "TntChartBPMNFlow",
+	/**
+	* "TntChartBullet" illustration type.
+	* @public
+	* @type {TntChartBullet}
+	*/
+	TntChartBullet: "TntChartBullet",
+	/**
+	* "TntChartDoughnut" illustration type.
+	* @public
+	* @type {TntChartDoughnut}
+	*/
+	TntChartDoughnut: "TntChartDoughnut",
+	/**
+	* "TntChartFlow" illustration type.
+	* @public
+	* @type {TntChartFlow}
+	*/
+	TntChartFlow: "TntChartFlow",
+	/**
+	* "TntChartGantt" illustration type.
+	* @public
+	* @type {TntChartGantt}
+	*/
+	TntChartGantt: "TntChartGantt",
+	/**
+	* "TntChartOrg" illustration type.
+	* @public
+	* @type {TntChartOrg}
+	*/
+	TntChartOrg: "TntChartOrg",
+	/**
+	* "TntChartPie" illustration type.
+	* @public
+	* @type {TntChartPie}
+	*/
+	TntChartPie: "TntChartPie",
+	/**
 	* "TntCodePlaceholder" illustration type.
 	* @public
 	* @type {TntCodePlaceholder}
@@ -336,6 +396,12 @@ const IllustrationMessageTypes = {
 	*/
 	TntCompany: "TntCompany",
 	/**
+	* "TntComponents" illustration type.
+	* @public
+	* @type {TntComponents}
+	*/
+	TntComponents: "TntComponents",
+	/**
 	* "TntExternalLink" illustration type.
 	* @public
 	* @type {TntExternalLink}
@@ -390,6 +456,12 @@ const IllustrationMessageTypes = {
 	*/
 	TntRadar: "TntRadar",
 	/**
+	* "TntSecrets" illustration type.
+	* @public
+	* @type {TntSecrets}
+	*/
+	TntSecrets: "TntSecrets",
+	/**
 	* "TntServices" illustration type.
 	* @public
 	* @type {TntServices}
@@ -420,6 +492,30 @@ const IllustrationMessageTypes = {
 	*/
 	TntSuccessfulAuth: "TntSuccessfulAuth",
 	/**
+	* "TntSystems" illustration type.
+	* @public
+	* @type {TntSystems}
+	*/
+	TntSystems: "TntSystems",
+	/**
+	* "TntTeams" illustration type.
+	* @public
+	* @type {TntTeams}
+	*/
+	TntTeams: "TntTeams",
+	/**
+	* "TntTools" illustration type.
+	* @public
+	* @type {TntTools}
+	*/
+	TntTools: "TntTools",
+	/**
+	* "TntUnableToLoad" illustration type.
+	* @public
+	* @type {TntUnableToLoad}
+	*/
+	TntUnableToLoad: "TntUnableToLoad",
+	/**
 	* "TntUnlock" illustration type.
 	* @public
 	* @type {TntUnlock}
@@ -431,6 +527,12 @@ const IllustrationMessageTypes = {
 	* @type {TntUnsuccessfulAuth}
 	*/
 	TntUnsuccessfulAuth: "TntUnsuccessfulAuth",
+	/**
+	* "TntUser2" illustration type.
+	* @public
+	* @type {TntUser2}
+	*/
+	TntUser2: "TntUser2",
 
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-fiori",
-  "version": "1.1.2",
+  "version": "1.2.2",
   "description": "UI5 Web Components: webcomponents.fiori",
   "ui5": {
     "webComponentsPackage": true
@@ -21,6 +21,8 @@
     "./bundle.esm.js": "./bundle.esm.js",
     "./bundle.es5.js": "./bundle.es5.js",
     "./bundle.common.js": "./bundle.common.js",
+    "./bundle.scoped.esm.js": "./bundle.scoped.esm.js",
+    "./bundle.scoped.es5.js": "./bundle.scoped.es5.js",
     "./*": "./dist/*"
   },
   "scripts": {
@@ -40,15 +42,15 @@
     "directory": "packages/fiori"
   },
   "dependencies": {
-    "@ui5/webcomponents": "1.1.2",
-    "@ui5/webcomponents-base": "1.1.2",
-    "@ui5/webcomponents-icons": "1.1.2",
-    "@ui5/webcomponents-ie11": "1.1.2",
-    "@ui5/webcomponents-theming": "1.1.2",
+    "@ui5/webcomponents": "1.2.2",
+    "@ui5/webcomponents-base": "1.2.2",
+    "@ui5/webcomponents-icons": "1.2.2",
+    "@ui5/webcomponents-ie11": "1.2.2",
+    "@ui5/webcomponents-theming": "1.2.2",
     "@zxing/library": "^0.18.3"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "1.1.2",
-    "chromedriver": "96.0.0"
+    "@ui5/webcomponents-tools": "1.2.2",
+    "chromedriver": "99.0.0"
   }
 }

package/src/Bar.js

@@ -39,7 +39,7 @@ const metadata = {
 
 		/**
 		 * Defines if the component middle area needs to be centered between start and end area
-		 * @type {Boolean}
+		 * @type {boolean}
 		 * @private
 		 */
 		_shrinked: {
@@ -60,7 +60,7 @@ const metadata = {
 		/**
 		 * Defines the content in the middle of the bar
 		 * @type {HTMLElement[]}
-		 * @slot
+		 * @slot middleContent
 		 * @public
 		 */
 		"default": {
@@ -125,6 +125,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.fiori.Bar
+ * @implements sap.ui.webcomponents.fiori.IBar
  * @extends UI5Element
  * @tagname ui5-bar
  * @public

package/src/BarcodeScannerDialog.js

@@ -56,7 +56,7 @@ const metadata = {
 		 * Fires when the scan is completed successfuuly.
 		 *
 		 * @event sap.ui.webcomponents.fiori.BarcodeScannerDialog#scan-success
-		 * @param {String} text the scan result as string
+		 * @param {string} text the scan result as string
 		 * @param {Object} rawBytes the scan result as a Uint8Array
 		 * @public
 		 */
@@ -71,7 +71,7 @@ const metadata = {
 		 * Fires when the scan fails with error.
 		 *
 		 * @event sap.ui.webcomponents.fiori.BarcodeScannerDialog#scan-error
-		 * @param {String} message the error message
+		 * @param {string} message the error message
 		 * @public
 		 */
 		 "scan-error": {

package/src/DynamicSideContent.js

@@ -202,10 +202,10 @@ const metadata = {
 		/**
 		 * Fires when the current breakpoint has been changed.
 		 * @event sap.ui.webcomponents.fiori.DynamicSideContent#layout-change
-		 * @param {String} currentBreakpoint the current breakpoint.
-		 * @param {String} previousBreakpoint the breakpoint that was active before change to current breakpoint.
-		 * @param {Boolean} mainContentVisible visibility of the main content.
-		 * @param {Boolean} sideContentVisible visibility of the side content.
+		 * @param {string} currentBreakpoint the current breakpoint.
+		 * @param {string} previousBreakpoint the breakpoint that was active before change to current breakpoint.
+		 * @param {boolean} mainContentVisible visibility of the main content.
+		 * @param {boolean} sideContentVisible visibility of the side content.
 		 * @public
 		 */
 		"layout-change": {
@@ -345,7 +345,6 @@ class DynamicSideContent extends UI5Element {
 
 	/**
 	 * Toggles visibility of main and side contents on S screen size (mobile device).
-	 * @type {String}
 	 * @public
 	 */
 	 toggleContents() {

package/src/FilterItem.js

@@ -14,7 +14,7 @@ const metadata = {
 		/**
 		 * Defines the text of the component.
 		 *
-		 * @type {String}
+		 * @type {string}
 		 * @defaultvalue ""
 		 * @public
 		 */
@@ -25,7 +25,7 @@ const metadata = {
 		/**
 		 * Defines the additional text of the component.
 		 *
-		 * @type {String}
+		 * @type {string}
 		 * @defaultvalue ""
 		 * @private
 		 */

package/src/FilterItemOption.js

@@ -10,7 +10,7 @@ const metadata = {
 		 * Defines the text of the component.
 		 *
 		 * @public
-		 * @type {String}
+		 * @type {string}
 		 * @defaultvalue ""
 		 */
 		text: {
@@ -21,7 +21,7 @@ const metadata = {
 		 * Defines whether the option is selected
 		 *
 		 * @public
-		 * @type {Boolean}
+		 * @type {boolean}
 		 * @defaultvalue false
 		 */
 		selected: {

package/src/FlexibleColumnLayout.hbs

@@ -1,6 +1,10 @@
-<div class="{{classes.root}}">
+<div 
+	class="{{classes.root}}" 
+	dir="{{effectiveDir}}"
+	>
 	<div
-		role="{{accStartColumnRole}}"
+		role="{{_accAttributes.columns.start.role}}"
+		aria-hidden="{{_accAttributes.columns.start.ariaHidden}}"
 		class="{{classes.columns.start}}"
 		aria-labelledby="{{_id}}-startColumnText"
 	>
@@ -13,7 +17,8 @@
 	</div>
 
 	<div
-		role="{{accMiddleColumnRole}}"
+		role="{{_accAttributes.columns.middle.role}}"
+		aria-hidden="{{_accAttributes.columns.middle.ariaHidden}}"
 		class="{{classes.columns.middle}}"
 		aria-labelledby="{{_id}}-midColumnText"
 	>
@@ -26,7 +31,8 @@
 	</div>
 
 	<div
-		role="{{accEndColumnRole}}"
+		role="{{_accAttributes.columns.end.role}}"
+		aria-hidden="{{_accAttributes.columns.end.ariaHidden}}"
 		class="{{classes.columns.end}}"
 		aria-labelledby="{{_id}}-endColumnText"
 	>
@@ -42,7 +48,7 @@
 		design="Transparent"
 		@click="{{startArrowClick}}"
 		style="{{styles.arrows.start}}"
-		title="{{accStartArrowText}}"
+		tooltip="{{accStartArrowText}}"
 	></ui5-button>
 {{/inline}}
 
@@ -54,6 +60,6 @@
 		icon="slim-arrow-left"
 		design="Transparent"
 		@click="{{endArrowClick}}"
-		title="{{accEndArrowText}}"
+		tooltip="{{accEndArrowText}}"
 	></ui5-button>
 {{/inline}}

package/src/FlexibleColumnLayout.js

@@ -705,15 +705,24 @@ class FlexibleColumnLayout extends UI5Element {
 	}
 
 	get accStartColumnRole() {
-		return this.accessibilityRoles.startColumnRole || "region";
+		if (this.startColumnVisible) {
+			return this.accessibilityRoles.startColumnRole || "region";
+		}
+		return undefined;
 	}
 
 	get accMiddleColumnRole() {
-		return this.accessibilityRoles.midColumnRole || "region";
+		if (this.midColumnVisible) {
+			return this.accessibilityRoles.midColumnRole || "region";
+		}
+		return undefined;
 	}
 
 	get accEndColumnRole() {
-		return this.accessibilityRoles.endColumnRole || "region";
+		if (this.endColumnVisible) {
+			return this.accessibilityRoles.endColumnRole || "region";
+		}
+		return undefined;
 	}
 
 	get accStartArrowContainerRole() {
@@ -728,6 +737,25 @@ class FlexibleColumnLayout extends UI5Element {
 		return this._layoutsConfiguration || getLayoutsByMedia();
 	}
 
+	get _accAttributes() {
+		return {
+			columns: {
+				start: {
+					role: this.accStartColumnRole,
+					ariaHidden: !this.startColumnVisible || undefined,
+				},
+				middle: {
+					role: this.accMiddleColumnRole,
+					ariaHidden: !this.midColumnVisible || undefined,
+				},
+				end: {
+					role: this.accEndColumnRole,
+					ariaHidden: !this.endColumnVisible || undefined,
+				},
+			},
+		};
+	}
+
 	get accStartArrowText() {
 		const customTexts = this.accessibilityTexts;
 

package/src/IllustratedMessage.js

@@ -200,6 +200,10 @@ const metadata = {
  * <b>Note:</b> By default the “BeforeSearch” illustration is loaded. To use other illustrations, make sure you import them in addition, for example:
  * <br>
  * <code>import "@ui5/webcomponents-fiori/dist/illustrations/NoData.js"</code>
+ * <br>
+ * <b>Note:</b> Illustrations starting with the “Tnt” prefix are part of another illustration set. For example to use the “TntSuccess” illustration, add the following import::
+ * <br>
+ * <code>import "@ui5/webcomponents-fiori/dist/illustrations/tnt/Success.js"</code>
  *
  * <h3>Structure</h3>
  * The IllustratedMessage consists of the following elements, which are displayed below each other in the following order:
@@ -280,8 +284,10 @@ class IllustratedMessage extends UI5Element {
 
 		if (illustrationData === ILLUSTRATION_NOT_FOUND) {
 			this.invalid = true;
+			const illustrationPath = this.name.includes("Tnt") ? `tnt/${this.name.replace("Tnt", "")}` : this.name;
+
 			/* eslint-disable-next-line */
-			return console.warn(`Required illustration is not registered. You can either import the illustration as a module in order to use it e.g. "@ui5/webcomponents-fiori/dist/illustrations/${this.name}.js".`);
+			return console.warn(`Required illustration is not registered. You can either import the illustration as a module in order to use it e.g. "@ui5/webcomponents-fiori/dist/illustrations/${illustrationPath}.js".`);
 		}
 
 		this.invalid = false;

package/src/Interfaces.js

@@ -1,3 +1,12 @@
+/**
+ * Interface for components that may be slotted inside <code>ui5-page</code> as header and footer.
+ *
+ * @name sap.ui.webcomponents.fiori.IBar
+ * @interface
+ * @public
+ */
+const IBar = "sap.ui.webcomponents.fiori.IBar";
+
 /**
  * Interface for components that may be slotted inside <code>ui5-view-settings-dialog</code> as filter items
  *
@@ -116,6 +125,7 @@ const IUploadCollectionItem = "sap.ui.webcomponents.fiori.IUploadCollectionItem"
 const IWizardStep = "sap.ui.webcomponents.fiori.IWizardStep";
 
 export {
+	IBar,
 	IFilterItem,
 	IFilterItemOption,
 	IMediaGalleryItem,

package/src/MediaGallery.js

@@ -460,7 +460,7 @@ class MediaGallery extends UI5Element {
 	}
 
 	_onThumbnailClick(event) {
-		const item = event.target.closest("ui5-media-gallery-item");
+		const item = event.target.closest("[ui5-media-gallery-item]");
 
 		if (item.disabled) {
 			return;

package/src/MediaGalleryItem.js

@@ -123,8 +123,8 @@ const metadata = {
 		/**
 		 * Defines the content of the component.
 		 *
-		 * @type {HTMLElement[]}
-		 * @slot
+		 * @type {HTMLElement}
+		 * @slot content
 		 * @public
 		 */
 		 "default": {
@@ -135,12 +135,11 @@ const metadata = {
 		/**
 		 * Defines the content of the thumbnail.
 		 *
-		 * @type {HTMLElement[]}
+		 * @type {HTMLElement}
 		 * @slot
 		 * @public
 		 */
 		 "thumbnail": {
-			propertyName: "thumbnail",
 			type: HTMLElement,
 		},
 	},
@@ -165,7 +164,7 @@ const metadata = {
  * </ul>
  *
  * <h3>ES6 Module Import</h3>
- * <code>import "@ui5/webcomponents-fiori/dist/MediaGalleryItem.js";</code>
+ * <code>import "@ui5/webcomponents-fiori/dist/MediaGalleryItem.js";</code> (comes with <code>ui5-media-gallery</code>)
  *
  * @constructor
  * @author SAP SE

package/src/NotificationListGroupItem.hbs

@@ -15,7 +15,7 @@
 			design="Transparent"
 			@click="{{_onBtnToggleClick}}"
 			class="ui5-nli-group-toggle-btn"
-			title="{{toggleBtnAccessibleName}}"
+			tooltip="{{toggleBtnAccessibleName}}"
 			aria-label="{{toggleBtnAccessibleName}}"
 		></ui5-button>
 
@@ -43,7 +43,7 @@
 					design="Transparent"
 					@click="{{_onBtnOverflowClick}}"
 					class="ui5-nli-overflow-btn"
-					title="{{overflowBtnAccessibleName}}"
+					tooltip="{{overflowBtnAccessibleName}}"
 					aria-label="{{overflowBtnAccessibleName}}"
 				></ui5-button>
 			{{else}}
@@ -67,7 +67,7 @@
 				icon="decline"
 				design="Transparent"
 				@click="{{_onBtnCloseClick}}"
-				title="{{closeBtnAccessibleName}}"
+				tooltip="{{closeBtnAccessibleName}}"
 				aria-label="{{closeBtnAccessibleName}}"
 				close-btn
 			></ui5-button>

package/src/NotificationListItem.hbs

@@ -17,7 +17,7 @@
 				design="Transparent"
 				@click="{{_onBtnOverflowClick}}"
 				class="ui5-nli-overflow-btn"
-				title="{{overflowBtnAccessibleName}}"
+				tooltip="{{overflowBtnAccessibleName}}"
 				aria-label="{{overflowBtnAccessibleName}}"
 			></ui5-button>
 		{{else}}
@@ -40,7 +40,7 @@
 				icon="decline"
 				design="Transparent"
 				@click="{{_onBtnCloseClick}}"
-				title="{{closeBtnAccessibleName}}"
+				tooltip="{{closeBtnAccessibleName}}"
 				aria-label="{{closeBtnAccessibleName}}"
 				close-btn
 			></ui5-button>

package/src/NotificationListItem.js

@@ -99,12 +99,11 @@ const metadata = {
 		/**
 		 * Defines the elements, displayed in the footer of the of the component.
 		 * @type {HTMLElement[]}
-		 * @slot footnotes
+		 * @slot
 		 * @public
 		 */
 		footnotes: {
 			type: HTMLElement,
-			propertyName: "footnotes",
 			individualSlots: true,
 		},
 

package/src/Page.js

@@ -91,7 +91,7 @@ const metadata = {
 		/**
 		 * Defines the header HTML Element.
 		 *
-		 * @type {HTMLElement[]}
+		 * @type {sap.ui.webcomponents.fiori.IBar}
 		 * @slot
 		 * @public
 		 */
@@ -114,7 +114,7 @@ const metadata = {
 		/**
 		 * Defines the footer HTML Element.
 		 *
-		 * @type {HTMLElement[]}
+		 * @type {sap.ui.webcomponents.fiori.IBar}
 		 * @slot
 		 * @public
 		 */

package/src/ShellBar.hbs

@@ -111,8 +111,8 @@
 					data-ui5-notifications-count="{{notificationsCount}}"
 					data-ui5-stable="toggle-search"
 					@click={{_handleSearchIconPress}}
-					title="{{_searchText}}"
-					._buttonAccInfo="{{accInfo.search}}"
+					tooltip="{{_searchText}}"
+					.accessibilityAttributes={{accInfo.search.accessibilityAttributes}}
 				></ui5-button>
 			{{/if}}
 
@@ -122,7 +122,7 @@
 					style="{{this.styles}}"
 					class="{{this.classes}}"
 					icon="{{this.icon}}"
-					title="{{this.title}}"
+					tooltip="{{this.title}}"
 					data-count="{{this.count}}"
 					data-ui5-notifications-count="{{../notificationsCount}}"
 					data-ui5-external-action-item-id="{{this.refItemid}}"
@@ -140,8 +140,7 @@
 				data-ui5-text="Notifications"
 				data-ui5-notifications-count="{{notificationsCount}}"
 				@click={{_handleNotificationsPress}}
-				title="{{_notificationsText}}"
-				._buttonAccInfo="{{accInfo.notifications}}"
+				tooltip="{{_notificationsText}}"
 				data-ui5-stable="notifications"
 			></ui5-button>
 			{{/if}}
@@ -152,8 +151,8 @@
 				class="{{classes.items.overflow}} ui5-shellbar-button ui5-shellbar-overflow-button-shown ui5-shellbar-overflow-button"
 				icon="sap-icon://overflow"
 				@click="{{_handleOverflowPress}}"
-				title="{{_overflowText}}"
-				._buttonAccInfo="{{accInfo.overflow}}"
+				tooltip="{{_overflowText}}"
+				.accessibilityAttributes={{accInfo.overflow.accessibilityAttributes}}
 				data-ui5-stable="overflow"
 			></ui5-button>
 
@@ -169,8 +168,7 @@
 				icon="sap-icon://grid"
 				data-ui5-text="Product Switch"
 				@click={{_handleProductSwitchPress}}
-				title="{{_productsText}}"
-				._buttonAccInfo="{{accInfo.products}}"
+				tooltip="{{_productsText}}"
 				data-ui5-stable="product-switch"
 			></ui5-button>
 			{{/if}}
@@ -184,8 +182,7 @@
 		id="{{this._id}}-item-3"
 		@click={{_handleProfilePress}}
 		style="{{styles.items.profile}}"
-		title="{{_profileText}}"
-		._buttonAccInfo="{{accInfo.profile}}"
+		tooltip="{{_profileText}}"
 		class="ui5-shellbar-button ui5-shellbar-image-button"
 		data-ui5-stable="profile"
 	>

package/src/ShellBar.js

@@ -10,6 +10,7 @@ import StandardListItem from "@ui5/webcomponents/dist/StandardListItem.js";
 import List from "@ui5/webcomponents/dist/List.js";
 import Popover from "@ui5/webcomponents/dist/Popover.js";
 import Button from "@ui5/webcomponents/dist/Button.js";
+import HasPopup from "@ui5/webcomponents/dist/types/HasPopup.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import "@ui5/webcomponents-icons/dist/search.js";
 import "@ui5/webcomponents-icons/dist/bell.js";
@@ -169,6 +170,7 @@ const metadata = {
 			type: String,
 			multiple: true,
 		},
+
 		_menuPopoverExpanded: {
 			type: Boolean,
 			noAttribute: true,
@@ -177,6 +179,7 @@ const metadata = {
 			type: Boolean,
 			noAttribute: true,
 		},
+
 		_fullWidthSearch: {
 			type: Boolean,
 			noAttribute: true,
@@ -298,7 +301,7 @@ const metadata = {
 
 		/**
 		 * Fired, when the product switch icon is activated.
-		 * <b>Note:</b> You can prevent closing of oveflow popover by calling <code>event.preventDefault()</code>.
+		 * <b>Note:</b> You can prevent closing of overflow popover by calling <code>event.preventDefault()</code>.
 		 *
 		 * @event sap.ui.webcomponents.fiori.ShellBar#product-switch-click
 		 * @allowPreventDefault
@@ -341,7 +344,7 @@ const metadata = {
 
 		/**
 		 * Fired, when a menu item is activated
-		 * <b>Note:</b> You can prevent closing of oveflow popover by calling <code>event.preventDefault()</code>.
+		 * <b>Note:</b> You can prevent closing of overflow popover by calling <code>event.preventDefault()</code>.
 		 *
 		 * @event sap.ui.webcomponents.fiori.ShellBar#menu-item-click
 		 * @param {HTMLElement} item DOM ref of the activated list item
@@ -1112,7 +1115,7 @@ class ShellBar extends UI5Element {
 	}
 
 	get menuBtnHasPopup() {
-		return this.hasMenuItems ? true : undefined;
+		return this.hasMenuItems ? HasPopup.Menu : undefined;
 	}
 
 	get menuBtnTabindex() {
@@ -1178,13 +1181,17 @@ class ShellBar extends UI5Element {
 				"title": this._productsText,
 			},
 			search: {
-				"ariaExpanded": this.showSearchField,
 				"title": this._searchText,
+				"accessibilityAttributes": {
+					expanded: this.showSearchField,
+				},
 			},
 			overflow: {
 				"title": this._overflowText,
-				"ariaHaspopup": true,
-				"ariaExpanded": this._overflowPopoverExpanded,
+				"accessibilityAttributes": {
+					hasPopup: HasPopup.Menu,
+					expanded: this._overflowPopoverExpanded,
+				},
 			},
 		};
 	}