refactor: Change to aria-labelledby, update stories

navikt · Jun 5, 2024 · bf9a269 · bf9a269
1 parent 8a47195
commit bf9a269
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 14 deletions.
diff --git a/@navikt/core/css/pagination.css b/@navikt/core/css/pagination.css
@@ -8,7 +8,6 @@
   list-style: none;
   display: flex;
   gap: var(--a-spacing-3);
-  position: relative;
 }
 
 .navds-pagination__ellipsis {

diff --git a/@navikt/core/react/src/pagination/Pagination.tsx b/@navikt/core/react/src/pagination/Pagination.tsx
@@ -126,7 +126,7 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
       size = "medium",
       prevNextTexts = false,
       srHeading,
-      "aria-describedby": ariaDescribedBy,
+      "aria-labelledby": ariaLabelledBy,
       renderItem: Item = (item: PaginationItemProps) => (
         <PaginationItem {...item} />
       ),
@@ -157,8 +157,8 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
       <nav
         ref={ref}
         {...rest}
-        aria-describedby={
-          srHeading ? cl(headingId, ariaDescribedBy) : ariaDescribedBy
+        aria-labelledby={
+          srHeading ? cl(headingId, ariaLabelledBy) : ariaLabelledBy
         }
         className={cl(
           "navds-pagination",

diff --git a/@navikt/core/react/src/pagination/pagination.stories.tsx b/@navikt/core/react/src/pagination/pagination.stories.tsx
@@ -11,8 +11,8 @@ const meta: Meta<typeof Pagination> = {
     size: {
       control: {
         type: "radio",
-        options: ["medium", "small", "xsmall"],
       },
+      options: ["medium", "small", "xsmall"],
     },
   },
   parameters: {
@@ -26,12 +26,11 @@ type Story = StoryObj<typeof Pagination>;
 type StoryFunction = StoryFn<typeof Pagination>;
 
 export const Default: StoryFunction = (props) => {
-  const [page, setPage] = useState(props.page);
+  const [page, setPage] = useState(2);
   return <Pagination {...props} page={page} onPageChange={setPage} />;
 };
 
 Default.args = {
-  page: 2,
   count: 8,
   siblingCount: 1,
   boundaryCount: 1,
@@ -62,7 +61,6 @@ export const PrevNextText: StoryFunction = (props) => {
 };
 
 PrevNextText.args = {
-  page: 2,
   count: 8,
   siblingCount: 1,
   boundaryCount: 1,
@@ -77,7 +75,6 @@ export const Small: StoryFunction = (props) => {
 };
 
 Small.args = {
-  page: 1,
   count: 8,
   siblingCount: 1,
   boundaryCount: 1,
@@ -91,7 +88,6 @@ export const XSmall: StoryFunction = (props) => {
 };
 
 XSmall.args = {
-  page: 1,
   count: 8,
   siblingCount: 1,
   boundaryCount: 1,
@@ -115,14 +111,13 @@ export const Heading: StoryFunction = (props) => {
 };
 
 Heading.args = {
-  page: 1,
   count: 8,
   siblingCount: 1,
   boundaryCount: 1,
 };
 
 export const AsLink: StoryFunction = (props) => {
-  const [page, setPage] = useState(1);
+  const [page, setPage] = useState(2);
   return (
     <Pagination
       {...props}
@@ -136,7 +131,6 @@ export const AsLink: StoryFunction = (props) => {
 };
 
 AsLink.args = {
-  page: 1,
   count: 8,
   siblingCount: 1,
   boundaryCount: 1,
@@ -189,5 +183,5 @@ export const Chromatic: Story = {
       </Router>
     ),
   ],
-  args: { page: 2, count: 8, siblingCount: 1, boundaryCount: 1 },
+  args: { count: 8, siblingCount: 1, boundaryCount: 1 },
 };