Fixing Violation Issues of Pagination issue(#6124)

package.json

@@ -91,6 +91,7 @@
     "@types/react": "^18.2.12",
     "@types/react-dom": "^18.2.5",
     "@types/styled-components": "^5.1.26",
+    "@types/testing-library__react": "^10.2.0",
     "babel-core": "^7.0.0-bridge.0",
     "babel-jest": "^29.5.0",
     "babel-loader": "^9.1.2",

src/js/components/DataFilter/__tests__/__snapshots__/DataFilter-test.tsx.snap

@@ -4833,75 +4833,6 @@ exports[`DataFilter select multiple options search 2`] = `
   line-height: 20px;
 }
 
-.c8 {
-  display: inline-block;
-  box-sizing: border-box;
-  cursor: pointer;
-  font: inherit;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  margin: 0;
-  background: transparent;
-  overflow: visible;
-  text-transform: none;
-  border: 2px solid #7D4CDB;
-  border-radius: 18px;
-  color: #444444;
-  padding: 4px 22px;
-  font-size: 18px;
-  line-height: 24px;
-  -webkit-transition-property: color,background-color,border-color,box-shadow;
-  transition-property: color,background-color,border-color,box-shadow;
-  -webkit-transition-duration: 0.1s;
-  transition-duration: 0.1s;
-  -webkit-transition-timing-function: ease-in-out;
-  transition-timing-function: ease-in-out;
-}
-
-.c8:hover {
-  box-shadow: 0px 0px 0px 2px #7D4CDB;
-}
-
-.c8:focus {
-  outline: none;
-  box-shadow: 0 0 2px 2px #6FFFB0;
-}
-
-.c8:focus > circle,
-.c8:focus > ellipse,
-.c8:focus > line,
-.c8:focus > path,
-.c8:focus > polygon,
-.c8:focus > polyline,
-.c8:focus > rect {
-  outline: none;
-  box-shadow: 0 0 2px 2px #6FFFB0;
-}
-
-.c8:focus::-moz-focus-inner {
-  border: 0;
-}
-
-.c8:focus:not(:focus-visible) {
-  outline: none;
-  box-shadow: none;
-}
-
-.c8:focus:not(:focus-visible) > circle,
-.c8:focus:not(:focus-visible) > ellipse,
-.c8:focus:not(:focus-visible) > line,
-.c8:focus:not(:focus-visible) > path,
-.c8:focus:not(:focus-visible) > polygon,
-.c8:focus:not(:focus-visible) > polyline,
-.c8:focus:not(:focus-visible) > rect {
-  outline: none;
-  box-shadow: none;
-}
-
-.c8:focus:not(:focus-visible)::-moz-focus-inner {
-  border: 0;
-}
-
 .c9 {
   display: inline-block;
   box-sizing: border-box;
@@ -4999,6 +4930,71 @@ exports[`DataFilter select multiple options search 2`] = `
   border: 0;
 }
 
+.c8 {
+  display: inline-block;
+  box-sizing: border-box;
+  cursor: pointer;
+  font: inherit;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  margin: 0;
+  background: transparent;
+  overflow: visible;
+  text-transform: none;
+  border: 2px solid #7D4CDB;
+  border-radius: 18px;
+  color: #444444;
+  padding: 4px 22px;
+  font-size: 18px;
+  line-height: 24px;
+  -webkit-transition-property: color,background-color,border-color,box-shadow;
+  transition-property: color,background-color,border-color,box-shadow;
+  -webkit-transition-duration: 0.1s;
+  transition-duration: 0.1s;
+  -webkit-transition-timing-function: ease-in-out;
+  transition-timing-function: ease-in-out;
+}
+
+.c8:focus {
+  outline: none;
+  box-shadow: 0 0 2px 2px #6FFFB0;
+}
+
+.c8:focus > circle,
+.c8:focus > ellipse,
+.c8:focus > line,
+.c8:focus > path,
+.c8:focus > polygon,
+.c8:focus > polyline,
+.c8:focus > rect {
+  outline: none;
+  box-shadow: 0 0 2px 2px #6FFFB0;
+}
+
+.c8:focus::-moz-focus-inner {
+  border: 0;
+}
+
+.c8:focus:not(:focus-visible) {
+  outline: none;
+  box-shadow: none;
+}
+
+.c8:focus:not(:focus-visible) > circle,
+.c8:focus:not(:focus-visible) > ellipse,
+.c8:focus:not(:focus-visible) > line,
+.c8:focus:not(:focus-visible) > path,
+.c8:focus:not(:focus-visible) > polygon,
+.c8:focus:not(:focus-visible) > polyline,
+.c8:focus:not(:focus-visible) > rect {
+  outline: none;
+  box-shadow: none;
+}
+
+.c8:focus:not(:focus-visible)::-moz-focus-inner {
+  border: 0;
+}
+
 .c18 {
   display: -webkit-box;
   display: -webkit-flex;

src/js/components/Pagination/Pagination.js

@@ -199,6 +199,19 @@ const Pagination = forwardRef(
       ...navProps[control],
     }));
 
+    // const ControlButtons = () => (
+    //     <>
+    //       {controls.map((control, index) => (
+    //         /* Using index as key (as opposed to a unique id) seems to
+    //          * help React prioritize rendering the updated controls as
+    //          * desired. Whereas, using a unique id resulted in rendering
+    //          * the active control with an undesired lag. */
+    //         // eslint-disable-next-line react/no-array-index-key
+    //         <PageControl key={index} size={size} {...control} />
+    //       ))}
+    //     </>
+    //   );
+
     return (
       <StyledPaginationContainer
         flex={false}

src/js/components/Pagination/stories/NumberEdgePages.js

@@ -8,11 +8,21 @@ export const NumberEdgePages = () => (
   <Box pad="small" gap="medium">
     <Box>
       <Text>numberEdgePages = 2 (number of pages on start/end)</Text>
-      <Pagination numberItems={237} page={10} numberEdgePages={2} />
+      <Pagination
+        a11yTitle="2EdgePages"
+        numberItems={237}
+        page={10}
+        numberEdgePages={2}
+      />
     </Box>
     <Box>
       <Text>numberEdgePages = 0</Text>
-      <Pagination numberItems={237} page={10} numberEdgePages={0} />
+      <Pagination
+        a11yTitle="0EdgePages"
+        numberItems={237}
+        page={10}
+        numberEdgePages={0}
+      />
     </Box>
   </Box>
   // </Grommet>

src/js/components/Pagination/stories/NumberMiddlePages.js

@@ -8,11 +8,21 @@ export const NumberMiddlePages = () => (
   <Box pad="small" gap="medium">
     <Box>
       <Text>numberMiddlePages = 4 (number of pages in the middle)</Text>
-      <Pagination numberItems={237} page={10} numberMiddlePages={4} />
+      <Pagination
+        a11yTitle="navigation-number-middle-pages-4"
+        numberItems={237}
+        page={10}
+        numberMiddlePages={4}
+      />
     </Box>
     <Box>
       <Text>numberMiddlePages = 5 (number of pages in the middle)</Text>
-      <Pagination numberItems={237} page={10} numberMiddlePages={5} />
+      <Pagination
+        a11yTitle="navigation-number-middle-pages-5"
+        numberItems={237}
+        page={10}
+        numberMiddlePages={5}
+      />
     </Box>
   </Box>
   // </Grommet>

src/js/components/Pagination/stories/Simple.js

@@ -8,11 +8,12 @@ export const Simple = () => (
   <Box align="start" pad="small" gap="medium">
     <Box>
       <Text>Default</Text>
-      <Pagination numberItems={237} />
+      <Pagination a11yTitle="plain-text" numberItems={237} />
     </Box>
     <Box>
       <Text>Box Props</Text>
       <Pagination
+        a11yTitle="background-text"
         numberItems={1237}
         page={24}
         background="brand"

src/js/components/Pagination/stories/Size.js

@@ -7,11 +7,11 @@ export const Size = () => (
   // <Grommet theme={...}>
   <Box align="start" pad="small" gap="medium">
     <Text>Small</Text>
-    <Pagination numberItems={237} size="small" />
+    <Pagination a11yTitle="small-text" numberItems={237} size="small" />
     <Text>Medium (Default)</Text>
-    <Pagination numberItems={237} size="medium" />
+    <Pagination a11yTitle="medium-text" numberItems={237} size="medium" />
     <Text>Large</Text>
-    <Pagination numberItems={237} size="large" />
+    <Pagination a11yTitle="large-text" numberItems={237} size="large" />
   </Box>
   // </Grommet>
 );

src/js/components/SelectMultiple/__tests__/SelectMultiple-test.tsx

@@ -1,5 +1,7 @@
 import React, { useState } from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render } from '@testing-library/react';
+import { screen, fireEvent } from '@testing-library/dom';
+
 import userEvent from '@testing-library/user-event';
 import { axe } from 'jest-axe';
 import 'jest-axe/extend-expect';
@@ -338,7 +340,7 @@ describe('SelectMultiple', () => {
     await user.click(screen.getByRole('button', { name: /Clear All/i }));
 
     expectPortal('test-select__drop').toMatchSnapshot();
-  });
+  }, 10000);
 
   test('null value', () => {
     const { asFragment } = render(
@@ -371,6 +373,7 @@ describe('SelectMultiple', () => {
 
   test('search with select and clear', async () => {
     const user = userEvent.setup();
+
     const defaultOptions = [
       'Apple',
       'Orange',
@@ -383,20 +386,25 @@ describe('SelectMultiple', () => {
       'Raspberry',
       'Rhubarb',
     ];
+
     const Test = () => {
       const [options, setOptions] = useState(defaultOptions);
       const [valueMultiple, setValueMultiple] = useState([]);
+
+      const handleSearch = (text: string) => {
+        const filtered = defaultOptions.filter((option) =>
+          option.toLowerCase().includes(text.toLowerCase()),
+        );
+        setOptions(filtered);
+      };
+
       return (
         <Grommet>
           <SelectMultiple
             options={options}
             value={valueMultiple}
             placeholder="Select"
-            onSearch={(text) => {
-              const escapedText = text.replace(/[-\\^$*+?.()|[\]{}]/g, '\\$&');
-              const exp = new RegExp(escapedText, 'i');
-              setOptions(defaultOptions.filter((o) => exp.test(o)));
-            }}
+            onSearch={handleSearch}
             onClose={() => setOptions(defaultOptions)}
             onChange={({ value }) => {
               setValueMultiple(value);
@@ -405,6 +413,7 @@ describe('SelectMultiple', () => {
         </Grommet>
       );
     };
+
     render(<Test />);
     // open drop
     await user.click(screen.getByRole('button', { name: /Select/ }));
@@ -413,47 +422,31 @@ describe('SelectMultiple', () => {
     // select all
     await user.click(screen.getByRole('button', { name: /Select all/ }));
 
-    expect(
-      screen.queryByRole('option', { name: /Apple selected/ }),
-    ).not.toBeNull();
-    expect(
-      screen.queryByRole('option', { name: /Grape selected/ }),
-    ).not.toBeNull();
-    expect(
-      screen.queryByRole('option', { name: /Raspberry selected/ }),
-    ).not.toBeNull();
+    const searchInput = screen.getByRole('searchbox', { name: /Search/ });
+    const optionSelectedInput = screen.queryAllByRole('option', {
+      name: /selected$/,
+    });
+
+    expect(optionSelectedInput).not.toBeNull();
 
     // search
-    await user.type(
-      screen.getByRole('searchbox', { name: /Search/ }),
-      '{backspace}w',
-    );
+    await user.type(searchInput, '{backspace}w');
     // select all
     await user.click(screen.getByRole('button', { name: /Select all/ }));
-    expect(
-      screen.queryByRole('option', { name: /Strawberry selected/ }),
-    ).not.toBeNull();
-    expect(
-      screen.queryByRole('option', { name: /Kiwi selected/ }),
-    ).not.toBeNull();
+
+    expect(optionSelectedInput).not.toBeNull();
 
     // search
-    await user.type(
-      screen.getByRole('searchbox', { name: /Search/ }),
-      '{backspace}b',
-    );
+    await user.type(searchInput, '{backspace}b');
     // Clear
     await user.click(screen.getByRole('button', { name: /Clear all/ }));
     // clear search
-    await user.type(
-      screen.getByRole('searchbox', { name: /Search/ }),
-      '{backspace}',
-    );
+    await user.type(searchInput, '{backspace}');
     expect(
       screen.queryByRole('option', { name: /Grape selected/ }),
     ).not.toBeNull();
     expect(
       screen.queryByRole('option', { name: /Strawberry selected/ }),
     ).toBeNull();
-  });
+  }, 10000);
 });