From dedf1f0f568611b574411c269f8efb88f5c4f5e9 Mon Sep 17 00:00:00 2001
From: Amr Eladawy <amr.eladaway@gmail.com>
Date: Sat, 16 Sep 2023 23:52:26 +0100
Subject: [PATCH 1/5] Update Pagination.base.tsx

Add tool tip to all icon buttons
---
 .../components/Pagination/Pagination.base.tsx | 75 +++++++++++--------
 1 file changed, 45 insertions(+), 30 deletions(-)

diff --git a/packages/react-experiments/src/components/Pagination/Pagination.base.tsx b/packages/react-experiments/src/components/Pagination/Pagination.base.tsx
index b3594da7e63d9d..d013c5837604c1 100644
--- a/packages/react-experiments/src/components/Pagination/Pagination.base.tsx
+++ b/packages/react-experiments/src/components/Pagination/Pagination.base.tsx
@@ -118,37 +118,52 @@ export class PaginationBase extends React.Component<IPaginationProps> {
     return (
       <div className={this._classNames.root}>
         <div>
-          <IconButton
-            iconProps={this.props.firstPageIconProps}
-            onClick={this._handleFirstPage}
-            disabled={!canFirst}
-            aria-label={firstPageAriaLabel}
-            styles={{
-              icon: this._classNames.previousNextPage,
-              rootDisabled: this._classNames.previousNextPageDisabled,
-            }}
-          />
-          <IconButton
-            iconProps={this.props.previousPageIconProps}
-            onClick={this._handlePreviousPage}
-            disabled={!canPrevious}
-            aria-label={previousPageAriaLabel}
-            styles={{
-              icon: this._classNames.previousNextPage,
-              rootDisabled: this._classNames.previousNextPageDisabled,
-            }}
-          />
+          <TooltipHost
+            content={firstPageAriaLabel}
+            directionalHint={DirectionalHint.bottomCenter}
+          >
+            <IconButton
+              iconProps={this.props.firstPageIconProps}
+              onClick={this._handleFirstPage}
+              disabled={!canFirst}
+              aria-label={firstPageAriaLabel}
+              styles={{
+                icon: this._classNames.previousNextPage,
+                rootDisabled: this._classNames.previousNextPageDisabled,
+              }}
+            />
+            </TooltipHost>
+          <TooltipHost
+            content={previousPageAriaLabel}
+            directionalHint={DirectionalHint.bottomCenter}
+          >
+            <IconButton
+              iconProps={this.props.previousPageIconProps}
+              onClick={this._handlePreviousPage}
+              disabled={!canPrevious}
+              aria-label={previousPageAriaLabel}
+              styles={{
+                icon: this._classNames.previousNextPage,
+                rootDisabled: this._classNames.previousNextPageDisabled,
+              }}
+            />
+            </TooltipHost>
           {this._pageList()}
-          <IconButton
-            iconProps={this.props.nextPageIconProps}
-            onClick={this._handleNextPage}
-            disabled={!canNext}
-            aria-label={nextPageAriaLabel}
-            styles={{
-              icon: this._classNames.previousNextPage,
-              rootDisabled: this._classNames.previousNextPageDisabled,
-            }}
-          />
+          <TooltipHost
+            content={nextPageAriaLabel}
+            directionalHint={DirectionalHint.bottomCenter}
+          >
+            <IconButton
+              iconProps={this.props.nextPageIconProps}
+              onClick={this._handleNextPage}
+              disabled={!canNext}
+              aria-label={nextPageAriaLabel}
+              styles={{
+                icon: this._classNames.previousNextPage,
+                rootDisabled: this._classNames.previousNextPageDisabled,
+              }}
+            />
+            </TooltipHost>
           <TooltipHost
             content={`${pageAriaLabel ? pageAriaLabel + ' ' : ''}${pageCount}`}
             directionalHint={DirectionalHint.bottomCenter}

From 6eaeaaa2490216c080b9f73a69d978212ed47984 Mon Sep 17 00:00:00 2001
From: Amr Eladawy <amreladawy@mirosoft.com>
Date: Fri, 29 Sep 2023 23:01:44 +0100
Subject: [PATCH 2/5] add yarn change

---
 ...t-experiments-0f3a8927-b266-4199-ba8b-f59939a6f3a7.json | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 change/@fluentui-react-experiments-0f3a8927-b266-4199-ba8b-f59939a6f3a7.json

diff --git a/change/@fluentui-react-experiments-0f3a8927-b266-4199-ba8b-f59939a6f3a7.json b/change/@fluentui-react-experiments-0f3a8927-b266-4199-ba8b-f59939a6f3a7.json
new file mode 100644
index 00000000000000..57e102ed0804b3
--- /dev/null
+++ b/change/@fluentui-react-experiments-0f3a8927-b266-4199-ba8b-f59939a6f3a7.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fix a11y issue and add tooltip to pagination buttons.",
+  "packageName": "@fluentui/react-experiments",
+  "email": "amreladawy@mirosoft.com",
+  "dependentChangeType": "patch"
+}

From bad724dcf03f338e8a8e8878316f8a5356520c38 Mon Sep 17 00:00:00 2001
From: Ben Howell <48106640+behowell@users.noreply.github.com>
Date: Fri, 29 Sep 2023 15:24:12 -0700
Subject: [PATCH 3/5] Update
 @fluentui-react-experiments-0f3a8927-b266-4199-ba8b-f59939a6f3a7.json

Fix format of change description
---
 ...-react-experiments-0f3a8927-b266-4199-ba8b-f59939a6f3a7.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/change/@fluentui-react-experiments-0f3a8927-b266-4199-ba8b-f59939a6f3a7.json b/change/@fluentui-react-experiments-0f3a8927-b266-4199-ba8b-f59939a6f3a7.json
index 57e102ed0804b3..45bfd179c971ac 100644
--- a/change/@fluentui-react-experiments-0f3a8927-b266-4199-ba8b-f59939a6f3a7.json
+++ b/change/@fluentui-react-experiments-0f3a8927-b266-4199-ba8b-f59939a6f3a7.json
@@ -1,6 +1,6 @@
 {
   "type": "patch",
-  "comment": "Fix a11y issue and add tooltip to pagination buttons.",
+  "comment": "fix(Pagination) Add tooltips to pagination buttons.",
   "packageName": "@fluentui/react-experiments",
   "email": "amreladawy@mirosoft.com",
   "dependentChangeType": "patch"

From 7c0261cc96e789ffd063b16c21493aa8447bac6d Mon Sep 17 00:00:00 2001
From: Amr Eladawy <amreladawy@mirosoft.com>
Date: Sat, 30 Sep 2023 13:51:17 +0100
Subject: [PATCH 4/5] formatter

---
 .../components/Pagination/Pagination.base.tsx | 21 ++++++-------------
 1 file changed, 6 insertions(+), 15 deletions(-)

diff --git a/packages/react-experiments/src/components/Pagination/Pagination.base.tsx b/packages/react-experiments/src/components/Pagination/Pagination.base.tsx
index d013c5837604c1..abac90deb90f95 100644
--- a/packages/react-experiments/src/components/Pagination/Pagination.base.tsx
+++ b/packages/react-experiments/src/components/Pagination/Pagination.base.tsx
@@ -118,10 +118,7 @@ export class PaginationBase extends React.Component<IPaginationProps> {
     return (
       <div className={this._classNames.root}>
         <div>
-          <TooltipHost
-            content={firstPageAriaLabel}
-            directionalHint={DirectionalHint.bottomCenter}
-          >
+          <TooltipHost content={firstPageAriaLabel} directionalHint={DirectionalHint.bottomCenter}>
             <IconButton
               iconProps={this.props.firstPageIconProps}
               onClick={this._handleFirstPage}
@@ -132,11 +129,8 @@ export class PaginationBase extends React.Component<IPaginationProps> {
                 rootDisabled: this._classNames.previousNextPageDisabled,
               }}
             />
-            </TooltipHost>
-          <TooltipHost
-            content={previousPageAriaLabel}
-            directionalHint={DirectionalHint.bottomCenter}
-          >
+          </TooltipHost>
+          <TooltipHost content={previousPageAriaLabel} directionalHint={DirectionalHint.bottomCenter}>
             <IconButton
               iconProps={this.props.previousPageIconProps}
               onClick={this._handlePreviousPage}
@@ -147,12 +141,9 @@ export class PaginationBase extends React.Component<IPaginationProps> {
                 rootDisabled: this._classNames.previousNextPageDisabled,
               }}
             />
-            </TooltipHost>
+          </TooltipHost>
           {this._pageList()}
-          <TooltipHost
-            content={nextPageAriaLabel}
-            directionalHint={DirectionalHint.bottomCenter}
-          >
+          <TooltipHost content={nextPageAriaLabel} directionalHint={DirectionalHint.bottomCenter}>
             <IconButton
               iconProps={this.props.nextPageIconProps}
               onClick={this._handleNextPage}
@@ -163,7 +154,7 @@ export class PaginationBase extends React.Component<IPaginationProps> {
                 rootDisabled: this._classNames.previousNextPageDisabled,
               }}
             />
-            </TooltipHost>
+          </TooltipHost>
           <TooltipHost
             content={`${pageAriaLabel ? pageAriaLabel + ' ' : ''}${pageCount}`}
             directionalHint={DirectionalHint.bottomCenter}

From 8879b25b43745ce4c09a9889c7f62ed058513643 Mon Sep 17 00:00:00 2001
From: Amr Eladawy <amreladawy@mirosoft.com>
Date: Mon, 2 Oct 2023 23:35:07 +0100
Subject: [PATCH 5/5] Snapshot updated

---
 .../__snapshots__/Pagination.test.tsx.snap    | 780 ++++++++++--------
 1 file changed, 438 insertions(+), 342 deletions(-)

diff --git a/packages/react-experiments/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap b/packages/react-experiments/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap
index 6c58ca4fc61d20..d826e2e933e6d3 100644
--- a/packages/react-experiments/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap
+++ b/packages/react-experiments/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap
@@ -14,264 +14,328 @@ exports[`Pagination render buttons Pagination correctly 1`] = `
   <div
     role="radiogroup"
   >
-    <button
-      aria-disabled={true}
-      aria-label="first page"
+    <div
       className=
-          ms-Button
-          ms-Button--icon
-          is-disabled
+          ms-TooltipHost
           {
-            -moz-osx-font-smoothing: grayscale;
-            -webkit-font-smoothing: antialiased;
-            background-color: transparent;
-            border-color: #f3f2f1;
-            border-radius: 2px;
-            border: none;
-            box-sizing: border-box;
-            color: #c8c6c4;
-            cursor: default;
-            display: inline-block;
-            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-            font-size: 14px;
-            font-weight: 400;
-            height: 32px;
-            outline: transparent;
-            padding-bottom: 0;
-            padding-left: 4px;
-            padding-right: 4px;
-            padding-top: 0;
-            position: relative;
-            text-align: center;
-            text-decoration: none;
-            user-select: none;
-            width: 32px;
-          }
-          &::-moz-focus-inner {
-            border: 0;
-          }
-          .ms-Fabric--isFocusVisible &:focus:after {
-            border: 1px solid transparent;
-            bottom: 2px;
-            content: "";
-            left: 2px;
-            outline: 1px solid #605e5c;
-            position: absolute;
-            right: 2px;
-            top: 2px;
-            z-index: 1;
-          }
-          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
-            bottom: -2px;
-            left: -2px;
-            outline-color: ButtonText;
-            right: -2px;
-            top: -2px;
-          }
-          &:active > span {
-            left: 0px;
-            position: relative;
-            top: 0px;
-          }
-          &:hover {
-            outline: 0px;
-          }
-          &:focus {
-            outline: 0px;
+            display: inline;
           }
-      data-is-focusable={false}
-      disabled={true}
-      onClick={[Function]}
+      onBlurCapture={[Function]}
+      onFocusCapture={[Function]}
       onKeyDown={[Function]}
-      onKeyPress={[Function]}
-      onKeyUp={[Function]}
-      onMouseDown={[Function]}
-      onMouseUp={[Function]}
-      type="button"
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      role="none"
     >
-      <span
+      <button
+        aria-disabled={true}
+        aria-label="first page"
         className=
-            ms-Button-flexContainer
+            ms-Button
+            ms-Button--icon
+            is-disabled
             {
-              align-items: center;
-              display: flex;
-              flex-wrap: nowrap;
-              height: 100%;
-              justify-content: center;
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              background-color: transparent;
+              border-color: #f3f2f1;
+              border-radius: 2px;
+              border: none;
+              box-sizing: border-box;
+              color: #c8c6c4;
+              cursor: default;
+              display: inline-block;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 14px;
+              font-weight: 400;
+              height: 32px;
+              outline: transparent;
+              padding-bottom: 0;
+              padding-left: 4px;
+              padding-right: 4px;
+              padding-top: 0;
+              position: relative;
+              text-align: center;
+              text-decoration: none;
+              user-select: none;
+              width: 32px;
             }
-        data-automationid="splitbuttonprimary"
+            &::-moz-focus-inner {
+              border: 0;
+            }
+            .ms-Fabric--isFocusVisible &:focus:after {
+              border: 1px solid transparent;
+              bottom: 2px;
+              content: "";
+              left: 2px;
+              outline: 1px solid #605e5c;
+              position: absolute;
+              right: 2px;
+              top: 2px;
+              z-index: 1;
+            }
+            @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+              bottom: -2px;
+              left: -2px;
+              outline-color: ButtonText;
+              right: -2px;
+              top: -2px;
+            }
+            &:active > span {
+              left: 0px;
+              position: relative;
+              top: 0px;
+            }
+            &:hover {
+              outline: 0px;
+            }
+            &:focus {
+              outline: 0px;
+            }
+        data-is-focusable={false}
+        disabled={true}
+        onClick={[Function]}
+        onKeyDown={[Function]}
+        onKeyPress={[Function]}
+        onKeyUp={[Function]}
+        onMouseDown={[Function]}
+        onMouseUp={[Function]}
+        type="button"
       >
-        <i
-          aria-hidden={true}
+        <span
           className=
-              ms-Icon
-              ms-Button-icon
-              {
-                display: inline-block;
-              }
-              {
-                -moz-osx-font-smoothing: grayscale;
-                -webkit-font-smoothing: antialiased;
-                font-family: "FabricMDL2Icons-1";
-                font-style: normal;
-                font-weight: normal;
-                speak: none;
-              }
+              ms-Button-flexContainer
               {
-                color: #a19f9d;
-                flex-shrink: 0;
-                font-size: 16px;
-                height: 16px;
-                line-height: 16px;
-                margin-bottom: 0;
-                margin-left: 4px;
-                margin-right: 4px;
-                margin-top: 0;
-                text-align: center;
+                align-items: center;
+                display: flex;
+                flex-wrap: nowrap;
+                height: 100%;
+                justify-content: center;
               }
-              @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-                color: GrayText;
+          data-automationid="splitbuttonprimary"
+        >
+          <i
+            aria-hidden={true}
+            className=
+                ms-Icon
+                ms-Button-icon
+                {
+                  display: inline-block;
+                }
+                {
+                  -moz-osx-font-smoothing: grayscale;
+                  -webkit-font-smoothing: antialiased;
+                  font-family: "FabricMDL2Icons-1";
+                  font-style: normal;
+                  font-weight: normal;
+                  speak: none;
+                }
+                {
+                  color: #a19f9d;
+                  flex-shrink: 0;
+                  font-size: 16px;
+                  height: 16px;
+                  line-height: 16px;
+                  margin-bottom: 0;
+                  margin-left: 4px;
+                  margin-right: 4px;
+                  margin-top: 0;
+                  text-align: center;
+                }
+                @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                  color: GrayText;
+                }
+            data-icon-name="Previous"
+            style={
+              Object {
+                "fontFamily": "\\"FabricMDL2Icons-1\\"",
               }
-          data-icon-name="Previous"
-          style={
-            Object {
-              "fontFamily": "\\"FabricMDL2Icons-1\\"",
             }
+          >
+            
+          </i>
+        </span>
+      </button>
+      <div
+        hidden={true}
+        id="tooltip0"
+        style={
+          Object {
+            "border": 0,
+            "height": 1,
+            "margin": -1,
+            "overflow": "hidden",
+            "padding": 0,
+            "position": "absolute",
+            "whiteSpace": "nowrap",
+            "width": 1,
           }
-        >
-          
-        </i>
-      </span>
-    </button>
-    <button
-      aria-disabled={true}
-      aria-label="previous page"
+        }
+      >
+        first page
+      </div>
+    </div>
+    <div
       className=
-          ms-Button
-          ms-Button--icon
-          is-disabled
+          ms-TooltipHost
           {
-            -moz-osx-font-smoothing: grayscale;
-            -webkit-font-smoothing: antialiased;
-            background-color: transparent;
-            border-color: #f3f2f1;
-            border-radius: 2px;
-            border: none;
-            box-sizing: border-box;
-            color: #c8c6c4;
-            cursor: default;
-            display: inline-block;
-            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-            font-size: 14px;
-            font-weight: 400;
-            height: 32px;
-            outline: transparent;
-            padding-bottom: 0;
-            padding-left: 4px;
-            padding-right: 4px;
-            padding-top: 0;
-            position: relative;
-            text-align: center;
-            text-decoration: none;
-            user-select: none;
-            width: 32px;
-          }
-          &::-moz-focus-inner {
-            border: 0;
-          }
-          .ms-Fabric--isFocusVisible &:focus:after {
-            border: 1px solid transparent;
-            bottom: 2px;
-            content: "";
-            left: 2px;
-            outline: 1px solid #605e5c;
-            position: absolute;
-            right: 2px;
-            top: 2px;
-            z-index: 1;
-          }
-          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
-            bottom: -2px;
-            left: -2px;
-            outline-color: ButtonText;
-            right: -2px;
-            top: -2px;
-          }
-          &:active > span {
-            left: 0px;
-            position: relative;
-            top: 0px;
-          }
-          &:hover {
-            outline: 0px;
-          }
-          &:focus {
-            outline: 0px;
+            display: inline;
           }
-      data-is-focusable={false}
-      disabled={true}
-      onClick={[Function]}
+      onBlurCapture={[Function]}
+      onFocusCapture={[Function]}
       onKeyDown={[Function]}
-      onKeyPress={[Function]}
-      onKeyUp={[Function]}
-      onMouseDown={[Function]}
-      onMouseUp={[Function]}
-      type="button"
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      role="none"
     >
-      <span
+      <button
+        aria-disabled={true}
+        aria-label="previous page"
         className=
-            ms-Button-flexContainer
+            ms-Button
+            ms-Button--icon
+            is-disabled
             {
-              align-items: center;
-              display: flex;
-              flex-wrap: nowrap;
-              height: 100%;
-              justify-content: center;
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              background-color: transparent;
+              border-color: #f3f2f1;
+              border-radius: 2px;
+              border: none;
+              box-sizing: border-box;
+              color: #c8c6c4;
+              cursor: default;
+              display: inline-block;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 14px;
+              font-weight: 400;
+              height: 32px;
+              outline: transparent;
+              padding-bottom: 0;
+              padding-left: 4px;
+              padding-right: 4px;
+              padding-top: 0;
+              position: relative;
+              text-align: center;
+              text-decoration: none;
+              user-select: none;
+              width: 32px;
             }
-        data-automationid="splitbuttonprimary"
+            &::-moz-focus-inner {
+              border: 0;
+            }
+            .ms-Fabric--isFocusVisible &:focus:after {
+              border: 1px solid transparent;
+              bottom: 2px;
+              content: "";
+              left: 2px;
+              outline: 1px solid #605e5c;
+              position: absolute;
+              right: 2px;
+              top: 2px;
+              z-index: 1;
+            }
+            @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+              bottom: -2px;
+              left: -2px;
+              outline-color: ButtonText;
+              right: -2px;
+              top: -2px;
+            }
+            &:active > span {
+              left: 0px;
+              position: relative;
+              top: 0px;
+            }
+            &:hover {
+              outline: 0px;
+            }
+            &:focus {
+              outline: 0px;
+            }
+        data-is-focusable={false}
+        disabled={true}
+        onClick={[Function]}
+        onKeyDown={[Function]}
+        onKeyPress={[Function]}
+        onKeyUp={[Function]}
+        onMouseDown={[Function]}
+        onMouseUp={[Function]}
+        type="button"
       >
-        <i
-          aria-hidden={true}
+        <span
           className=
-              ms-Icon
-              ms-Button-icon
-              {
-                display: inline-block;
-              }
-              {
-                -moz-osx-font-smoothing: grayscale;
-                -webkit-font-smoothing: antialiased;
-                font-family: "FabricMDL2Icons-8";
-                font-style: normal;
-                font-weight: normal;
-                speak: none;
-              }
+              ms-Button-flexContainer
               {
-                color: #a19f9d;
-                flex-shrink: 0;
-                font-size: 16px;
-                height: 16px;
-                line-height: 16px;
-                margin-bottom: 0;
-                margin-left: 4px;
-                margin-right: 4px;
-                margin-top: 0;
-                text-align: center;
+                align-items: center;
+                display: flex;
+                flex-wrap: nowrap;
+                height: 100%;
+                justify-content: center;
               }
-              @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-                color: GrayText;
+          data-automationid="splitbuttonprimary"
+        >
+          <i
+            aria-hidden={true}
+            className=
+                ms-Icon
+                ms-Button-icon
+                {
+                  display: inline-block;
+                }
+                {
+                  -moz-osx-font-smoothing: grayscale;
+                  -webkit-font-smoothing: antialiased;
+                  font-family: "FabricMDL2Icons-8";
+                  font-style: normal;
+                  font-weight: normal;
+                  speak: none;
+                }
+                {
+                  color: #a19f9d;
+                  flex-shrink: 0;
+                  font-size: 16px;
+                  height: 16px;
+                  line-height: 16px;
+                  margin-bottom: 0;
+                  margin-left: 4px;
+                  margin-right: 4px;
+                  margin-top: 0;
+                  text-align: center;
+                }
+                @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                  color: GrayText;
+                }
+            data-icon-name="CaretSolidLeft"
+            style={
+              Object {
+                "fontFamily": "\\"FabricMDL2Icons-8\\"",
               }
-          data-icon-name="CaretSolidLeft"
-          style={
-            Object {
-              "fontFamily": "\\"FabricMDL2Icons-8\\"",
             }
+          >
+            
+          </i>
+        </span>
+      </button>
+      <div
+        hidden={true}
+        id="tooltip4"
+        style={
+          Object {
+            "border": 0,
+            "height": 1,
+            "margin": -1,
+            "overflow": "hidden",
+            "padding": 0,
+            "position": "absolute",
+            "whiteSpace": "nowrap",
+            "width": 1,
           }
-        >
-          
-        </i>
-      </span>
-    </button>
+        }
+      >
+        previous page
+      </div>
+    </div>
     <button
       aria-checked={true}
       aria-label="page 1 of 10 selected"
@@ -807,134 +871,166 @@ exports[`Pagination render buttons Pagination correctly 1`] = `
         5
       </span>
     </button>
-    <button
-      aria-label="next page"
+    <div
       className=
-          ms-Button
-          ms-Button--icon
+          ms-TooltipHost
           {
-            -moz-osx-font-smoothing: grayscale;
-            -webkit-font-smoothing: antialiased;
-            background-color: transparent;
-            border-radius: 2px;
-            border: none;
-            box-sizing: border-box;
-            color: #0078d4;
-            cursor: pointer;
-            display: inline-block;
-            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-            font-size: 14px;
-            font-weight: 400;
-            height: 32px;
-            outline: transparent;
-            padding-bottom: 0;
-            padding-left: 4px;
-            padding-right: 4px;
-            padding-top: 0;
-            position: relative;
-            text-align: center;
-            text-decoration: none;
-            user-select: none;
-            width: 32px;
-          }
-          &::-moz-focus-inner {
-            border: 0;
-          }
-          .ms-Fabric--isFocusVisible &:focus:after {
-            border: 1px solid transparent;
-            bottom: 2px;
-            content: "";
-            left: 2px;
-            outline: 1px solid #605e5c;
-            position: absolute;
-            right: 2px;
-            top: 2px;
-            z-index: 1;
-          }
-          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
-            bottom: -2px;
-            left: -2px;
-            outline-color: ButtonText;
-            right: -2px;
-            top: -2px;
-          }
-          &:active > span {
-            left: 0px;
-            position: relative;
-            top: 0px;
-          }
-          &:hover {
-            background-color: #f3f2f1;
-            color: #106ebe;
-          }
-          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){&:hover {
-            border-color: Highlight;
-            color: Highlight;
-          }
-          &:active {
-            background-color: #edebe9;
-            color: #005a9e;
+            display: inline;
           }
-      data-is-focusable={true}
-      onClick={[Function]}
+      onBlurCapture={[Function]}
+      onFocusCapture={[Function]}
       onKeyDown={[Function]}
-      onKeyPress={[Function]}
-      onKeyUp={[Function]}
-      onMouseDown={[Function]}
-      onMouseUp={[Function]}
-      type="button"
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      role="none"
     >
-      <span
+      <button
+        aria-label="next page"
         className=
-            ms-Button-flexContainer
+            ms-Button
+            ms-Button--icon
             {
-              align-items: center;
-              display: flex;
-              flex-wrap: nowrap;
-              height: 100%;
-              justify-content: center;
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              background-color: transparent;
+              border-radius: 2px;
+              border: none;
+              box-sizing: border-box;
+              color: #0078d4;
+              cursor: pointer;
+              display: inline-block;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 14px;
+              font-weight: 400;
+              height: 32px;
+              outline: transparent;
+              padding-bottom: 0;
+              padding-left: 4px;
+              padding-right: 4px;
+              padding-top: 0;
+              position: relative;
+              text-align: center;
+              text-decoration: none;
+              user-select: none;
+              width: 32px;
             }
-        data-automationid="splitbuttonprimary"
+            &::-moz-focus-inner {
+              border: 0;
+            }
+            .ms-Fabric--isFocusVisible &:focus:after {
+              border: 1px solid transparent;
+              bottom: 2px;
+              content: "";
+              left: 2px;
+              outline: 1px solid #605e5c;
+              position: absolute;
+              right: 2px;
+              top: 2px;
+              z-index: 1;
+            }
+            @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+              bottom: -2px;
+              left: -2px;
+              outline-color: ButtonText;
+              right: -2px;
+              top: -2px;
+            }
+            &:active > span {
+              left: 0px;
+              position: relative;
+              top: 0px;
+            }
+            &:hover {
+              background-color: #f3f2f1;
+              color: #106ebe;
+            }
+            @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){&:hover {
+              border-color: Highlight;
+              color: Highlight;
+            }
+            &:active {
+              background-color: #edebe9;
+              color: #005a9e;
+            }
+        data-is-focusable={true}
+        onClick={[Function]}
+        onKeyDown={[Function]}
+        onKeyPress={[Function]}
+        onKeyUp={[Function]}
+        onMouseDown={[Function]}
+        onMouseUp={[Function]}
+        type="button"
       >
-        <i
-          aria-hidden={true}
+        <span
           className=
-              ms-Icon
-              ms-Button-icon
-              {
-                display: inline-block;
-              }
+              ms-Button-flexContainer
               {
-                -moz-osx-font-smoothing: grayscale;
-                -webkit-font-smoothing: antialiased;
-                font-family: "FabricMDL2Icons-8";
-                font-style: normal;
-                font-weight: normal;
-                speak: none;
+                align-items: center;
+                display: flex;
+                flex-wrap: nowrap;
+                height: 100%;
+                justify-content: center;
               }
-              {
-                color: #0078d4;
-                flex-shrink: 0;
-                font-size: 16px;
-                height: 16px;
-                line-height: 16px;
-                margin-bottom: 0;
-                margin-left: 4px;
-                margin-right: 4px;
-                margin-top: 0;
-                text-align: center;
+          data-automationid="splitbuttonprimary"
+        >
+          <i
+            aria-hidden={true}
+            className=
+                ms-Icon
+                ms-Button-icon
+                {
+                  display: inline-block;
+                }
+                {
+                  -moz-osx-font-smoothing: grayscale;
+                  -webkit-font-smoothing: antialiased;
+                  font-family: "FabricMDL2Icons-8";
+                  font-style: normal;
+                  font-weight: normal;
+                  speak: none;
+                }
+                {
+                  color: #0078d4;
+                  flex-shrink: 0;
+                  font-size: 16px;
+                  height: 16px;
+                  line-height: 16px;
+                  margin-bottom: 0;
+                  margin-left: 4px;
+                  margin-right: 4px;
+                  margin-top: 0;
+                  text-align: center;
+                }
+            data-icon-name="CaretSolidRight"
+            style={
+              Object {
+                "fontFamily": "\\"FabricMDL2Icons-8\\"",
               }
-          data-icon-name="CaretSolidRight"
-          style={
-            Object {
-              "fontFamily": "\\"FabricMDL2Icons-8\\"",
             }
+          >
+            
+          </i>
+        </span>
+      </button>
+      <div
+        hidden={true}
+        id="tooltip23"
+        style={
+          Object {
+            "border": 0,
+            "height": 1,
+            "margin": -1,
+            "overflow": "hidden",
+            "padding": 0,
+            "position": "absolute",
+            "whiteSpace": "nowrap",
+            "width": 1,
           }
-        >
-          
-        </i>
-      </span>
-    </button>
+        }
+      >
+        next page
+      </div>
+    </div>
     <div
       className=
           ms-TooltipHost
@@ -1078,7 +1174,7 @@ exports[`Pagination render buttons Pagination correctly 1`] = `
       </button>
       <div
         hidden={true}
-        id="tooltip24"
+        id="tooltip27"
         style={
           Object {
             "border": 0,