Fix contents list missing ARIA attributes

Author: colinrotherham

src/components/navigation/contents-list/ContentsList.tsx

@@ -6,7 +6,10 @@ interface ContentsListItemProps extends HTMLProps<HTMLAnchorElement> {
 }
 
 const ContentsListItem: FC<ContentsListItemProps> = ({ className, current, ...rest }) => (
-  <li className={classNames('nhsuk-contents-list__item', className)}>
+  <li
+    className={classNames('nhsuk-contents-list__item', className)}
+    aria-current={current ? 'page' : undefined}
+  >
     {current ? (
       <span className="nhsuk-contents-list__current" {...rest} />
     ) : (
@@ -27,10 +30,16 @@ const ContentsListComponent: ContentsListComponent = ({
   className,
   children,
   role = 'navigation',
+  'aria-label': ariaLabel = 'Pages in this guide',
   visuallyHiddenText = 'Contents',
   ...rest
 }) => (
-  <nav className={classNames('nhsuk-contents-list', className)} role={role} {...rest}>
+  <nav
+    className={classNames('nhsuk-contents-list', className)}
+    role={role}
+    aria-label={ariaLabel}
+    {...rest}
+  >
     <h2 className="nhsuk-u-visually-hidden">{visuallyHiddenText}</h2>
     <ol className="nhsuk-contents-list__list">{children}</ol>
   </nav>

src/components/navigation/contents-list/__tests__/__snapshots__/ContentsList.test.tsx.snap

@@ -17,6 +17,7 @@ exports[`ContentsList ContentsList.Item matches snapshot: ContentsList.Item 1`]
 exports[`ContentsList matches snapshot: ContentsList 1`] = `
 <div>
   <nav
+    aria-label="Pages in this guide"
     class="nhsuk-contents-list"
     role="navigation"
   >

stories/Navigation/ContentsList.stories.tsx

@@ -21,7 +21,7 @@ import { Meta, StoryObj } from '@storybook/react';
  * const Element = () => {
  *     return (
  *         <ContentsList aria-label="Pages in this guide">
- *             <ContentsList.Item current aria-current="page">
+ *             <ContentsList.Item current>
  *                 What is AMD?
  *             </ContentsList.Item>
  *             <ContentsList.Item href="https://www.nhs.uk/conditions/age-related-macular-degeneration-amd/symptoms/">
@@ -53,9 +53,7 @@ ContentsList.Item.displayName = 'ContentsList.Item';
 export const Standard: Story = {
   render: (args) => (
     <ContentsList aria-label="Pages in this guide">
-      <ContentsList.Item current aria-current="page">
-        What is AMD?
-      </ContentsList.Item>
+      <ContentsList.Item current>What is AMD?</ContentsList.Item>
       <ContentsList.Item href="https://www.nhs.uk/conditions/age-related-macular-degeneration-amd/symptoms/">
         Symptoms
       </ContentsList.Item>