@madie/madie-design-system 1.0.22 → 1.0.23

package/components/MadieDialog/index.jsx

@@ -194,7 +194,7 @@ const MadieDialog = ({
                             {title}
                         </DialogTitle>
                         <div>
-                            <IconButton onClick={onClose}>
+                            <IconButton onClick={onClose} aria-label="Close">
                                 <CloseIcon
                                     sx={{
                                         color: "#242424",

package/components/Pagination/Pagination.stories.js

@@ -0,0 +1,29 @@
+import React from "react";
+
+import { Pagination } from "./index";
+
+export default {
+    title: "Pagination",
+    component: Pagination,
+};
+
+export const Default = () => (
+    <Pagination
+        totalItems={30}
+        visibleItems={10}
+        count={30}
+        offset={0}
+        shape="rounded"
+        page={0}
+        limit={10}
+        limitOptions={[10, 25, 50]}
+        handlePageChange={(e, v) => {
+            console.log(e, v);
+        }}
+        handleLimitChange={(e, v) => {
+            console.log(e, v);
+        }}
+        hideNextButton={true}
+        hidePrevButton={false}
+    />
+);

package/components/Pagination/index.jsx

@@ -63,6 +63,7 @@ const Pagination = ({
                     sx={{
                         color: "#333333",
                     }}
+                    id="items-per-page"
                 >
                     Items per page
                 </Typography>
@@ -85,6 +86,10 @@ const Pagination = ({
                     value={limit}
                     label={null}
                     onChange={handleLimitChange}
+                    inputProps={{
+                        "aria-labelledby": "items-per-page",
+                        "aria-describedby": "offset-of-total-items"
+                    }}
                 >
                     {limitOptions.map((val) => (
                         <MenuItem
@@ -98,6 +103,7 @@ const Pagination = ({
                 </Select>
                 <Typography
                     fontSize={14}
+                    id="offset-of-total-items"
                     sx={{
                         color: "#757575",
                     }}