fix(pagination): focus buttons web components (#18165)

* fix(pagination): focus buttons web components

* fix(pagination): button svgs

Author: ariellalgilmore

packages/web-components/src/components/button/button.scss

@@ -49,6 +49,7 @@ $css--plex: true !default;
 :host(#{$prefix}-button[pagination]),
 :host(#{$prefix}-modal-footer-button[pagination]) {
   .#{$prefix}--btn {
+    padding: 0;
     border: none;
     border-inline-start: 1px solid $border-subtle;
     transition: none;

packages/web-components/src/components/pagination/pagination.ts

@@ -124,6 +124,16 @@ class CDSPagination extends FocusMixin(HostListenerMixin(LitElement)) {
     if (newStart !== oldStart) {
       this._handleUserInitiatedChangeStart(newStart);
     }
+    // reset focus to forward button if it reaches the beginning
+    if (this.page === 1) {
+      const { selectorForwardButton } = this
+        .constructor as typeof CDSPagination;
+      (
+        this.shadowRoot?.querySelector(
+          `[button-class-name*=${selectorForwardButton}]`
+        ) as HTMLElement
+      ).focus();
+    }
   }
 
   /**
@@ -136,6 +146,16 @@ class CDSPagination extends FocusMixin(HostListenerMixin(LitElement)) {
     if (newStart < (totalItems == null ? Infinity : totalItems)) {
       this._handleUserInitiatedChangeStart(newStart);
     }
+    // reset focus to previous button if it reaches the end
+    if (this.page === this.totalPages) {
+      const { selectorPreviousButton } = this
+        .constructor as typeof CDSPagination;
+      (
+        this.shadowRoot?.querySelector(
+          `[button-class-name*=${selectorPreviousButton}]`
+        ) as HTMLElement
+      ).focus();
+    }
   }
 
   /**
@@ -470,6 +490,20 @@ class CDSPagination extends FocusMixin(HostListenerMixin(LitElement)) {
     return `${prefix}-select`;
   }
 
+  /**
+   * A selector that will return the previous button.
+   */
+  static get selectorPreviousButton() {
+    return `${prefix}--pagination__button--backward`;
+  }
+
+  /**
+   * A selector that will return the forward button.
+   */
+  static get selectorForwardButton() {
+    return `${prefix}--pagination__button--forward`;
+  }
+
   /**
    * The name of the custom event fired after the current row number is changed.
    */