Merge branch 'main' into DDFBRA-200-anonym-og-indlogget-bruger-kan-pr…

…ove-e-bog
danskernesdigitalebibliotek · Nov 20, 2024 · 94f0a0b · 94f0a0b
2 parents 557c39e + 9c187af
commit 94f0a0b
Show file tree

Hide file tree

Showing 13 changed files with 2,212 additions and 132 deletions.
diff --git a/.github/workflows/accessibility-test.yml b/.github/workflows/accessibility-test.yml
@@ -0,0 +1,42 @@
+# Workflow name
+name: "Accessibility Test"
+
+# Event for the workflow
+on: push
+
+# List of jobs
+jobs:
+  # Run interaction and accessibility tests
+  accessibility:
+    name: Accessibility tests
+
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        # Make sure the actual branch is checked out when running on pull requests.
+        with:
+          ref: ${{ github.head_ref }}
+          fetch-depth: 0 # 👈 Required to retrieve git history
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: ".nvmrc"
+
+      - name: Install dependencies
+        run: yarn
+
+      - name: Install Playwright
+        run: npx playwright install --with-deps
+
+      - name: Build Storybook
+        run: yarn build-storybook --quiet
+
+      - name: Serve Storybook and run tests
+        run: |
+          export FORCE_COLOR=1
+          npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
+            "npx http-server storybook-static --port 6006 --silent" \
+            "npx wait-on tcp:6006 && yarn test-storybook"
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -7,6 +7,7 @@ const config: StorybookConfig = {
     "@storybook/addon-essentials",
     "@chromatic-com/storybook",
     "@storybook/addon-interactions",
+    "@storybook/addon-a11y",
   ],
   framework: {
     name: "@storybook/nextjs",

diff --git a/.storybook/test-runner.ts b/.storybook/test-runner.ts
@@ -0,0 +1,17 @@
+import { checkA11y, injectAxe } from "axe-playwright"
+
+module.exports = {
+  async preVisit(page) {
+    await injectAxe(page)
+  },
+  async postVisit(page) {
+    await checkA11y(page, "#storybook-root", {
+      axeOptions: {},
+      detailedReport: true,
+      detailedReportOptions: {
+        html: true,
+      },
+      verbose: true,
+    })
+  },
+}
diff --git a/app/user/profile/LogoutButton.tsx b/app/user/profile/LogoutButton.tsx
@@ -11,7 +11,9 @@ const LogoutButton = () => {
 
   return (
     <>
-      <Button onClick={() => router.push("/auth/logout")}>Log ud</Button>
+      <Button onClick={() => router.push("/auth/logout")} ariaLabel="Log ud">
+        Log ud
+      </Button>
       <h2 className="mt-5 text-typo-heading-5">Debugging:</h2>
       <div className="mt-3">
         <pre>{JSON.stringify(session, null, 2)}</pre>

diff --git a/components/global/header/Header.tsx b/components/global/header/Header.tsx
@@ -21,7 +21,7 @@ function Header() {
           <DarkModeToggle />
         </div>
         <div className="flex-0 flex justify-end space-x-4 pr-1">
-          <Button variant="icon" aria-label="Tilgå hjælpesiden">
+          <Button variant="icon" ariaLabel="Tilgå hjælpesiden">
             <Icon className="h-[24px] w-[24px]" name="question-mark" />
           </Button>
           <ProfileButton />

diff --git a/components/global/header/ProfileButton.tsx b/components/global/header/ProfileButton.tsx
@@ -23,7 +23,7 @@ const HeaderButton = ({
   asChild?: boolean
   // TODO: Dynamic aria-label.
 }) => (
-  <Button onClick={onClick} variant="icon" aria-label="Login / Tilgå profilsiden" asChild={asChild}>
+  <Button onClick={onClick} variant="icon" ariaLabel="Login / Tilgå profilsiden" asChild={asChild}>
     <Icon className="h-[24px] w-[24px]" name="profile" />
   </Button>
 )
@@ -55,7 +55,9 @@ function ProfileButton() {
                 Log ind med UNI•Login
               </SheetDescription>
               <div>
-                <Button onClick={() => router.push("/auth/login/unilogin")}>LOG IND</Button>
+                <Button onClick={() => router.push("/auth/login/unilogin")} ariaLabel="Log ind">
+                  LOG IND
+                </Button>
               </div>
             </div>
           </SheetHeader>

diff --git a/components/shared/badge/BadgeButton.tsx b/components/shared/badge/BadgeButton.tsx
@@ -7,17 +7,25 @@ type BadgeButtonProps = {
   isActive?: boolean
   classNames?: string
   children: React.ReactNode
+  ariaLabel: string
 }
 
-const BadgeButton = ({ onClick, isActive = false, classNames, children }: BadgeButtonProps) => {
+const BadgeButton = ({
+  onClick,
+  isActive = false,
+  classNames,
+  children,
+  ariaLabel,
+}: BadgeButtonProps) => {
   return (
     <button
       onClick={onClick}
       className={cn(
         `focus-visible h-[28px] w-auto self-start whitespace-nowrap rounded-full bg-background-overlay px-4
         py-2 text-typo-caption hover:animate-wiggle`,
         isActive && "bg-foreground text-background",
-        classNames
+        classNames,
+        ariaLabel
       )}>
       {children}
     </button>

diff --git a/components/shared/button/Button.stories.tsx b/components/shared/button/Button.stories.tsx
@@ -28,6 +28,7 @@ export const Default: Story = {
     },
   },
   args: {
+    ariaLabel: "Prøv Lydbogen",
     variant: "default",
     size: "default",
   },
@@ -48,6 +49,7 @@ export const Small: Story = {
     },
   },
   args: {
+    ariaLabel: "Prøv Lydbogen",
     variant: "default",
     size: "sm",
   },
@@ -66,6 +68,7 @@ export const SmallDark: Story = {
     },
   },
   args: {
+    ariaLabel: "Prøv Lydbogen",
     variant: "default",
     size: "sm",
   },
@@ -85,6 +88,7 @@ export const Medium: Story = {
     },
   },
   args: {
+    ariaLabel: "Prøv Lydbogen",
     variant: "default",
     size: "md",
   },
@@ -103,6 +107,7 @@ export const MediumDark: Story = {
     },
   },
   args: {
+    ariaLabel: "Prøv Lydbogen",
     variant: "default",
     size: "md",
   },
@@ -122,6 +127,7 @@ export const Large: Story = {
     },
   },
   args: {
+    ariaLabel: "Prøv Lydbogen",
     variant: "default",
     size: "lg",
   },
@@ -140,6 +146,7 @@ export const LargeDark: Story = {
     },
   },
   args: {
+    ariaLabel: "Prøv Lydbogen",
     variant: "default",
     size: "lg",
   },
@@ -154,6 +161,7 @@ export const LargeDark: Story = {
 export const IconStory: Story = {
   name: "Icon",
   args: {
+    ariaLabel: "Tilgå hjælpesiden",
     variant: "icon",
   },
   render: args => (
@@ -166,6 +174,7 @@ export const IconStory: Story = {
 export const IconStoryDark: Story = {
   name: "Icon dark",
   args: {
+    ariaLabel: "Tilgå hjælpesiden",
     variant: "icon",
   },
   decorators: [darkModeDecorator],

diff --git a/components/shared/button/Button.tsx b/components/shared/button/Button.tsx
@@ -59,13 +59,19 @@ export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
   asChild?: boolean
+  ariaLabel: string
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
+  ({ className, ariaLabel, variant, size, asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot : "button"
     return (
-      <Comp className={cn(buttonVariants({ variant, size }), className)} ref={ref} {...props} />
+      <Comp
+        className={cn(buttonVariants({ variant, size }), className)}
+        ref={ref}
+        {...props}
+        aria-label={ariaLabel}
+      />
     )
   }
 )

diff --git a/components/shared/searchFilters/SearchFiltersColumn.tsx b/components/shared/searchFilters/SearchFiltersColumn.tsx
@@ -1,6 +1,7 @@
 import React, { useEffect, useRef, useState } from "react"
 
 import { useSearchDataAndLoadingStates } from "@/components/pages/searchPageLayout/helper"
+import { AnimateChangeInHeight } from "@/components/shared/animateChangeInHeight/AnimateChangeInHeight"
 import BadgeButton from "@/components/shared/badge/BadgeButton"
 import Icon from "@/components/shared/icon/Icon"
 import {
@@ -13,8 +14,6 @@ import { cn } from "@/lib/helpers/helper.cn"
 import { TFilters } from "@/lib/machines/search/types"
 import useSearchMachineActor from "@/lib/machines/search/useSearchMachineActor"
 
-import { AnimateChangeInHeight } from "../animateChangeInHeight/AnimateChangeInHeight"
-
 type SearchFiltersColumnProps = {
   facet: SearchFacetFragment
   isLast: boolean
@@ -73,6 +72,7 @@ const SearchFiltersColumn = ({
             {facet.values.map((value, index) => (
               <BadgeButton
                 key={index}
+                ariaLabel={value.term}
                 onClick={() =>
                   actor.send({ type: "TOGGLE_FILTER", name: facet.name, value: value.term })
                 }
@@ -87,14 +87,13 @@ const SearchFiltersColumn = ({
           </div>
           {hasOverflow && (
             <BadgeButton
-              classNames={cn(`w-auto flex flex-row items-center self-start mt-1`)}
+              ariaLabel={isExpanded ? "Vis færre" : "Vis flere"}
+              classNames={cn(`pl-3 w-auto flex flex-row items-center self-start  ml-1`)}
               onClick={() => {
                 setIsExpanded(prev => !prev)
               }}>
               <Icon className={cn("h-8 w-8", isExpanded ? "rotate-180" : "")} name="arrow-down" />
-              <p>
-                {!isExpanded && "Flere"} {isExpanded && "Skjul"}
-              </p>
+              <p>{isExpanded ? "Skjul" : "Flere"}</p>
             </BadgeButton>
           )}
         </AnimateChangeInHeight>

diff --git a/components/shared/searchFilters/SearchFiltersMobile.tsx b/components/shared/searchFilters/SearchFiltersMobile.tsx
@@ -43,7 +43,7 @@ const SearchFiltersMobile = ({ facets }: SearchFiltersMobileProps) => {
           aria-label="Vis filtreringsmuligheder"
           onClick={() => setIsSheetOpen(!isSheetOpen)}
           className="flex flex-row items-center gap-1 text-typo-link">
-          <Button asChild>
+          <Button asChild ariaLabel="VIS FILTRE">
             <div>
               <Icon name="adjust" className="h-[40px]" />
               VIS FILTRE
@@ -62,6 +62,7 @@ const SearchFiltersMobile = ({ facets }: SearchFiltersMobileProps) => {
                       toggleFilter(facet.name, value.term, router)
                     }}
                     key={value.term}
+                    ariaLabel={value.term}
                     isActive
                     classNames="flex flex-row items-center pr-1">
                     {value.term}
@@ -92,7 +93,8 @@ const SearchFiltersMobile = ({ facets }: SearchFiltersMobileProps) => {
                             toggleFilter(facet.name, value.term, router)
                           }}
                           isActive={!!searchParams.getAll(facet.name).includes(value.term)}
-                          key={index}>
+                          key={index}
+                          ariaLabel={value.term}>
                           {value.term}
                         </BadgeButton>
                       ))}

diff --git a/package.json b/package.json
@@ -4,24 +4,25 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "next dev",
-    "dev:https": "next dev --experimental-https",
+    "build-storybook": "storybook build",
     "build": "next build",
-    "start": "next start",
-    "start:with-server-source-maps": "NODE_OPTIONS='--enable-source-maps=true' next start",
-    "lint": "next lint",
-    "format:check": "prettier --check .",
-    "format:write": "prettier --write .",
-    "test:unit": "vitest",
-    "test:unit:once": "vitest run",
-    "typecheck": "tsc --noEmit",
     "ci-check": "yarn typecheck && yarn lint && yarn format:check && yarn test:unit:once",
-    "codegen:graphql": "graphql-codegen --require tsconfig-paths/register --config codegen.ts",
     "codegen:all-rest-services": "orval",
     "codegen:covers": "rm -rf src/lib/rest/cover-service-api/generated/model/*.* && orval --project coverService",
+    "codegen:graphql": "graphql-codegen --require tsconfig-paths/register --config codegen.ts",
     "codegen:publizon": "rm -rf lib/rest/publizon-api/generated/model/*.* && orval --project publizonAdapter",
+    "dev:https": "next dev --experimental-https",
+    "dev": "next dev",
+    "format:check": "prettier --check .",
+    "format:write": "prettier --write .",
+    "lint": "next lint",
+    "start:with-server-source-maps": "NODE_OPTIONS='--enable-source-maps=true' next start",
+    "start": "next start",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "test:accessibility": "test-storybook",
+    "test:unit:once": "vitest run",
+    "test:unit": "vitest",
+    "typecheck": "tsc --noEmit"
   },
   "dependencies": {
     "@next/env": "^14.2.15",
@@ -65,6 +66,7 @@
     "@graphql-codegen/typescript-react-query": "^6.1.0",
     "@next/eslint-plugin-next": "^14.2.13",
     "@parcel/watcher": "^2.4.1",
+    "@storybook/addon-a11y": "^8.4.2",
     "@storybook/addon-essentials": "^8.3.6",
     "@storybook/addon-interactions": "^8.3.6",
     "@storybook/addon-links": "^8.3.6",
@@ -73,6 +75,7 @@
     "@storybook/nextjs": "^8.4.0",
     "@storybook/react": "^8.3.6",
     "@storybook/test": "^8.3.6",
+    "@storybook/test-runner": "^0.19.1",
     "@svgr/webpack": "^8.1.0",
     "@tanstack/react-query-devtools": "^5.59.0",
     "@testing-library/react": "^16.0.1",
@@ -82,8 +85,9 @@
     "@types/react": "^18.3.0",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.2",
+    "axe-playwright": "^2.0.3",
     "eslint": "^8.0.0",
-    "eslint-config-next": "14.2.13",
+    "eslint-config-next": "15.0.2",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-storybook": "^0.10.1",
     "jsdom": "^25.0.1",