@ui5/webcomponents 2.10.0 → 2.11.0-rc.1

package/src/BarTemplate.tsx

@@ -4,8 +4,8 @@ export default function BarTemplate(this: Bar) {
 	return (
 		<div
 			class="ui5-bar-root"
-			aria-label={this.accInfo.label}
-			role="toolbar"
+			aria-label={this.accInfo.role && this.accInfo.label}
+			role={this.accInfo.role}
 			part="bar"
 		>
 			<div class="ui5-bar-content-container ui5-bar-startcontent-container" part="startContent">

package/src/CalendarHeaderTemplate.tsx

@@ -53,6 +53,18 @@ export default function CalendarTemplate(this: Calendar) {
 						<span class="ui5-calheader-btn-sectext">{this._headerYearButtonTextSecType}</span>
 					}
 				</div>
+
+				<div
+					data-ui5-cal-header-btn-year-range
+					class="ui5-calheader-arrowbtn ui5-calheader-middlebtn ui5-calheader-yearrange-btn-disabled"
+					hidden={this._isHeaderYearRangeButtonHidden}
+					tabindex={-1}
+				>
+					<span>{this._headerYearRangeButtonText}</span>
+					{this.hasSecondaryCalendarType &&
+						<span class="ui5-calheader-btn-sectext">{this._headerYearRangeButtonTextSecType}</span>
+					}
+				</div>
 			</div>
 
 			<div

package/src/ColorPaletteItemTemplate.tsx

@@ -10,6 +10,7 @@ export default function ColorPaletteItemTemplate(this: ColorPaletteItem) {
 			tabindex={parseInt(this.forcedTabIndex)}
 			role="button"
 			aria-label={`${this.colorLabel} - ${this.index}: ${this.value}`}
+			aria-pressed={this.selected}
 			title={`${this.colorLabel} - ${this.index}: ${this.value}`}
 		></div>
 	);

package/src/MenuItemTemplate.tsx

@@ -46,7 +46,7 @@ function rightContent(this: MenuItem) {
 			</div>
 		);
 	case this.hasEndContent:
-		return <slot name="endContent"></slot>;
+		return <slot name="endContent" onKeyDown={this._endContentKeyDown}></slot>;
 	case !!this.additionalText:
 		return (
 			<span
@@ -123,8 +123,11 @@ function listItemPostContent(this: MenuItem) {
 						accessibleRole="Menu"
 						loading={this.loading}
 						loadingDelay={this.loadingDelay}
+						onMouseOver={this._itemMouseOver}
+						onKeyDown={this._itemKeyDown}
 						// handles event from slotted children
 						onui5-close-menu={this._close}
+						onui5-exit-end-content={this._navigateOutOfEndContent}
 					>
 						<slot></slot>
 					</List>

package/src/MenuTemplate.tsx

@@ -55,6 +55,7 @@ export default function MenuTemplate(this: Menu) {
 						onKeyDown={this._itemKeyDown}
 						// handles event from slotted children
 						onui5-close-menu={this._close}
+						onui5-exit-end-content={this._navigateOutOfEndContent}
 					>
 						<slot></slot>
 					</List>)

package/src/RangeSliderTemplate.tsx

@@ -37,7 +37,7 @@ export function progressBar(this: RangeSlider) {
 				aria-valuemax={this.max}
 				aria-valuenow={this._ariaValueNow}
 				aria-valuetext={`From ${this.startValue} to ${this.endValue}`}
-				aria-labelledby="ui5-slider-sliderDesc"
+				aria-label={this._ariaLabel}
 				aria-disabled={this._ariaDisabled}
 			></div>
 		</div>
@@ -60,7 +60,7 @@ export function handles(this: RangeSlider) {
 				aria-labelledby={this._ariaLabelledByStartHandleText}
 				aria-disabled={this._ariaDisabled}
 				aria-describedby={this._ariaDescribedByHandleText}
-				aria-keyshortcuts="F2"
+				aria-keyshortcuts={this._ariaKeyshortcuts}
 			>
 				<Icon name={directionArrows}
 					mode="Decorative"

package/src/SliderBaseTemplate.tsx

@@ -52,13 +52,6 @@ export default function SliderBaseTemplate(this: SliderBase, hooks?: {
 
 				{(hooks?.handles || handles).call(this)}
 			</div>
-
-			{this.accessibleName &&
-				<span id="ui5-slider-accName" class="ui5-hidden-text">{this.accessibleName}</span>
-			}
-
-			<span id="ui5-slider-sliderDesc" class="ui5-hidden-text">{this._ariaLabelledByText}</span>
-
 			{this.editableTooltip && <>
 				<span id="ui5-slider-InputDesc" class="ui5-hidden-text">{this._ariaDescribedByInputText}</span>
 				<span id="ui5-slider-InputLabel" class="ui5-hidden-text">{this._ariaLabelledByInputText}</span>

package/src/SliderTemplate.tsx

@@ -42,9 +42,9 @@ export function handles(this: Slider) {
 				aria-valuemin={this.min}
 				aria-valuemax={this.max}
 				aria-valuenow={this.value}
-				aria-labelledby={this._ariaLabelledByHandleText}
+				aria-label={this._ariaLabel}
 				aria-disabled={this._ariaDisabled}
-				aria-keyshortcuts="F2"
+				aria-keyshortcuts={this._ariaKeyshortcuts}
 				aria-describedby={this._ariaDescribedByHandleText}
 				data-sap-focus-ref
 				part="handle"

package/src/YearPickerTemplate.tsx

@@ -30,7 +30,7 @@ export default function YearPickerTemplate(this: YearPicker) {
 						</span>
 						{
 							year.yearInSecType &&
-							<span class="ui5-yp-year-sec-type">
+							<span class="ui5-yp-item-sec-type">
 								{year.yearInSecType}
 							</span>
 						}

package/src/i18n/messagebundle.properties

@@ -79,6 +79,12 @@ BUTTON_ARIA_TYPE_EMPHASIZED=Emphasized
 #XACT: ARIA announcement for the warning button
 BUTTON_ARIA_TYPE_ATTENTION=Warning
 
+#XACT: ARIA announcement for the Button Badge with value 1 - "{0} item"
+BUTTON_BADGE_ONE_ITEM={0} item
+
+#XACT: ARIA announcement for the Button Badge with value more than 1 - "{0} items"
+BUTTON_BADGE_MANY_ITEMS={0} items
+
 #XACT: Text for Today item in CalendarLegend
 CAL_LEGEND_TODAY_TEXT=Today