Rename closeButtonLabel

packages/react/src/Alert/Alert.test.tsx

@@ -53,7 +53,7 @@ describe('Alert', () => {
   })
 
   it('renders the close button with a label', () => {
-    const { container } = render(<Alert closeable={true} closeLabel="Close" />)
+    const { container } = render(<Alert closeable={true} closeButtonLabel="Close" />)
 
     const component = container.querySelector(':only-child')
     const closeButton = component?.querySelector('.ams-icon-button')

packages/react/src/Alert/Alert.tsx

@@ -16,7 +16,7 @@ export type AlertProps = {
   /** Whether the alert can be dismissed by the user. Adds a button to the top right. */
   closeable?: boolean
   /** The label for the button that dismisses the Alert. */
-  closeLabel?: string
+  closeButtonLabel?: string
   /**
    * The hierarchical level of the alert title within the document.
    * @default 2
@@ -43,7 +43,7 @@ export const Alert = forwardRef(
       children,
       className,
       closeable,
-      closeLabel = 'Sluiten',
+      closeButtonLabel = 'Sluiten',
       headingLevel = 2,
       onClose,
       severity = 'warning',
@@ -68,7 +68,7 @@ export const Alert = forwardRef(
           )}
           {children}
         </div>
-        {closeable && <IconButton label={closeLabel} size={alertSize} onClick={onClose} />}
+        {closeable && <IconButton label={closeButtonLabel} size={alertSize} onClick={onClose} />}
       </Tag>
     )
   },

packages/react/src/Dialog/Dialog.test.tsx

@@ -83,7 +83,7 @@ describe('Dialog', () => {
   })
 
   it('renders a custom close label', () => {
-    render(<Dialog open closeLabel="Close" />)
+    render(<Dialog open closeButtonLabel="Close" />)
 
     const closeButton = screen.getByText('Close')
 

packages/react/src/Dialog/Dialog.tsx

@@ -13,19 +13,19 @@ export type DialogProps = {
   /** Children for the footer of the dialog, like a save or close button. */
   actions?: ReactNode
   /** The label for the button that dismisses the Dialog. */
-  closeLabel?: string
+  closeButtonLabel?: string
 } & PropsWithChildren<DialogHTMLAttributes<HTMLDialogElement>>
 
 export const Dialog = forwardRef(
   (
-    { actions, children, className, closeLabel = 'Sluiten', title, ...restProps }: DialogProps,
+    { actions, children, className, closeButtonLabel = 'Sluiten', title, ...restProps }: DialogProps,
     ref: ForwardedRef<HTMLDialogElement>,
   ) => (
     <dialog {...restProps} ref={ref} className={clsx('ams-dialog', className)}>
       <form method="dialog" className="ams-dialog__form">
         <header className="ams-dialog__header">
           <Heading size="level-4">{title}</Heading>
-          <IconButton formNoValidate label={closeLabel} size="level-4" />
+          <IconButton formNoValidate label={closeButtonLabel} size="level-4" />
         </header>
         <article className="ams-dialog__article">{children}</article>
         {actions && <footer className="ams-dialog__footer">{actions}</footer>}

packages/react/src/Pagination/Pagination.test.tsx

@@ -100,8 +100,11 @@ describe('Pagination', () => {
 
   it('render custom labels for the "previous" and "next" buttons', () => {
     render(<Pagination totalPages={10} previousLabel="previous" nextLabel="next" />)
-    expect(screen.getByText('previous')).toBeInTheDocument()
-    expect(screen.getByText('next')).toBeInTheDocument()
+    const previousButton = screen.getByRole('button', { name: 'previous' })
+    const nextButton = screen.getByRole('button', { name: 'next' })
+
+    expect(previousButton).toBeInTheDocument()
+    expect(nextButton).toBeInTheDocument()
   })
 
   it('render custom aria-labels for the "previous" and "next" buttons', () => {