A11y: Fix aria attribute for page number and add correct role (#29349)

* 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. * add role="radiogroup" to parent of PageNumber * revert fromating * reverting * Updated role * yarn change * Update @fluentui-react-experiments-57365fad-141e-43e2-9842-f73ce2632d56.json Update change description * Update @fluentui-react-experiments-57365fad-141e-43e2-9842-f73ce2632d56.json Fix typo and wording in change file * update snapshot --------- Co-authored-by: Amr Eladawy <amreladawy@mirosoft.com> Co-authored-by: Ben Howell <48106640+behowell@users.noreply.github.com>
microsoft · Oct 2, 2023 · d310692 · d310692
1 parent 20ce41b
commit d310692
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 8 deletions.
diff --git a/change/@fluentui-react-experiments-57365fad-141e-43e2-9842-f73ce2632d56.json b/change/@fluentui-react-experiments-57365fad-141e-43e2-9842-f73ce2632d56.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix(Pagination): Add radio role for the pagination buttons and radiogroup role for the parent div",
+  "packageName": "@fluentui/react-experiments",
+  "email": "amreladawy@mirosoft.com",
+  "dependentChangeType": "patch"
+}
diff --git 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>

diff --git 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>
+        <div role="radiogroup">
           <IconButton
             iconProps={this.props.firstPageIconProps}
             onClick={this._handleFirstPage}

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
@@ -11,7 +11,9 @@ exports[`Pagination render buttons Pagination correctly 1`] = `
         list-style: none;
       }
 >
-  <div>
+  <div
+    role="radiogroup"
+  >
     <button
       aria-disabled={true}
       aria-label="first page"
@@ -271,8 +273,8 @@ exports[`Pagination render buttons Pagination correctly 1`] = `
       </span>
     </button>
     <button
+      aria-checked={true}
       aria-label="page 1 of 10 selected"
-      aria-selected={true}
       className=
           ms-Button
           ms-Pagination-pageNumber
@@ -359,6 +361,7 @@ exports[`Pagination render buttons Pagination correctly 1`] = `
       onKeyUp={[Function]}
       onMouseDown={[Function]}
       onMouseUp={[Function]}
+      role="radio"
       type="button"
     >
       <span
@@ -377,8 +380,8 @@ exports[`Pagination render buttons Pagination correctly 1`] = `
       </span>
     </button>
     <button
+      aria-checked={false}
       aria-label="page 2 of 10"
-      aria-selected={false}
       className=
           ms-Button
           ms-Pagination-pageNumber
@@ -465,6 +468,7 @@ exports[`Pagination render buttons Pagination correctly 1`] = `
       onKeyUp={[Function]}
       onMouseDown={[Function]}
       onMouseUp={[Function]}
+      role="radio"
       type="button"
     >
       <span
@@ -483,8 +487,8 @@ exports[`Pagination render buttons Pagination correctly 1`] = `
       </span>
     </button>
     <button
+      aria-checked={false}
       aria-label="page 3 of 10"
-      aria-selected={false}
       className=
           ms-Button
           ms-Pagination-pageNumber
@@ -571,6 +575,7 @@ exports[`Pagination render buttons Pagination correctly 1`] = `
       onKeyUp={[Function]}
       onMouseDown={[Function]}
       onMouseUp={[Function]}
+      role="radio"
       type="button"
     >
       <span
@@ -589,8 +594,8 @@ exports[`Pagination render buttons Pagination correctly 1`] = `
       </span>
     </button>
     <button
+      aria-checked={false}
       aria-label="page 4 of 10"
-      aria-selected={false}
       className=
           ms-Button
           ms-Pagination-pageNumber
@@ -677,6 +682,7 @@ exports[`Pagination render buttons Pagination correctly 1`] = `
       onKeyUp={[Function]}
       onMouseDown={[Function]}
       onMouseUp={[Function]}
+      role="radio"
       type="button"
     >
       <span
@@ -695,8 +701,8 @@ exports[`Pagination render buttons Pagination correctly 1`] = `
       </span>
     </button>
     <button
+      aria-checked={false}
       aria-label="page 5 of 10"
-      aria-selected={false}
       className=
           ms-Button
           ms-Pagination-pageNumber
@@ -783,6 +789,7 @@ exports[`Pagination render buttons Pagination correctly 1`] = `
       onKeyUp={[Function]}
       onMouseDown={[Function]}
       onMouseUp={[Function]}
+      role="radio"
       type="button"
     >
       <span