From 7c0f91c221f9edcefa7fd3c05da1fa5664c4ad80 Mon Sep 17 00:00:00 2001
From: Amr Eladawy <amr.eladaway@gmail.com>
Date: Sat, 16 Sep 2023 22:53:29 +0100
Subject: [PATCH 1/4] Update PageNumber.tsx

aria-selected is a wrong attribute for button. The correct attribute is aria-checked.
Also, added role radio to reflect the correct role of this pagination.
---
 .../react-experiments/src/components/Pagination/PageNumber.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/react-experiments/src/components/Pagination/PageNumber.tsx b/packages/react-experiments/src/components/Pagination/PageNumber.tsx
index ef39ad6f7a70e0..36a9ee69dc0acc 100644
--- a/packages/react-experiments/src/components/Pagination/PageNumber.tsx
+++ b/packages/react-experiments/src/components/Pagination/PageNumber.tsx
@@ -14,9 +14,10 @@ export class PageNumber extends React.Component<IPageNumberProps, {}> {
       <DefaultButton
         key={page}
         onClick={this._onClick}
-        aria-selected={selected}
+        aria-checked={selected}
         aria-label={ariaLabel}
         styles={{ root: className }}
+        role="radio"
       >
         {page}
       </DefaultButton>

From 7673b8c29b4a67e9f33fb6ee644bb18ba31d67b9 Mon Sep 17 00:00:00 2001
From: Amr Eladawy <amr.eladaway@gmail.com>
Date: Fri, 29 Sep 2023 22:22:23 +0100
Subject: [PATCH 2/4] add  role="radiogroup" to parent of PageNumber

---
 .../components/Pagination/Pagination.base.tsx | 94 +++++++++++++------
 1 file changed, 63 insertions(+), 31 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..1e9ed4522ddb0e 100644
--- a/packages/react-experiments/src/components/Pagination/Pagination.base.tsx
+++ b/packages/react-experiments/src/components/Pagination/Pagination.base.tsx
@@ -1,30 +1,38 @@
-import * as React from 'react';
-import { IconButton } from '@fluentui/react/lib/Button';
-import { initializeComponentRef, classNamesFunction } from '../../Utilities';
-import { PageNumber } from './PageNumber';
-import { ComboBox } from '@fluentui/react/lib/ComboBox';
-import { TooltipHost } from '@fluentui/react/lib/Tooltip';
-import { DirectionalHint } from '@fluentui/react/lib/Callout';
-import type { IPaginationProps, IPaginationString, IPaginationStyleProps, IPaginationStyles } from './Pagination.types';
-import type { IComboBoxOption, IComboBox } from '@fluentui/react/lib/ComboBox';
-import type { IProcessedStyleSet } from '../../Styling';
+import * as React from "react";
+import { IconButton } from "@fluentui/react/lib/Button";
+import { initializeComponentRef, classNamesFunction } from "../../Utilities";
+import { PageNumber } from "./PageNumber";
+import { ComboBox } from "@fluentui/react/lib/ComboBox";
+import { TooltipHost } from "@fluentui/react/lib/Tooltip";
+import { DirectionalHint } from "@fluentui/react/lib/Callout";
+import type {
+  IPaginationProps,
+  IPaginationString,
+  IPaginationStyleProps,
+  IPaginationStyles,
+} from "./Pagination.types";
+import type { IComboBoxOption, IComboBox } from "@fluentui/react/lib/ComboBox";
+import type { IProcessedStyleSet } from "../../Styling";
 
-const getClassNames = classNamesFunction<IPaginationStyleProps, IPaginationStyles>();
+const getClassNames = classNamesFunction<
+  IPaginationStyleProps,
+  IPaginationStyles
+>();
 
 const DEFAULT_STRINGS: IPaginationString = {
-  of: 'of',
-  divider: '-',
+  of: "of",
+  divider: "-",
 };
 
 export class PaginationBase extends React.Component<IPaginationProps> {
   public static defaultProps: Partial<IPaginationProps> = {
     selectedPageIndex: 0,
-    format: 'comboBox',
+    format: "comboBox",
     numberOfPageButton: 5,
-    previousPageIconProps: { iconName: 'CaretSolidLeft' },
-    nextPageIconProps: { iconName: 'CaretSolidRight' },
-    firstPageIconProps: { iconName: 'Previous' },
-    lastPageIconProps: { iconName: 'Next' },
+    previousPageIconProps: { iconName: "CaretSolidLeft" },
+    nextPageIconProps: { iconName: "CaretSolidRight" },
+    firstPageIconProps: { iconName: "Previous" },
+    lastPageIconProps: { iconName: "Next" },
     strings: DEFAULT_STRINGS,
   };
 
@@ -66,7 +74,7 @@ export class PaginationBase extends React.Component<IPaginationProps> {
     const canFirst = selectedPageIndex !== 0;
     const canLast = selectedPageIndex !== pageCount - 1;
 
-    if (format === 'comboBox') {
+    if (format === "comboBox") {
       const scaleOptions: IComboBoxOption[] = [];
 
       for (let i = 0; i < this.props.pageCount; i++) {
@@ -117,7 +125,7 @@ export class PaginationBase extends React.Component<IPaginationProps> {
 
     return (
       <div className={this._classNames.root}>
-        <div>
+        <div  role="radiogroup">
           <IconButton
             iconProps={this.props.firstPageIconProps}
             onClick={this._handleFirstPage}
@@ -150,7 +158,7 @@ export class PaginationBase extends React.Component<IPaginationProps> {
             }}
           />
           <TooltipHost
-            content={`${pageAriaLabel ? pageAriaLabel + ' ' : ''}${pageCount}`}
+            content={`${pageAriaLabel ? pageAriaLabel + " " : ""}${pageCount}`}
             directionalHint={DirectionalHint.bottomCenter}
           >
             <IconButton
@@ -178,7 +186,11 @@ export class PaginationBase extends React.Component<IPaginationProps> {
     this._handleSelectedPage(this.props.pageCount - 1);
   };
 
-  private _onComboBoxChange = (event: React.FormEvent<IComboBox>, option: IComboBoxOption, index: number) => {
+  private _onComboBoxChange = (
+    event: React.FormEvent<IComboBox>,
+    option: IComboBoxOption,
+    index: number
+  ) => {
     if (option !== undefined) {
       this._handleSelectedPage(index);
     }
@@ -203,12 +215,20 @@ export class PaginationBase extends React.Component<IPaginationProps> {
   };
 
   private _pageElement(index: number): JSX.Element {
-    const { pageAriaLabel, pageCount, selectedPageIndex, selectedAriaLabel, strings } = this.props;
+    const {
+      pageAriaLabel,
+      pageCount,
+      selectedPageIndex,
+      selectedAriaLabel,
+      strings,
+    } = this.props;
     const isSelected = index === selectedPageIndex;
-    let ariaLabel = pageAriaLabel && `${pageAriaLabel} ${index + 1} ${strings!.of} ${pageCount}`;
+    let ariaLabel =
+      pageAriaLabel &&
+      `${pageAriaLabel} ${index + 1} ${strings!.of} ${pageCount}`;
 
     if (isSelected) {
-      ariaLabel = ariaLabel + ' ' + selectedAriaLabel;
+      ariaLabel = ariaLabel + " " + selectedAriaLabel;
     }
 
     return (
@@ -250,19 +270,31 @@ export class PaginationBase extends React.Component<IPaginationProps> {
     return pageList;
   }
 
-  private _renderVisibleItemLabel = (props: IPaginationProps): JSX.Element | null => {
+  private _renderVisibleItemLabel = (
+    props: IPaginationProps
+  ): JSX.Element | null => {
     if (props.onRenderVisibleItemLabel) {
-      return <div className={this._classNames.visibleItemLabel}>{props.onRenderVisibleItemLabel(props)}</div>;
+      return (
+        <div className={this._classNames.visibleItemLabel}>
+          {props.onRenderVisibleItemLabel(props)}
+        </div>
+      );
     }
 
     if (props.itemsPerPage && props.totalItemCount) {
       const leftItemIndex = props.selectedPageIndex! * props.itemsPerPage + 1;
-      const rightItemsIndex = Math.min((props.selectedPageIndex! + 1) * props.itemsPerPage, props.totalItemCount);
-      const visibleItemLabel = `${leftItemIndex} ${props.strings!.divider} ${rightItemsIndex} ${props.strings!.of} ${
+      const rightItemsIndex = Math.min(
+        (props.selectedPageIndex! + 1) * props.itemsPerPage,
         props.totalItemCount
-      }`;
+      );
+      const visibleItemLabel = `${leftItemIndex} ${
+        props.strings!.divider
+      } ${rightItemsIndex} ${props.strings!.of} ${props.totalItemCount}`;
       return (
-        <div className={this._classNames.visibleItemLabel} aria-label={visibleItemLabel}>
+        <div
+          className={this._classNames.visibleItemLabel}
+          aria-label={visibleItemLabel}
+        >
           {visibleItemLabel}
         </div>
       );

From a1e6445153605e606333efb3d0ec541269037542 Mon Sep 17 00:00:00 2001
From: Amr Eladawy <amr.eladaway@gmail.com>
Date: Fri, 29 Sep 2023 22:29:04 +0100
Subject: [PATCH 3/4] revert fromating

---
 .../components/Pagination/Pagination.base.tsx | 94 ++++++-------------
 1 file changed, 31 insertions(+), 63 deletions(-)

diff --git a/packages/react-experiments/src/components/Pagination/Pagination.base.tsx b/packages/react-experiments/src/components/Pagination/Pagination.base.tsx
index 1e9ed4522ddb0e..6c36f801077fdd 100644
--- a/packages/react-experiments/src/components/Pagination/Pagination.base.tsx
+++ b/packages/react-experiments/src/components/Pagination/Pagination.base.tsx
@@ -1,38 +1,30 @@
-import * as React from "react";
-import { IconButton } from "@fluentui/react/lib/Button";
-import { initializeComponentRef, classNamesFunction } from "../../Utilities";
-import { PageNumber } from "./PageNumber";
-import { ComboBox } from "@fluentui/react/lib/ComboBox";
-import { TooltipHost } from "@fluentui/react/lib/Tooltip";
-import { DirectionalHint } from "@fluentui/react/lib/Callout";
-import type {
-  IPaginationProps,
-  IPaginationString,
-  IPaginationStyleProps,
-  IPaginationStyles,
-} from "./Pagination.types";
-import type { IComboBoxOption, IComboBox } from "@fluentui/react/lib/ComboBox";
-import type { IProcessedStyleSet } from "../../Styling";
+import * as React from 'react';
+import { IconButton } from '@fluentui/react/lib/Button';
+import { initializeComponentRef, classNamesFunction } from '../../Utilities';
+import { PageNumber } from './PageNumber';
+import { ComboBox } from '@fluentui/react/lib/ComboBox';
+import { TooltipHost } from '@fluentui/react/lib/Tooltip';
+import { DirectionalHint } from '@fluentui/react/lib/Callout';
+import type { IPaginationProps, IPaginationString, IPaginationStyleProps, IPaginationStyles } from './Pagination.types';
+import type { IComboBoxOption, IComboBox } from '@fluentui/react/lib/ComboBox';
+import type { IProcessedStyleSet } from '../../Styling';
 
-const getClassNames = classNamesFunction<
-  IPaginationStyleProps,
-  IPaginationStyles
->();
+const getClassNames = classNamesFunction<IPaginationStyleProps, IPaginationStyles>();
 
 const DEFAULT_STRINGS: IPaginationString = {
-  of: "of",
-  divider: "-",
+  of: 'of',
+  divider: '-',
 };
 
 export class PaginationBase extends React.Component<IPaginationProps> {
   public static defaultProps: Partial<IPaginationProps> = {
     selectedPageIndex: 0,
-    format: "comboBox",
+    format: 'comboBox',
     numberOfPageButton: 5,
-    previousPageIconProps: { iconName: "CaretSolidLeft" },
-    nextPageIconProps: { iconName: "CaretSolidRight" },
-    firstPageIconProps: { iconName: "Previous" },
-    lastPageIconProps: { iconName: "Next" },
+    previousPageIconProps: { iconName: 'CaretSolidLeft' },
+    nextPageIconProps: { iconName: 'CaretSolidRight' },
+    firstPageIconProps: { iconName: 'Previous' },
+    lastPageIconProps: { iconName: 'Next' },
     strings: DEFAULT_STRINGS,
   };
 
@@ -74,7 +66,7 @@ export class PaginationBase extends React.Component<IPaginationProps> {
     const canFirst = selectedPageIndex !== 0;
     const canLast = selectedPageIndex !== pageCount - 1;
 
-    if (format === "comboBox") {
+    if (format === 'comboBox') {
       const scaleOptions: IComboBoxOption[] = [];
 
       for (let i = 0; i < this.props.pageCount; i++) {
@@ -125,7 +117,7 @@ export class PaginationBase extends React.Component<IPaginationProps> {
 
     return (
       <div className={this._classNames.root}>
-        <div  role="radiogroup">
+        <div role="radiogroup">
           <IconButton
             iconProps={this.props.firstPageIconProps}
             onClick={this._handleFirstPage}
@@ -158,7 +150,7 @@ export class PaginationBase extends React.Component<IPaginationProps> {
             }}
           />
           <TooltipHost
-            content={`${pageAriaLabel ? pageAriaLabel + " " : ""}${pageCount}`}
+            content={`${pageAriaLabel ? pageAriaLabel + ' ' : ''}${pageCount}`}
             directionalHint={DirectionalHint.bottomCenter}
           >
             <IconButton
@@ -186,11 +178,7 @@ export class PaginationBase extends React.Component<IPaginationProps> {
     this._handleSelectedPage(this.props.pageCount - 1);
   };
 
-  private _onComboBoxChange = (
-    event: React.FormEvent<IComboBox>,
-    option: IComboBoxOption,
-    index: number
-  ) => {
+  private _onComboBoxChange = (event: React.FormEvent<IComboBox>, option: IComboBoxOption, index: number) => {
     if (option !== undefined) {
       this._handleSelectedPage(index);
     }
@@ -215,20 +203,12 @@ export class PaginationBase extends React.Component<IPaginationProps> {
   };
 
   private _pageElement(index: number): JSX.Element {
-    const {
-      pageAriaLabel,
-      pageCount,
-      selectedPageIndex,
-      selectedAriaLabel,
-      strings,
-    } = this.props;
+    const { pageAriaLabel, pageCount, selectedPageIndex, selectedAriaLabel, strings } = this.props;
     const isSelected = index === selectedPageIndex;
-    let ariaLabel =
-      pageAriaLabel &&
-      `${pageAriaLabel} ${index + 1} ${strings!.of} ${pageCount}`;
+    let ariaLabel = pageAriaLabel && `${pageAriaLabel} ${index + 1} ${strings!.of} ${pageCount}`;
 
     if (isSelected) {
-      ariaLabel = ariaLabel + " " + selectedAriaLabel;
+      ariaLabel = ariaLabel + ' ' + selectedAriaLabel;
     }
 
     return (
@@ -270,31 +250,19 @@ export class PaginationBase extends React.Component<IPaginationProps> {
     return pageList;
   }
 
-  private _renderVisibleItemLabel = (
-    props: IPaginationProps
-  ): JSX.Element | null => {
+  private _renderVisibleItemLabel = (props: IPaginationProps): JSX.Element | null => {
     if (props.onRenderVisibleItemLabel) {
-      return (
-        <div className={this._classNames.visibleItemLabel}>
-          {props.onRenderVisibleItemLabel(props)}
-        </div>
-      );
+      return <div className={this._classNames.visibleItemLabel}>{props.onRenderVisibleItemLabel(props)}</div>;
     }
 
     if (props.itemsPerPage && props.totalItemCount) {
       const leftItemIndex = props.selectedPageIndex! * props.itemsPerPage + 1;
-      const rightItemsIndex = Math.min(
-        (props.selectedPageIndex! + 1) * props.itemsPerPage,
+      const rightItemsIndex = Math.min((props.selectedPageIndex! + 1) * props.itemsPerPage, props.totalItemCount);
+      const visibleItemLabel = `${leftItemIndex} ${props.strings!.divider} ${rightItemsIndex} ${props.strings!.of} ${
         props.totalItemCount
-      );
-      const visibleItemLabel = `${leftItemIndex} ${
-        props.strings!.divider
-      } ${rightItemsIndex} ${props.strings!.of} ${props.totalItemCount}`;
+      }`;
       return (
-        <div
-          className={this._classNames.visibleItemLabel}
-          aria-label={visibleItemLabel}
-        >
+        <div className={this._classNames.visibleItemLabel} aria-label={visibleItemLabel}>
           {visibleItemLabel}
         </div>
       );

From 76c09266fbb4ad90ce303fbd6b574aa164fc70e8 Mon Sep 17 00:00:00 2001
From: Amr Eladawy <amreladawy@mirosoft.com>
Date: Fri, 29 Sep 2023 23:15:29 +0100
Subject: [PATCH 4/4] reverting

---
 .../react-experiments/src/components/Pagination/PageNumber.tsx  | 2 +-
 .../src/components/Pagination/Pagination.base.tsx               | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-experiments/src/components/Pagination/PageNumber.tsx b/packages/react-experiments/src/components/Pagination/PageNumber.tsx
index 36a9ee69dc0acc..94449e29dd288b 100644
--- a/packages/react-experiments/src/components/Pagination/PageNumber.tsx
+++ b/packages/react-experiments/src/components/Pagination/PageNumber.tsx
@@ -14,7 +14,7 @@ export class PageNumber extends React.Component<IPageNumberProps, {}> {
       <DefaultButton
         key={page}
         onClick={this._onClick}
-        aria-checked={selected}
+        aria-selected={selected}
         aria-label={ariaLabel}
         styles={{ root: className }}
         role="radio"
diff --git a/packages/react-experiments/src/components/Pagination/Pagination.base.tsx b/packages/react-experiments/src/components/Pagination/Pagination.base.tsx
index 6c36f801077fdd..b3594da7e63d9d 100644
--- a/packages/react-experiments/src/components/Pagination/Pagination.base.tsx
+++ b/packages/react-experiments/src/components/Pagination/Pagination.base.tsx
@@ -117,7 +117,7 @@ export class PaginationBase extends React.Component<IPaginationProps> {
 
     return (
       <div className={this._classNames.root}>
-        <div role="radiogroup">
+        <div>
           <IconButton
             iconProps={this.props.firstPageIconProps}
             onClick={this._handleFirstPage}