Bump typescript from 5.9.3 to 6.0.2 in the lint group across 1 directory

.storybook/storybook.d.ts

@@ -0,0 +1 @@
+declare module '*.scss';

eslint.config.js

@@ -18,11 +18,11 @@ export default defineConfig([
   {
     files: ['**/*.{js,mjs,ts,tsx}'],
     extends: [
-      configPrettier,
       eslint.configs.recommended,
-      pluginTypeScript.configs.recommended,
       pluginImport.flatConfigs.recommended,
       pluginImport.flatConfigs.typescript,
+      pluginTypeScript.configs.recommended,
+      configPrettier,
     ],
     languageOptions: {
       parser: pluginTypeScript.parser,

package.json

@@ -81,13 +81,14 @@
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@types/eslint": "^9.6.1",
+    "@types/eslint-plugin-jsx-a11y": "^6.10.1",
     "@types/jest": "^30.0.0",
     "@types/jest-axe": "^3.5.9",
     "@types/node": "^24.12.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "babel-jest": "^30.3.0",
-    "babel-plugin-module-resolver": "^5.0.2",
+    "babel-plugin-module-resolver": "^5.0.3",
     "babel-plugin-replace-import-extension": "^1.1.5",
     "classnames": "^2.5.1",
     "eslint": "^9.39.4",
@@ -111,8 +112,8 @@
     "sass-embedded": "^1.97.2",
     "storybook": "^10.2.14",
     "tslib": "^2.8.1",
-    "typescript": "^5.9.3",
-    "typescript-eslint": "^8.57.1",
+    "typescript": "^6.0.2",
+    "typescript-eslint": "^8.58.0",
     "vite": "^7.3.1",
     "vite-tsconfig-paths": "^6.1.1"
   },

src/components/form-elements/checkboxes/Checkboxes.tsx

@@ -35,7 +35,7 @@ const CheckboxesComponent = forwardRef<HTMLDivElement, CheckboxesProps>((props,
   const [instance, setInstance] = useState<CheckboxesModule>();
 
   const _boxReferences: string[] = [];
-  let _boxCount: number = 0;
+  let _boxCount = 0;
   let _boxIds: Record<string, string> = {};
 
   useImperativeHandle(forwardedRef, () => moduleRef.current!, [moduleRef]);
@@ -61,7 +61,7 @@ const CheckboxesComponent = forwardRef<HTMLDivElement, CheckboxesProps>((props,
   };
 
   const leaseReference = (): string => {
-    let reference: string = '';
+    let reference = '';
     do {
       reference = generateRandomName();
     } while (_boxReferences.includes(reference));

src/components/form-elements/checkboxes/components/CheckboxesDivider.tsx

@@ -1,8 +1,8 @@
 import { type FC } from 'react';
 
-export type CheckboxesDividerProps = {
+export interface CheckboxesDividerProps {
   dividerText?: string;
-};
+}
 
 export const CheckboxesDivider: FC<CheckboxesDividerProps> = ({ dividerText = 'or' }) => (
   <div className="nhsuk-checkboxes__divider">{dividerText}</div>

src/components/form-elements/date-input/DateInput.tsx

@@ -17,11 +17,11 @@ import { DateInputDay, DateInputMonth, DateInputYear } from './components/index.
 import { FormGroup } from '#components/utils/index.js';
 import { type FormElementProps } from '#util/types/FormTypes.js';
 
-export type DateInputValue = {
+export interface DateInputValue {
   day: string;
   month: string;
   year: string;
-};
+}
 
 export interface DateInputChangeEvent extends Omit<
   ChangeEvent<DateInputElement>,

src/components/form-elements/date-input/DateInputContext.ts

@@ -2,14 +2,14 @@
 
 import { createContext, type ChangeEvent, type ReactElement } from 'react';
 
-export type IDateInputContext = {
+export interface IDateInputContext {
   id: string;
   name: string;
   error: string | ReactElement | undefined;
   value?: { day?: string; month?: string; year?: string };
   defaultValue?: { day?: string; month?: string; year?: string };
   handleChange: (inputType: 'day' | 'month' | 'year', event: ChangeEvent<HTMLInputElement>) => void;
-};
+}
 
 export const DateInputContext = createContext<IDateInputContext>({
   id: '',

src/components/form-elements/radios/Radios.tsx

@@ -35,7 +35,7 @@ const RadiosComponent = forwardRef<HTMLDivElement, RadiosProps>((props, forwarde
   const [instance, setInstance] = useState<RadiosModule>();
   const [selectedRadio, setSelectedRadio] = useState<string>();
 
-  const _radioReferences: Array<string> = [];
+  const _radioReferences: string[] = [];
   let _radioCount = 0;
   let _radioIds: Record<string, string> = {};
 
@@ -63,7 +63,7 @@ const RadiosComponent = forwardRef<HTMLDivElement, RadiosProps>((props, forwarde
   };
 
   const leaseReference = (): string => {
-    let reference: string = '';
+    let reference = '';
     do {
       reference = generateRandomName();
     } while (_radioReferences.includes(reference));

src/components/form-elements/radios/RadiosContext.ts

@@ -2,14 +2,14 @@
 
 import { createContext } from 'react';
 
-export type IRadiosContext = {
+export interface IRadiosContext {
   name: string;
   selectedRadio?: string;
   getRadioId: (reference: string) => string;
   setSelected: (radioRef: string) => void;
   leaseReference: () => string;
   unleaseReference: (reference: string) => void;
-};
+}
 
 export const RadiosContext = createContext<IRadiosContext>({
   name: '',

src/components/navigation/breadcrumb/Breadcrumb.tsx

@@ -14,8 +14,8 @@ const BreadcrumbComponent = forwardRef<HTMLElement, BreadcrumbProps>((props, for
 
   // Split off any "Item" components
   const { ItemChildren, OtherChildren } = Children.toArray(children).reduce<{
-    ItemChildren: Array<ReactNode>;
-    OtherChildren: Array<ReactNode>;
+    ItemChildren: ReactNode[];
+    OtherChildren: ReactNode[];
   }>(
     (prev, child) => {
       if (childIsOfComponentType(child, BreadcrumbItem)) {

src/components/typography/__tests__/Heading.test.tsx

@@ -57,7 +57,7 @@ describe('Heading', () => {
   });
 
   it('console.warn when headingLevel is invalid', () => {
-    const consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+    const consoleSpy = jest.spyOn(console, 'error').mockImplementation();
     // @ts-expect-error - testing invalid prop
     render(<Heading headingLevel="h7" />);
 

src/components/utils/FormGroupContext.ts

@@ -2,10 +2,10 @@
 
 import { createContext } from 'react';
 
-export type IFormGroupContext = {
+export interface IFormGroupContext {
   passError: (componentId: string, error: boolean) => void;
   registerComponent: (componentId: string, deregister?: boolean) => void;
-};
+}
 
 export const FormGroupContext = createContext<IFormGroupContext>({
   passError: () => {},

src/components/utils/__tests__/FormGroup.test.tsx

@@ -202,7 +202,7 @@ describe('FormGroup', () => {
 
     expect(renderProps?.id).toHaveLength(11);
     expect(renderProps?.id).toContain('input');
-    expect(renderProps!['aria-describedby']).toBe(`${renderProps?.id}--error-message`);
+    expect(renderProps?.['aria-describedby']).toBe(`${renderProps?.id}--error-message`);
 
     expect(container.querySelector('.nhsuk-error-message')?.getAttribute('id')).toBe(
       `${renderProps?.id}--error-message`,
@@ -231,7 +231,7 @@ describe('FormGroup', () => {
     );
 
     expect(renderProps?.id).toBe('testID');
-    expect(renderProps!['aria-describedby']).toBe(`testID--error-message`);
+    expect(renderProps?.['aria-describedby']).toBe(`testID--error-message`);
 
     expect(container.querySelector('.nhsuk-error-message')?.getAttribute('id')).toBe(
       'testID--error-message',

src/patterns/nav-a-z/NavAZ.tsx

@@ -8,9 +8,9 @@ const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
 const processLetters = (
   children: ReactNode,
   fullAlphabet: boolean | undefined,
-  removedLetters: Array<string> | undefined,
-  disabledLetters: Array<string> | undefined,
-  letters: Array<string> | undefined,
+  removedLetters: string[] | undefined,
+  disabledLetters: string[] | undefined,
+  letters: string[] | undefined,
 ) => {
   const letterMap = (letter: string) => {
     if (removedLetters && removedLetters.includes(letter)) {
@@ -39,9 +39,9 @@ const processLetters = (
 
 export interface NavAZProps extends ComponentPropsWithoutRef<'div'> {
   fullAlphabet?: boolean;
-  removedLetters?: Array<string>;
-  disabledLetters?: Array<string>;
-  letters?: Array<string>;
+  removedLetters?: string[];
+  disabledLetters?: string[];
+  letters?: string[];
 }
 
 const NavAZComponent = forwardRef<HTMLElement, NavAZProps>((props, forwardedRef) => {

stories/Form Elements/Checkboxes.stories.tsx

@@ -29,11 +29,11 @@ const meta: Meta<typeof Checkboxes> = {
 export default meta;
 type Story = StoryObj<typeof Checkboxes>;
 
-type CheckboxState = {
+interface CheckboxState {
   box1: { name?: string; id?: string };
   box2: { name?: string; id?: string };
   box3: { name?: string; id?: string };
-};
+}
 
 export const Standard: Story = {
   name: 'Checkboxes default',
@@ -838,9 +838,9 @@ export const OnChangeAndOnInputHandlers: Story = {
     },
   },
   render: function OnChangeAndOnInputHandlersRender() {
-    const [changeEventLog, setChangeEventLog] = useState<Array<string>>([]);
-    const [inputEventLog, setInputEventLog] = useState<Array<string>>([]);
-    const [currentValue, setCurrentValue] = useState<Array<string>>([]);
+    const [changeEventLog, setChangeEventLog] = useState<string[]>([]);
+    const [inputEventLog, setInputEventLog] = useState<string[]>([]);
+    const [currentValue, setCurrentValue] = useState<string[]>([]);
 
     const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
       const target = e.target as HTMLInputElement;

tsconfig.base.json

@@ -3,12 +3,15 @@
     "allowJs": true,
     "checkJs": true,
     "esModuleInterop": true,
-    "module": "NodeNext",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
     "noEmit": true,
+    "noImplicitThis": true,
     "noUnusedLocals": true,
     "resolveJsonModule": true,
+    "resolvePackageJsonImports": true,
     "skipLibCheck": true,
-    "strict": false,
+    "strict": true,
     "strictBindCallApply": true,
     "strictFunctionTypes": true,
     "strictNullChecks": true,

tsconfig.build.json

@@ -7,7 +7,6 @@
     "lib": ["ESNext", "DOM"],
     "outDir": "./dist",
     "rootDir": "./src",
-    "strict": true,
     "sourceMap": true,
     "target": "ES2015",
     "types": ["node"]

tsconfig.dev.json

@@ -2,8 +2,6 @@
   "extends": "./tsconfig.base.json",
   "compilerOptions": {
     "jsx": "react-jsxdev",
-    "module": "ESNext",
-    "moduleResolution": "Node",
     "types": ["jest", "node"]
   },
   "include": [