fix(pagination): use semantic internal elements. #7804

Esri · May 31, 2024 · 6da0c67 · 6da0c67
1 parent 6d38ad0
commit 6da0c67
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 64 deletions.
diff --git a/packages/calcite-components/src/components/pagination/pagination.e2e.ts b/packages/calcite-components/src/components/pagination/pagination.e2e.ts
@@ -41,6 +41,17 @@ describe("calcite-pagination", () => {
     });
   });
 
+  describe("semantics", () => {
+    it("should render a list internally", async () => {
+      const page = await newE2EPage();
+      await page.setContent(`<calcite-pagination total-items="10" page-size="1"></calcite-pagination>`);
+      const list = await page.find(`calcite-pagination >>> ul`);
+      expect(list).not.toBeNull();
+      const listItems = await page.findAll(`calcite-pagination >>> li`);
+      expect(listItems.length).toBe(10);
+    });
+  });
+
   describe("ellipsis rendering", () => {
     it("should not render either ellipsis when total pages is less than or equal to 5", async () => {
       const page = await newE2EPage();

diff --git a/packages/calcite-components/src/components/pagination/pagination.scss b/packages/calcite-components/src/components/pagination/pagination.scss
@@ -3,6 +3,14 @@
   writing-mode: horizontal-tb;
 }
 
+ul {
+  @apply flex list-none m-0 p-0;
+}
+
+li {
+  @apply flex m-0 p-0;
+}
+
 :host([scale="s"]) {
   & .chevron,
   & .page,

diff --git a/packages/calcite-components/src/components/pagination/pagination.tsx b/packages/calcite-components/src/components/pagination/pagination.tsx
@@ -3,7 +3,6 @@ import {
   Element,
   Event,
   EventEmitter,
-  Fragment,
   h,
   Method,
   Prop,
@@ -447,17 +446,19 @@ export class Pagination
     const selected = start === this.startItem;
 
     return (
-      <button
-        aria-current={selected ? "page" : "false"}
-        class={{
-          [CSS.page]: true,
-          [CSS.selected]: selected,
-        }}
-        onClick={this.handlePageClick}
-        value={start}
-      >
-        {displayedPage}
-      </button>
+      <li>
+        <button
+          aria-current={selected ? "page" : "false"}
+          class={{
+            [CSS.page]: true,
+            [CSS.selected]: selected,
+          }}
+          onClick={this.handlePageClick}
+          value={start}
+        >
+          {displayedPage}
+        </button>
+      </li>
     );
   }
 
@@ -467,19 +468,21 @@ export class Pagination
     const disabled = pageSize === 1 ? startItem <= pageSize : startItem < pageSize;
 
     return (
-      <button
-        aria-label={messages.previous}
-        class={{
-          [CSS.chevron]: true,
-          [CSS.disabled]: disabled,
-        }}
-        data-test-chevron="previous"
-        disabled={disabled}
-        key="previous"
-        onClick={this.previousClicked}
-      >
-        <calcite-icon flipRtl icon={ICONS.previous} scale={getIconScale(this.scale)} />
-      </button>
+      <li>
+        <button
+          aria-label={messages.previous}
+          class={{
+            [CSS.chevron]: true,
+            [CSS.disabled]: disabled,
+          }}
+          data-test-chevron="previous"
+          disabled={disabled}
+          key="previous"
+          onClick={this.previousClicked}
+        >
+          <calcite-icon flipRtl icon={ICONS.previous} scale={getIconScale(this.scale)} />
+        </button>
+      </li>
     );
   }
 
@@ -490,19 +493,21 @@ export class Pagination
       pageSize === 1 ? startItem + pageSize > totalItems : startItem + pageSize > totalItems;
 
     return (
-      <button
-        aria-label={messages.next}
-        class={{
-          [CSS.chevron]: true,
-          [CSS.disabled]: disabled,
-        }}
-        data-test-chevron="next"
-        disabled={disabled}
-        key="next-button"
-        onClick={this.nextClicked}
-      >
-        <calcite-icon flipRtl icon={ICONS.next} scale={getIconScale(this.scale)} />
-      </button>
+      <li>
+        <button
+          aria-label={messages.next}
+          class={{
+            [CSS.chevron]: true,
+            [CSS.disabled]: disabled,
+          }}
+          data-test-chevron="next"
+          disabled={disabled}
+          key="next-button"
+          onClick={this.nextClicked}
+        >
+          <calcite-icon flipRtl icon={ICONS.next} scale={getIconScale(this.scale)} />
+        </button>
+      </li>
     );
   }
 
@@ -512,18 +517,20 @@ export class Pagination
     const disabled = startItem === 1;
 
     return isXXSmall ? (
-      <button
-        aria-label={messages.first}
-        class={{
-          [CSS.chevron]: true,
-          [CSS.disabled]: disabled,
-        }}
-        disabled={disabled}
-        key="first-button"
-        onClick={this.firstClicked}
-      >
-        <calcite-icon flipRtl icon={ICONS.first} scale={getIconScale(this.scale)} />
-      </button>
+      <li>
+        <button
+          aria-label={messages.first}
+          class={{
+            [CSS.chevron]: true,
+            [CSS.disabled]: disabled,
+          }}
+          disabled={disabled}
+          key="first-button"
+          onClick={this.firstClicked}
+        >
+          <calcite-icon flipRtl icon={ICONS.first} scale={getIconScale(this.scale)} />
+        </button>
+      </li>
     ) : null;
   }
 
@@ -533,30 +540,32 @@ export class Pagination
     const disabled = startItem === lastStartItem;
 
     return isXXSmall ? (
-      <button
-        aria-label={messages.last}
-        class={{
-          [CSS.chevron]: true,
-          [CSS.disabled]: disabled,
-        }}
-        disabled={disabled}
-        key="last-button"
-        onClick={this.lastClicked}
-      >
-        <calcite-icon flipRtl icon={ICONS.last} scale={getIconScale(this.scale)} />
-      </button>
+      <li>
+        <button
+          aria-label={messages.last}
+          class={{
+            [CSS.chevron]: true,
+            [CSS.disabled]: disabled,
+          }}
+          disabled={disabled}
+          key="last-button"
+          onClick={this.lastClicked}
+        >
+          <calcite-icon flipRtl icon={ICONS.last} scale={getIconScale(this.scale)} />
+        </button>
+      </li>
     ) : null;
   }
 
   render(): VNode {
     return (
-      <Fragment>
+      <ul>
         {this.renderFirstChevron()}
         {this.renderPreviousChevron()}
         {this.renderItems()}
         {this.renderNextChevron()}
         {this.renderLastChevron()}
-      </Fragment>
+      </ul>
     );
   }
 }