merge master branch

SAP · Jul 15, 2021 · 218532e · 218532e
2 parents b43ada9 + 99a25be
commit 218532e
Show file tree

Hide file tree

Showing 44 changed files with 892 additions and 108 deletions.
diff --git a/packages/base/hash.txt b/packages/base/hash.txt
@@ -1 +1 @@
-FybN/lEhYLReway6H/ghxYHRVLA=
+fwIH67OLD+hDOagFf4EY7oyPVEs=
diff --git a/packages/base/src/Keys.js b/packages/base/src/Keys.js
@@ -131,6 +131,10 @@ const isUpShift = event => (event.key ? (event.key === "ArrowUp" || event.key ==
 
 const isDownShift = event => (event.key ? (event.key === "ArrowDown" || event.key === "Down") : event.keyCode === KeyCodes.ARROW_DOWN) && checkModifierKeys(event, false, false, true);
 
+const isLeftShift = event => (event.key ? (event.key === "ArrowLeft" || event.key === "Left") : event.keyCode === KeyCodes.ARROW_LEFT) && checkModifierKeys(event, false, false, true);
+
+const isRightShift = event => (event.key ? (event.key === "ArrowRight" || event.key === "Right") : event.keyCode === KeyCodes.ARROW_RIGHT) && checkModifierKeys(event, false, false, true);
+
 const isUpShiftCtrl = event => (event.key ? (event.key === "ArrowUp" || event.key === "Up") : event.keyCode === KeyCodes.ARROW_UP) && checkModifierKeys(event, true, false, true);
 
 const isDownShiftCtrl = event => (event.key ? (event.key === "ArrowDown" || event.key === "Down") : event.keyCode === KeyCodes.ARROW_DOWN) && checkModifierKeys(event, true, false, true);
@@ -208,6 +212,8 @@ export {
 	isDownCtrl,
 	isUpShift,
 	isDownShift,
+	isLeftShift,
+	isRightShift,
 	isUpShiftCtrl,
 	isDownShiftCtrl,
 	isHome,

diff --git a/packages/fiori/src/NotificationListGroupItem.hbs b/packages/fiori/src/NotificationListGroupItem.hbs
@@ -3,7 +3,7 @@
 	@focusin="{{_onfocusin}}"
 	@focusout="{{_onfocusout}}"
 	@keydown="{{_onkeydown}}"
-	role="option"
+	role="listitem"
 	tabindex="{{_tabIndex}}"
 	dir="{{effectiveDir}}"
 	aria-expanded="{{ariaExpanded}}"
@@ -77,7 +77,7 @@
 		<span id="{{_id}}-invisibleText" class="ui5-hidden-text">{{accInvisibleText}}</span>
 	</div>
 
-	<ui5-list class="ui5-nli-group-items">
+	<ui5-list class="ui5-nli-group-items" accessible-role="list">
 		<slot></slot>
 	</ui5-list>
 

diff --git a/packages/fiori/src/NotificationListItem.hbs b/packages/fiori/src/NotificationListItem.hbs
@@ -5,7 +5,7 @@
 	@keydown="{{_onkeydown}}"
 	@keyup="{{_onkeyup}}"
 	@click="{{_onclick}}"
-	role="option"
+	role="listitem"
 	tabindex="{{_tabIndex}}"
 	dir="{{effectiveDir}}"
 	aria-labelledby="{{ariaLabelledBy}}"

diff --git a/packages/fiori/test/pages/NotificationListGroupItem.html b/packages/fiori/test/pages/NotificationListGroupItem.html
@@ -48,7 +48,7 @@ <h3>Events on ui5-list level</h3>
 		<li>itemToggle</li>
 	</ul>
 
-	<ui5-list id="notificationList" header-text="Notifications grouped">
+	<ui5-list id="notificationList" header-text="Notifications grouped" accessible-role="list">
 		<ui5-li-notification-group
 			show-close
 			show-counter
@@ -209,7 +209,7 @@ <h3>Events on ui5-list level</h3>
 	<ui5-toast id="wcToastBS" duration="2000"></ui5-toast>
 
 	<ui5-popover id="notificationsPopover" style="max-width: 400px" placement-type="Bottom" horizontal-align="Right">
-		<ui5-list id="notificationListTop" header-text="Notifications heading and content 'truncates'">
+		<ui5-list id="notificationListTop" header-text="Notifications heading and content 'truncates'" accessible-role="list">
 			<ui5-li-notification-group
 				show-close
 				show-counter

diff --git a/packages/fiori/test/pages/NotificationListItem.html b/packages/fiori/test/pages/NotificationListItem.html
@@ -49,7 +49,7 @@ <h3>Events on ui5-list level</h3>
 		<li>itemClose</li>
 	</ul>
 
-	<ui5-list id="notificationList" header-text="Notifications heading and content 'truncates'">
+	<ui5-list id="notificationList" header-text="Notifications heading and content 'truncates'" accessible-role="list">
 
 		<ui5-li-notification
 			busy
@@ -119,7 +119,7 @@ <h3>Events on ui5-list level</h3>
 
 	<br><br>
 
-	<ui5-list id="notificationList2" header-text="Notifications heading and content 'wraps'">
+	<ui5-list id="notificationList2" header-text="Notifications heading and content 'wraps'" accessible-role="list">
 
 		<ui5-li-notification
 			show-close
@@ -172,7 +172,7 @@ <h3>Events on ui5-list level</h3>
 	<ui5-toast id="wcToastBS" duration="2000"></ui5-toast>
 
 	<ui5-popover id="notificationsPopover" style="max-width: 400px" placement-type="Bottom" horizontal-align="Right">
-		<ui5-list id="notificationListTop" header-text="Notifications heading and content 'truncates'">
+		<ui5-list id="notificationListTop" header-text="Notifications heading and content 'truncates'" accessible-role="list">
 			<ui5-li-notification
 				show-close
 				heading="New order (#2525) With a very long title - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc."

diff --git a/packages/fiori/test/samples/Bar2.sample.html b/packages/fiori/test/samples/Bar2.sample.html
@@ -0,0 +1,81 @@
+<header>
+	<div class="control-header">Bar</div>
+	<div class="component-heading-since">
+		<span><!--since_tag_marker--></span>
+	</div>
+</header>
+
+<div class="component-package">@ui5/webcomponents-fiori</div>
+
+<div class="control-tag">&lt;ui5-bar&gt;</div>
+
+<section>
+	<h3>Header Bar</h3>
+	<div class="snippet">
+		<ui5-bar design="Header">
+			<ui5-button icon="home" title="Go home" design="Transparent" slot="startContent"></ui5-button>
+			<ui5-label id="basic-label">Header Title</ui5-label>
+			<ui5-button icon="action-settings" title="Go to settings" slot="endContent"></ui5-button>
+		</ui5-bar>
+	</div>
+	<pre class="prettyprint lang-html"><xmp>
+<ui5-bar design="Header">
+	<ui5-button icon="home" title="Go home" design="Transparent" slot="startContent"></ui5-button>
+	<ui5-label>Header Title</ui5-label>
+	<ui5-button icon="action-settings" title="Go to settings" slot="endContent"></ui5-button>
+</ui5-bar>
+	</xmp></pre>
+</section>
+<section>
+	<h3>Subheader Bar</h3>
+	<div class="snippet">
+		<ui5-bar design="Subheader">
+			<ui5-button icon="home" title="Go home" slot="startContent"></ui5-button>
+			<ui5-label id="basic-label">Subheader Title</ui5-label>
+			<ui5-button icon="action-settings" title="Go to settings" slot="endContent"></ui5-button>
+		</ui5-bar>
+	</div>
+	<pre class="prettyprint lang-html"><xmp>
+<ui5-bar design="Subheader">
+	<ui5-button icon="home" title="Go home" slot="startContent"></ui5-button>
+	<ui5-label>Subheader Title</ui5-label>
+	<ui5-button icon="action-settings" title="Go to settings" slot="endContent"></ui5-button>
+</ui5-bar>
+	</xmp></pre>
+</section>
+<section>
+	<h3>Footer Bar</h3>
+	<div class="snippet">
+		<ui5-bar design="Footer">
+			<ui5-button design="Positive" slot="endContent">Agree</ui5-button>
+			<ui5-button design="Negative" slot="endContent">Decline</ui5-button>
+			<ui5-button design="Transparent" slot="endContent">Cancel</ui5-button>
+		</ui5-bar>
+	</div>
+	<pre class="prettyprint lang-html"><xmp>
+<ui5-bar design="Footer">
+	<ui5-button design="Positive" slot="endContent">Agree</ui5-button>
+	<ui5-button design="Negative" slot="endContent">Decline</ui5-button>
+	<ui5-button design="Transparent" slot="endContent">Cancel</ui5-button>
+</ui5-bar>
+	</xmp></pre>
+</section>
+<section>
+	<h3>FloatingFooter Bar</h3>
+	<div class="snippet">
+		<ui5-bar design="FloatingFooter">
+			<ui5-button design="Positive" slot="endContent">Agree</ui5-button>
+			<ui5-button design="Negative" slot="endContent">Decline</ui5-button>
+			<ui5-button design="Transparent" slot="endContent">Cancel</ui5-button>
+		</ui5-bar>
+	</div>
+	<pre class="prettyprint lang-html"><xmp>
+<ui5-bar design="FloatingFooter">
+	<ui5-button design="Positive" slot="endContent">Agree</ui5-button>
+	<ui5-button design="Negative" slot="endContent">Decline</ui5-button>
+	<ui5-button design="Transparent" slot="endContent">Cancel</ui5-button>
+</ui5-bar>
+	</xmp></pre>
+</section>
+
+<!-- JSDoc marker -->
diff --git a/packages/fiori/test/specs/NotificationList.spec.js b/packages/fiori/test/specs/NotificationList.spec.js
@@ -158,17 +158,7 @@ describe("Notification List Item Tests", () => {
 			"The ariaLabelledBy text is correct.");
 	});
 
-	it("tests List Item ACC invisible text", () => {
-		const EXPECTED_RESULT = "Notification unread High Priority";
-		const firstItem = $("#nli1");
-		const invisibleText = firstItem.shadow$(".ui5-hidden-text");
-
-		// assert
-		assert.strictEqual(invisibleText.getText().toLowerCase(), EXPECTED_RESULT.toLowerCase(),
-			"The invisible text is correct.");
-	});
-
-	it("tests List Group Item ACC ariaLabelledBy", () => {
+	it("tests List Item ACC ariaLabelledBy", () => {
 		const firstItem = $("#nli1");
 		const firstItemRoot = firstItem.shadow$(".ui5-nli-root");
 
@@ -182,4 +172,23 @@ describe("Notification List Item Tests", () => {
 		assert.strictEqual(firstItemRoot.getAttribute("aria-labelledby"), EXPECTED_ARIA_LABELLED_BY,
 			"The ariaLabelledBy text is correct.");
 	});
+
+	it("tests List Item ACC invisible text", () => {
+		const EXPECTED_RESULT = "Notification unread High Priority";
+		const firstItem = $("#nli1");
+		const invisibleText = firstItem.shadow$(".ui5-hidden-text");
+
+		// assert
+		assert.strictEqual(invisibleText.getText().toLowerCase(), EXPECTED_RESULT.toLowerCase(),
+			"The invisible text is correct.");
+	});
+
+	it("tests List (Group) Item ACC role", () => {
+		const firstItemRoot = $("#nli1").shadow$(".ui5-nli-root");
+		const firstGroupItemRoot = $("#nlgi1").shadow$(".ui5-nli-group-root");
+		const EXPECTED_ROLE = "listitem";
+
+		assert.strictEqual(firstGroupItemRoot.getAttribute("role"), EXPECTED_ROLE, "The role text is correct.");
+		assert.strictEqual(firstItemRoot.getAttribute("role"), EXPECTED_ROLE, "The role text is correct.");
+	});
 });
diff --git a/packages/main/src/Button.js b/packages/main/src/Button.js
@@ -39,6 +39,7 @@ const metadata = {
 		 * <li><code>Positive</code></li>
 		 * <li><code>Negative</code></li>
 		 * <li><code>Transparent</code></li>
+		 * <li><code>Attention</code></li>
 		 * </ul>
 		 *
 		 * @type {ButtonDesign}

diff --git a/packages/main/src/ComboBox.hbs b/packages/main/src/ComboBox.hbs
@@ -23,6 +23,7 @@
 		aria-describedby="{{valueStateTextId}}"
 		aria-label="{{ariaLabelText}}"
 		aria-required="{{required}}"
+		data-sap-focus-ref
 	/>
 
 	{{#if icon}}
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		FybN/lEhYLReway6H/ghxYHRVLA=
		fwIH67OLD+hDOagFf4EY7oyPVEs=