@sapudex/web-components 2.1.1 → 2.3.0

package/src/Badge.ts

@@ -9,7 +9,7 @@ import BadgeTemplate from "./generated/templates/BadgeTemplate.lit.js";
 
 // Styles
 import BadgeCss from "./generated/themes/Badge.css.js";
-import IconPlacement from "./types/IconPlacement.js";
+import UDExIconPlacement from "./types/IconPlacement.js";
 
 import {
   UDExNumberBadgeDesign, UDExSizeBadgeDesign, UDExTextBadgeDesign, UDExTypeBadgeDesign,
@@ -81,7 +81,7 @@ class UDExBadge extends UI5Element {
   * @public
   */
     @property()
-      iconPlacement: `${IconPlacement}` = IconPlacement.End;
+      iconPlacement: `${UDExIconPlacement}` = UDExIconPlacement.End;
   /**
    * Defines icon name
   *
@@ -100,11 +100,11 @@ class UDExBadge extends UI5Element {
     default!: Array<Node>;
 
   get startIcon(): boolean {
-    return !!this.icon && this.iconPlacement === IconPlacement.Start;
+    return !!this.icon && this.iconPlacement === UDExIconPlacement.Start;
   }
 
   get endIcon(): boolean {
-    return !!this.icon && this.iconPlacement === IconPlacement.End;
+    return !!this.icon && this.iconPlacement === UDExIconPlacement.End;
   }
 
   get textClasses(): string {

package/src/Breadcrumbs.hbs

@@ -3,19 +3,16 @@
 	aria-label="{{_accessibleNameText}}">
 	<ol @focusin="{{_onfocusin}}">
 		<li class="udex-breadcrumbs__arrow-wrapper ui5-breadcrumbs-dropdown-arrow-link-wrapper">
-			<button
+            <udex-link
                 id="udex-{{this._id}}-breadcrumbs__opener"
                 @click="{{_toggleDropdown}}"
                 class="udex-breadcrumbs__trigger {{_triggerClass}}"
-				accessible-role="button"
-				aria-label="{{_dropdownArrowAccessibleNameText}}"
-				aria-haspopup="true">
-                <ui5-icon
-                    name="slim-arrow-down"
-                    mode="Decorative"
-                    title="{{_dropdownArrowAccessibleNameText}}">
-                </ui5-icon>
-			</button>
+                accessible-role="button"
+                aria-label="{{_dropdownArrowAccessibleNameText}}"
+                icon="slim-arrow-down"
+                icon-placement="Start"
+                aria-haspopup="true">
+            </udex-link>
 		</li>
 		{{#each _linksData}}
             <li

package/src/Breadcrumbs.ts

@@ -122,6 +122,7 @@ class UDExBreadcrumbs extends UI5Element {
 
   _responsivePopover?: UDExDropdown;
   _itemNavigation?: ItemNavigation;
+  _shouldFocusFirstVisibleItem!: boolean;
 
   onBeforeRendering(): void {
     this._preprocessItems();
@@ -130,7 +131,13 @@ class UDExBreadcrumbs extends UI5Element {
   onAfterRendering(): void {
     this._responsivePopover = this._getResponsePopover();
     this._initItemNavigation();
+    this._dropdownArrowLink.forcedTabIndex = "0";
     this._handleOutsideClick();
+
+    if (this._shouldFocusFirstVisibleItem) {
+      this._getFocusableItems()[1].focus();
+      this._shouldFocusFirstVisibleItem = false;
+    }
   }
 
   _preprocessItems(): void {
@@ -236,6 +243,12 @@ class UDExBreadcrumbs extends UI5Element {
     const isLastItem = itemIndex === (this.items.length - 2).toString();
     const isFirstItem = itemIndex === "0";
 
+    if (isTabNext(e) && isLastItem) {
+      this._shouldFocusFirstVisibleItem = true;
+      this._toggleDropdown();
+      return;
+    }
+
     if ((isTabNext(e) && isLastItem) || (isTabPrevious(e) && isFirstItem) || isEscape(e)) {
       this._toggleDropdown();
     }
@@ -267,7 +280,7 @@ class UDExBreadcrumbs extends UI5Element {
    * Getter for the list of links corresponding to the abstract breadcrumb items
    */
   get _links(): Array<UDExLink> {
-    return Array.from(this.shadowRoot!.querySelectorAll<UDExLink>(".udex-breadcrumbs__link-wrapper [ui5-link]"));
+    return Array.from(this.shadowRoot!.querySelectorAll<UDExLink>(".udex-breadcrumbs__link-wrapper [udex-link]"));
   }
 
   /**

package/src/BreadcrumbsPopover.hbs

@@ -4,7 +4,9 @@
   class="udex-breadcrumbs__popover ui5-breadcrumbs-popover"
   placement="Bottom"
   horizontal-align="Start"
-  @keydown="{{_handleKeydown}}">
+  @keydown="{{_handleKeydown}}"
+  @close="{{_afterDropdownClose}}"
+  @open="{{_afterDropdownOpen}}">
   <div class="udex-breadcrumbs__popover-content">
     {{#each _dropdownItems}}
       {{#if this.icon}}

package/src/Button.ts

@@ -8,7 +8,8 @@ import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import {
   BUTTON_ARIA_ATTENTION, BUTTON_ARIA_DEFAULT, BUTTON_ARIA_EMPHASIZED, BUTTON_ARIA_TRANSPARENT, BUTTON_ARIA_TYPE_NEGATIVE, BUTTON_ARIA_TYPE_POSITIVE, BUTTON_ARIA_TYPE_PRIMARY, BUTTON_ARIA_TYPE_SECONDARY, BUTTON_ARIA_TYPE_TERTIARY, BUTTON_ARIA_TYPE_WARNING, TOGGLED,
 } from "./generated/i18n/i18n-defaults.js";
-import { UDExButtonDesign, UDExButtonSize } from "./types/Button.js";
+import UDExButtonSize from "./types/ButtonSize.js";
+import UDExButtonDesign from "./types/ButtonDesign.js";
 
 // Styles
 import ButtonCss from "./generated/themes/Button.css.js";
@@ -16,6 +17,16 @@ import ButtonCss from "./generated/themes/Button.css.js";
 /**
  * @class
  *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-button</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@sapudex/web-components/dist/Button.js";</code>
+ *
  * @constructor
  * @extends Button
  * @tagname udex-button
@@ -57,6 +68,15 @@ class UDExButton extends Button {
   /** @ts-expect-error */
     design: `${UDExButtonDesign}` = UDExButtonDesign.Primary;
 
+  /**
+   * Defines if button is in pseudo-disabled state.
+   *
+   * @default false
+   * @private
+   */
+  @property({ type: Boolean })
+    _ariaDisabled!: boolean;
+
   @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
 

package/src/Checkbox.ts

@@ -74,6 +74,10 @@ class UDExCheckbox extends CheckBox {
     ResizeHandler.register(this, this._handleResizeBound);
   }
 
+  onAfterRendering() {
+    this.shadowRoot?.querySelector(".ui5-checkbox-label")?.removeAttribute("required");
+  }
+
   onExitDOM(): void {
     ResizeHandler.deregister(this, this._handleResizeBound);
   }

package/src/ControlButton.ts

@@ -5,7 +5,8 @@ import Button from "@ui5/webcomponents/dist/Button.js";
 // Styles
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import ControlButtonCss from "./generated/themes/ControlButton.css.js";
-import { UDExButtonSize, UDExControlButtonDesign } from "./types/Button.js";
+import UDExButtonSize from "./types/ButtonSize.js";
+import UDExControlButtonDesign from "./types/ControlButtonDesign.js";
 
 /**
  * @class

package/src/CountrySelector.ts

@@ -267,7 +267,7 @@ class UDExCountrySelector extends UDExSearchableListBase {
 
   countryList: Country[] = CountryListDB;
   selectedCountry!: Country | undefined;
-  _trigger!: HTMLElement;
+  _trigger!: UDExTextField;
 
   _dropdown!: UDExDropdown;
   _search!: Search;
@@ -314,16 +314,18 @@ class UDExCountrySelector extends UDExSearchableListBase {
     this._trigger = this.getTrigger();
   }
 
-  getTrigger(): HTMLElement {
-    return this.shadowRoot!.querySelector(".udex-country-selector__dropdown")!;
+  getTrigger(): UDExTextField {
+    return this.shadowRoot!.querySelector<UDExTextField>("[udex-text-field]")!;
   }
 
   _dropdownClose() {
     this.fireDecoratorEvent("close");
+    this._trigger.iconActive = false;
   }
 
   _dropdownOpen() {
     this.fireDecoratorEvent("open");
+    this._trigger.iconActive = true;
   }
 
   _dropdownBeforeOpen() {

package/src/DatePicker.ts

@@ -28,13 +28,13 @@ export enum UDExDatePickerSelectionMode {
   Range = "Range",
 }
 
-type UDExDatePickerSelectionChangeEventDetail = {
+export type UDExDatePickerSelectionChangeEventDetail = {
   selectedValues: Array<string>;
   selectedDates: Array<number | undefined>;
   timestamp: number | undefined;
 };
 
-type UDExDatePickerValueStateChangeEventDetail = {
+export type UDExDatePickerValueStateChangeEventDetail = {
   valueState: `${UDExValueState}`,
   valid: boolean
 }
@@ -230,12 +230,13 @@ class UDExDatePicker extends DateComponentBase {
 
   _afterDropdownClose(): void {
     this._dropdownTrigger.active = false;
+    this._dropdownTrigger.iconActive = false;
     this._dropdownTrigger.shadowRoot?.querySelector("input")?.blur();
     this._tempValue = "";
   }
 
   _afterDropdownOpen(): void {
-    this._dropdownTrigger.active = true;
+    this._dropdownTrigger.iconActive = true;
   }
 
   _closeRespPopover(): void {

package/src/EventRibbon.ts

@@ -0,0 +1,143 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import type {
+  UDExEventRibbonColorSheme, UDExEventRibbonLink, UDExEventRibbonIcon, UDExEventRibbonLogo,
+} from "./types/EventRibbon.js";
+import { eventLogoText, UDExEventRibbonMode } from "./types/EventRibbon.js";
+import "@ui5/webcomponents-icons/add-calendar.js";
+import "@ui5/webcomponents-icons/media-play.js";
+import EventRibbonTemplate from "./EventRibbonTemplate.js";
+
+// Styles
+import EventRibbonCss from "./generated/themes/EventRibbon.css.js";
+import { isEnter, isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-event-ribbon</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@sapudex/web-components/dist/EventRibbon.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ */
+@customElement({
+  tag: "udex-event-ribbon",
+  renderer: jsxRenderer,
+  styles: EventRibbonCss,
+  template: EventRibbonTemplate,
+})
+
+class UDExEventRibbon extends UI5Element {
+  /**
+   * Defines the text of the event logo.
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String })
+    eventLogo!: `${UDExEventRibbonLogo}`;
+
+  /**
+   * Defines the link details of the event ribbon.
+   *
+   * @default "{}"
+   * @public
+   */
+  @property({ type: String })
+    eventLink: string = "{}";
+
+  /**
+   * Defines the icon displayed next to the link.
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String })
+    eventLinkIcon!: `${UDExEventRibbonIcon}`;
+
+  /**
+   * Defines the text displayed in event ribbon.
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String })
+    eventText!: string;
+
+  /**
+   * Defines whether event-ribbon uses dark or light theme.
+   *
+   * @default "light"
+   * @public
+   */
+  @property({ type: String })
+    mode: `${UDExEventRibbonMode}` = UDExEventRibbonMode.light;
+
+  /**
+   * Defines the solid background color.
+   *
+   * @default "Blue"
+   * @public
+   */
+  @property({ type: String })
+    backgroundColorScheme!: UDExEventRibbonColorSheme;
+
+  /**
+   * Allows control over the background image source.
+   *
+   * @public
+   */
+  @property({ type: String })
+    backgroundImage?: string;
+
+  _eventLink!: UDExEventRibbonLink;
+
+  onBeforeRendering(): void {
+    this._eventLink = JSON.parse(this.eventLink);
+  }
+
+  onAfterRendering(): void {
+    this.applyColorScheme();
+  }
+
+  applyColorScheme(): void {
+    const backgroundColorLowercase = this.backgroundColorScheme.toLowerCase();
+    const backgroundColor: string = `var(--udex-event-ribbon-${this.mode}-${backgroundColorLowercase}-default-background-color)`;
+    const backgroundColorHover: string = `var(--udex-event-ribbon-${this.mode}-${backgroundColorLowercase}-hover-background-color)`;
+
+    this.style.setProperty("--udex-event-ribbon-background-color", backgroundColor);
+    this.style.setProperty("--udex-event-ribbon-hover-background-color", backgroundColorHover);
+
+    this.style.setProperty("--udex-event-ribbon-background-image", `url("${this.backgroundImage}")`);
+  }
+
+  handleKeyDown(e: KeyboardEvent): void {
+    if (isSpace(e) || isEnter(e)) {
+      e.preventDefault();
+      this.shadowRoot!.querySelector("a")?.click();
+    }
+  }
+
+  get eventLogoAlt(): string {
+    return eventLogoText[this.eventLogo];
+  }
+
+  get eventLogoPath(): string {
+    return `https://cdn.udex.services.sap.com/dds/design-tokens/assets/logos/event-ribbon-logo-${this.eventLogo}.svg`;
+  }
+}
+
+UDExEventRibbon.define();
+
+export default UDExEventRibbon;

package/src/EventRibbonTemplate.tsx

@@ -0,0 +1,18 @@
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+import type UDExEventRibbon from "./EventRibbon.js";
+
+export default function EventRibbonTemplate(this: UDExEventRibbon) {
+  const { text, target, url } = this._eventLink;
+  return (
+    <a onKeyDown={this.handleKeyDown} role="banner" aria-label={this.eventText} class= {{ "udex-event-ribbon__container": true, "udex-event-ribbon__container-with-background-image": this.backgroundImage }} target={target} href={url} title={text}>
+      <div class="udex-event-ribbon__logo">
+        <img src={this.eventLogoPath} alt={this.eventLogoAlt}/>
+      </div>
+      {this.eventText && <p class="udex-event-ribbon__text">{this.eventText}</p>}
+      <div class="udex-event-ribbon__link-container">
+        {this.eventLinkIcon && <Icon name={this.eventLinkIcon}></Icon>}
+        <span>{text}</span>
+      </div>
+    </a>
+  );
+}

package/src/InputGroup.ts

@@ -15,12 +15,15 @@ import {
   VALUE_STATE_ERROR,
   VALUE_STATE_SUCCESS,
 } from "./generated/i18n/i18n-defaults.js";
-import type UDExValueState from "./types/common.js";
 
 // Styles
 import InputGroupCss from "./generated/themes/InputGroup.css.js";
 
-export type UDExGroupValueState = Exclude<UDExValueState, "Warning">
+export enum UDExGroupValueState {
+  Standard = "Standard",
+  Error = "Error",
+  Success = "Success",
+}
 
 export enum UDExOrientation {
   Vertical = "Vertical",

package/src/ListItem.ts

@@ -196,16 +196,16 @@ class UDExListItem extends UDExListItemBase {
    * @slot
    * @public
    */
-  @slot()
-    firstIcon!: Array<HTMLElement>;
+  @slot({ type: UDExButton })
+    firstIcon!: Array<UDExButton>;
   /**
    * Slot for second icon.
    *
    * @slot
    * @public
    */
-  @slot()
-    secondIcon!: Array<HTMLElement>;
+  @slot({ type: UDExButton })
+    secondIcon!: Array<UDExButton>;
 
   /**
   * Defines the role attribute of component

package/src/MastheadItem.ts

@@ -549,7 +549,7 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
   }
 
   get isMobile(): boolean {
-    return BreakpointUtils.isBelow("M") || this.mastheadShell?._isMobileMode;
+    return BreakpointUtils.isAtMost("M") || this.mastheadShell?._isMobileMode;
   }
 
   get isTargetBlank(): boolean {

package/src/MastheadShell.ts

@@ -387,6 +387,12 @@ class UDExMastheadShell extends UI5Element {
     this._handleResizeBound = this._handleResize.bind(this);
   }
 
+  onBeforeRendering() {
+    if (this.isMobileMenuMode) {
+      this.setMobileMenuHeight();
+    }
+  }
+
   onAfterRendering() {
     this._rootHolder = this.mastheadHolder;
     this._searchOpener = this.searchOpener;
@@ -414,7 +420,7 @@ class UDExMastheadShell extends UI5Element {
       this.handleMobileMode();
     }
 
-    if (this.isBreakpointSizeM) {
+    if (this.isAtMostBreakpointSizeM) {
       this._isSearchOpened = false;
     }
 
@@ -424,6 +430,10 @@ class UDExMastheadShell extends UI5Element {
       return;
     }
 
+    if (this.isMobileMenuMode) {
+      this.setMobileMenuHeight();
+    }
+
     this._shouldHandleResize = true;
   }
 
@@ -713,6 +723,12 @@ class UDExMastheadShell extends UI5Element {
     });
   }
 
+  setMobileMenuHeight(): void {
+    const mastheadHeight = parseInt(window.getComputedStyle(this).getPropertyValue("--udex-masthead-shell-height"));
+    const mobileMenuHeight = `${window.innerHeight - mastheadHeight}px`;
+    this.style.setProperty("--udex-masthead-shell-mobile-menu-height", mobileMenuHeight);
+  }
+
   removeMobileMode(): void {
     this._isMobileMode = false;
     this.slottedItems.forEach((item: MastheadSlottedItem) => {
@@ -735,7 +751,7 @@ class UDExMastheadShell extends UI5Element {
    */
   openSearch(): void {
     const shouldPreventOpeningSearch = this._isSearchOpened
-      || (this.isBreakpointSizeM && !this.showSearchByDefault)
+      || (this.isAtMostBreakpointSizeM && !this.showSearchByDefault)
       || this._isMobileMode
       || (this.isAtLeastBreakpointSizeM && this.showSearchByDefault);
 
@@ -758,7 +774,7 @@ class UDExMastheadShell extends UI5Element {
    * @public
    */
   openMobileMenu(): void {
-    if (!this._isMobileMenuOpen && (this._isMobileMode || this.isBreakpointSizeM)) {
+    if (!this._isMobileMenuOpen && this.isMobileMenuMode) {
       this.mobileBtn?.handleSelectedChange();
       this.handleOpenMobileMenu();
     }
@@ -873,7 +889,7 @@ class UDExMastheadShell extends UI5Element {
     return !!this.mobileMenu.length;
   }
 
-  get isBreakpointSizeM(): boolean {
+  get isAtMostBreakpointSizeM(): boolean {
     return BreakpointUtils.isAtMost("M");
   }
 
@@ -881,6 +897,10 @@ class UDExMastheadShell extends UI5Element {
     return BreakpointUtils.isAtLeast("M");
   }
 
+  get isMobileMenuMode(): boolean {
+    return this._isMobileMode || this.isAtMostBreakpointSizeM;
+  }
+
   get isMainMenuVisible(): boolean {
     return !this.showSearchByDefault && !this._isSearchOpened;
   }
@@ -890,7 +910,7 @@ class UDExMastheadShell extends UI5Element {
   }
 
   get shouldHandleMobileView(): boolean {
-    return !this.isBreakpointSizeM && !this.showSearchByDefault;
+    return !this.isAtMostBreakpointSizeM && !this.showSearchByDefault;
   }
 
   get mainNavigationAriaLabel(): string {

package/src/MediaPlayer.ts

@@ -19,6 +19,8 @@ import MediaPlayerTemplate from "./generated/templates/MediaPlayerTemplate.lit.j
 // Styles
 import MediaPlayerCss from "./generated/themes/MediaPlayer.css.js";
 
+export type YoutubePlayer = YT.Player;
+
 declare global {
   interface Window {
     videojs: any;
@@ -352,7 +354,7 @@ class UDExMediaPlayer extends UI5Element {
    * Returns video element
    * @public
    */
-  getPlayer(): HTMLVideoElement | HTMLAudioElement | YT.Player | VimeoPlayer | null {
+  getPlayer(): HTMLVideoElement | HTMLAudioElement | YoutubePlayer | VimeoPlayer | null {
     if (this._youtubeSrc) {
       const player = this.shadowRoot?.querySelector("[udex-media-player-youtube]") as UDExMediaPlayerYoutube;
       return player?.getPlayer() || null;

package/src/MediaPlayerYoutube.ts

@@ -3,13 +3,13 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import type { UDExAspectRatio } from "./MediaPlayer.js";
 
 import MediaPlayerYoutubeTemplate from "./generated/templates/MediaPlayerYoutubeTemplate.lit.js";
 
 // Styles
 import MediaPlayerYoutubeCss from "./generated/themes/MediaPlayerYoutube.css.js";
 import MediaPlayerCss from "./generated/themes/MediaPlayer.css.js";
-import type { UDExAspectRatio } from "./MediaPlayer.js";
 
 const MATCH_NOCOOKIE = /youtube-nocookie\.com/;
 const MATCH_URL_YOUTUBE = /(?:youtu\.be\/|youtube(?:-nocookie|education)?\.com\/(?:embed\/|v\/|watch\/|watch\?v=|watch\?.+&v=|shorts\/|live\/))((\w|-){11})|youtube\.com\/playlist\?list=|youtube\.com\/user\//;
@@ -22,6 +22,8 @@ const MATCH_END_QUERY = /[?&#]end=([0-9hms]+)/;
 const MATCH_START_STAMP = /(\d+)(h|m|s)/g;
 const MATCH_NUMERIC = /^\d+$/;
 
+export type YoutubePlayer = YT.Player;
+
 declare global {
   interface Window {
     onYouTubeIframeAPIReady: () => void;
@@ -293,7 +295,7 @@ class UDExMediaPlayerYoutube extends UI5Element {
    * Returns video element
    * @public
    */
-  getPlayer(): YT.Player | null {
+  getPlayer(): YoutubePlayer | null {
     return this.youtubePlayer || null;
   }
 

package/src/Pagination.hbs

@@ -3,13 +3,15 @@
     <ul class="udex-pagination__list">
         <li class="udex-pagination__item--prev udex-pagination__item">
             <udex-button
-            ?disabled="{{prevButtonDisabled}}"
+            aria-disabled="{{effectivePrevButtonDisabled}}"
+            ?_aria-disabled="{{_prevButtonPseudoDisabled}}"
             accessible-name="{{previousPageAccessibleName}}"
             tooltip="{{previousBtnTooltip}}"
             size="Large"
             icon="navigation-left-arrow"
             design="Tertiary"
             @click="{{setPrevPage}}"
+            @focusout="{{handlePrevFocusOut}}"
             ></udex-button>
         </li>
         {{#if typeFull}}
@@ -17,7 +19,7 @@
                 <li class="udex-pagination__item">
                     <a class="udex-pagination__page" href="#" 
                         aria-label="{{accessibleName}}"
-                        @click="{{../onPageClick}}" 
+                        @click="{{../onPageClick}}"
                         ?active="{{active}}"
                         aria-current="{{ariaCurrent}}"
                         index="{{index}}">
@@ -35,13 +37,15 @@
         {{/if}}
         <li class="udex-pagination__item--next udex-pagination__item">
             <udex-button
-            ?disabled="{{nextButtonDisbled}}"
+            aria-disabled="{{effectiveNextButtonDisabled}}"
+            ?_aria-disabled="{{_nextButtonPseudoDisabled}}"
             tooltip="{{nextBtnTooltip}}"
             accessible-name="{{nextPageAccessibleName}}"
             size="Large"
             icon="navigation-right-arrow"
             design="Tertiary"
             @click="{{setNextPage}}"
+            @focusout="{{handleNextFocusOut}}"
             ></udex-button>
         </li>
     </ul>