fix(ui5-card): update ACC support (#1042)

Author: GerganaKremenska

packages/main/src/Card.hbs

@@ -2,17 +2,17 @@
 	class="{{classes.main}}"
 	dir="{{rtl}}"
 	role="region"
-	aria-labelledby="{{_id}}-heading"
-	aria-roledescription="{{ariaCardRoleDescription}}"
->
+	aria-labelledby="{{_id}}-desc {{_id}}-heading">
 	{{#if hasHeader}}
-		<header class="{{classes.header}}"
+		<div class="{{classes.header}}"
 			@click="{{_headerClick}}"
 			@keydown="{{_headerKeydown}}"
 			@keyup="{{_headerKeyup}}"
-			tabindex="{{tabindex}}"
-			role="group"
-			aria-labelledby="{{_id}}-heading {{_id}}-subtitle">
+			role="{{ariaHeaderRole}}"
+			aria-labelledby="{{_id}}-subtitle {{_id}}-status"
+			aria-level="{{ariaLevel}}"
+			aria-roledescription="{{ariaCardHeaderRoleDescription}}"
+			tabindex="0">
 
 			<div class="ui5-card-avatar" aria-label="{{ariaCardAvatarLabel}}">
 				<slot name="avatar"></slot>
@@ -27,11 +27,12 @@
 					<div id="{{_id}}-subtitle" class="ui5-card-subtitle ">{{subtitle}}</div>
 				{{/if}}
 			</div>
-			<span part="status" class="ui5-card-status">{{status}}</span>
-		</header>
+			<span id="{{_id}}-status" part="status" class="ui5-card-status">{{status}}</span>
+		</div>
 	{{/if}}
 
 	<section role="group" aria-label="{{ariaCardContentLabel}}">
 		<slot></slot>
 	</section>
+	<span id="{{_id}}-desc" class="ui5-hidden-text">{{ariaCardRoleDescription}}</span>
 </div>

packages/main/src/Card.js

@@ -6,7 +6,13 @@ import { getRTL } from "@ui5/webcomponents-base/dist/config/RTL.js";
 import CardTemplate from "./generated/templates/CardTemplate.lit.js";
 import Icon from "./Icon.js";
 
-import { ARIA_ROLEDESCRIPTION_CARD, AVATAR_TOOLTIP, ARIA_LABEL_CARD_CONTENT } from "./generated/i18n/i18n-defaults.js";
+import {
+	ARIA_ROLEDESCRIPTION_CARD,
+	AVATAR_TOOLTIP,
+	ARIA_LABEL_CARD_CONTENT,
+	ARIA_ROLEDESCRIPTION_CARD_HEADER,
+	ARIA_ROLEDESCRIPTION_INTERACTIVE_CARD_HEADER,
+} from "./generated/i18n/i18n-defaults.js";
 
 // Styles
 import cardCss from "./generated/themes/Card.css.js";
@@ -177,8 +183,12 @@ class Card extends UI5Element {
 		return !!this.avatar && !this.icon;
 	}
 
-	get tabindex() {
-		return this.headerInteractive ? "0" : undefined;
+	get ariaHeaderRole() {
+		return this.headerInteractive ? "button" : "heading";
+	}
+
+	get ariaLevel() {
+		return this.headerInteractive ? undefined : "3";
 	}
 
 	get hasHeader() {
@@ -193,6 +203,10 @@ class Card extends UI5Element {
 		return this.i18nBundle.getText(ARIA_ROLEDESCRIPTION_CARD);
 	}
 
+	get ariaCardHeaderRoleDescription() {
+		return this.headerInteractive ? this.i18nBundle.getText(ARIA_ROLEDESCRIPTION_INTERACTIVE_CARD_HEADER) : this.i18nBundle.getText(ARIA_ROLEDESCRIPTION_CARD_HEADER);
+	}
+
 	get ariaCardAvatarLabel() {
 		return this.i18nBundle.getText(AVATAR_TOOLTIP);
 	}

packages/main/src/i18n/messagebundle.properties

@@ -7,6 +7,12 @@ ARIA_LABEL_CARD_CONTENT=Card Content
 #XBUT: Card aria-roledescription text
 ARIA_ROLEDESCRIPTION_CARD=Card
 
+#XBUT: Card Header aria-roledescription text
+ARIA_ROLEDESCRIPTION_CARD_HEADER=Card Header
+
+#XBUT: Card Header aria-roledescription interactive text
+ARIA_ROLEDESCRIPTION_INTERACTIVE_CARD_HEADER=Interactive Card Header
+
 #XACT: ARIA announcement for the Avatar default tooltip
 AVATAR_TOOLTIP=Avatar
 
@@ -235,7 +241,7 @@ SWITCH_ON=On
 #XACT: ARIA announcement for the switch off
 SWITCH_OFF=Off
 
-#XACT: ACC next icon name in tab container 
+#XACT: ACC next icon name in tab container
 TABCONTAINER_NEXT_ICON_ACC_NAME=Next
 
 #XACT: ACC previous icon name in tab container
@@ -272,4 +278,4 @@ VALUE_STATE_ERROR=Invalid entry
 VALUE_STATE_WARNING=Warning issued
 
 #XTOL: text that is appended to the tooltips of input fields etc. which are marked to be in success state
-VALUE_STATE_SUCCESS=Entry successfully validated
+VALUE_STATE_SUCCESS=Entry successfully validated

packages/main/src/themes/Card.css

@@ -1,3 +1,5 @@
+@import "./InvisibleTextStyles.css";
+
 :host(:not([hidden])) {
 	display: inline-block;
 	width: 100%;
@@ -34,11 +36,8 @@
 	border-bottom: none;
 }
 
-.ui5-card-header:focus {
+.ui5-card-header:focus:before {
 	outline: none;
-}
-
-.ui5-card-header.ui5-card-header--interactive:focus:before {
 	content: "";
 	position: absolute;
 	border: var(--_ui5_card_header_focus_border);
@@ -80,7 +79,7 @@
 
 ::slotted(img) {
 	width: 100%;
-    height: 100%;
+	height: 100%;
 	border-radius: 50%;
 }