From 0d13eb14fa382a11afc2765f139ff2d2637f9910 Mon Sep 17 00:00:00 2001
From: Lars <74791975+lassopicasso@users.noreply.github.com>
Date: Mon, 13 Feb 2023 15:17:11 +0100
Subject: [PATCH] Summary edit button accessibility  (#926)

* Solved tab accessibility

* Added onclick

* fixed cypress test

---------

Co-authored-by: lassopicasso <lars.walderhaug@digdir.no>
---
 src/components/summary/EditButton.tsx         | 40 +++++--------------
 .../SummaryGroupComponent.test.tsx.snap       | 39 +++++++++---------
 .../MultipleChoiceSummary.test.tsx.snap       | 38 +++++++++---------
 test/e2e/integration/app-frontend/summary.ts  |  8 ++--
 4 files changed, 53 insertions(+), 72 deletions(-)

diff --git a/src/components/summary/EditButton.tsx b/src/components/summary/EditButton.tsx
index 50b8614818..bc993e4cc2 100644
--- a/src/components/summary/EditButton.tsx
+++ b/src/components/summary/EditButton.tsx
@@ -1,45 +1,23 @@
 import * as React from 'react';
 
-import { IconButton, makeStyles, Typography } from '@material-ui/core';
+import { Button, ButtonColor, ButtonVariant } from '@digdir/design-system-react';
+import { Edit } from '@navikt/ds-icons';
 
 export interface IEditButtonProps {
   onClick: () => void;
   editText: string | null;
 }
 
-const useStyles = makeStyles({
-  editButton: {
-    color: 'black',
-    padding: 0,
-  },
-  editIcon: {
-    paddingLeft: '6px',
-    fontSize: '1.125rem !important',
-  },
-  change: {
-    fontSize: '1.125rem',
-    cursor: 'pointer',
-  },
-});
-
 export function EditButton(props: IEditButtonProps) {
-  const classes = useStyles();
-
   return (
-    <IconButton
+    <Button
+      variant={ButtonVariant.Quiet}
+      color={ButtonColor.Secondary}
+      icon={<Edit aria-hidden={true} />}
+      iconPlacement='right'
       onClick={props.onClick}
-      className={classes.editButton}
     >
-      <Typography
-        variant='body1'
-        className={classes.change}
-      >
-        <span>{props.editText}</span>
-        <i
-          aria-hidden='true'
-          className={`fa fa-editing-file ${classes.editIcon}`}
-        />
-      </Typography>
-    </IconButton>
+      {props.editText}
+    </Button>
   );
 }
diff --git a/src/components/summary/__snapshots__/SummaryGroupComponent.test.tsx.snap b/src/components/summary/__snapshots__/SummaryGroupComponent.test.tsx.snap
index 3a0f0ca5db..9268d520b9 100644
--- a/src/components/summary/__snapshots__/SummaryGroupComponent.test.tsx.snap
+++ b/src/components/summary/__snapshots__/SummaryGroupComponent.test.tsx.snap
@@ -19,25 +19,28 @@ exports[`SummaryGroupComponent SummaryGroupComponent -- should match snapshot 1`
       class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-2"
     >
       <button
-        class="MuiButtonBase-root MuiIconButton-root makeStyles-editButton-6"
-        tabindex="0"
+        class="Button-module_button__2ZuB7 Button-module_small__l39oh Button-module_quiet__1KlhF Button-module_secondary__R0waJ"
         type="button"
       >
-        <span
-          class="MuiIconButton-label"
+        Change
+        <svg
+          aria-hidden="true"
+          class="Button-module_icon__-43u5"
+          fill="none"
+          focusable="false"
+          height="1em"
+          role="img"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
         >
-          <p
-            class="MuiTypography-root makeStyles-change-8 MuiTypography-body1"
-          >
-            <span>
-              Change
-            </span>
-            <i
-              aria-hidden="true"
-              class="fa fa-editing-file makeStyles-editIcon-7"
-            />
-          </p>
-        </span>
+          <path
+            clip-rule="evenodd"
+            d="M22.835 1.165a3.976 3.976 0 0 1 0 5.623L8.073 21.549.682 24 0 23.318l2.45-7.392L17.21 1.165a3.977 3.977 0 0 1 5.624 0Zm-4.218 7.029-2.811-2.812L4.188 17l-1.393 4.205 4.207-1.395L18.618 8.194ZM21.43 2.57a1.989 1.989 0 0 0-2.703-.1l-.108.1-1.406 1.406 2.811 2.812 1.406-1.406a1.988 1.988 0 0 0 .101-2.703l-.1-.109Z"
+            fill="currentColor"
+            fill-rule="evenodd"
+          />
+        </svg>
       </button>
     </div>
     <div
@@ -56,7 +59,7 @@ exports[`SummaryGroupComponent SummaryGroupComponent -- should match snapshot 1`
              : 
           </span>
           <span
-            class="makeStyles-data-9"
+            class="makeStyles-data-6"
           >
             1
           </span>
@@ -71,7 +74,7 @@ exports[`SummaryGroupComponent SummaryGroupComponent -- should match snapshot 1`
              : 
           </span>
           <span
-            class="makeStyles-data-9"
+            class="makeStyles-data-6"
           >
             2
           </span>
diff --git a/src/layout/Checkboxes/__snapshots__/MultipleChoiceSummary.test.tsx.snap b/src/layout/Checkboxes/__snapshots__/MultipleChoiceSummary.test.tsx.snap
index 140fbdfb5a..b9a2db1f48 100644
--- a/src/layout/Checkboxes/__snapshots__/MultipleChoiceSummary.test.tsx.snap
+++ b/src/layout/Checkboxes/__snapshots__/MultipleChoiceSummary.test.tsx.snap
@@ -15,28 +15,28 @@ exports[`MultipleChoiceSummary MultipleChoiceSummary 1`] = `
     class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-2"
   >
     <button
-      class="MuiButtonBase-root MuiIconButton-root makeStyles-editButton-6"
-      tabindex="0"
+      class="Button-module_button__2ZuB7 Button-module_small__l39oh Button-module_quiet__1KlhF Button-module_secondary__R0waJ"
       type="button"
     >
-      <span
-        class="MuiIconButton-label"
+      Endre
+      <svg
+        aria-hidden="true"
+        class="Button-module_icon__-43u5"
+        fill="none"
+        focusable="false"
+        height="1em"
+        role="img"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
       >
-        <p
-          class="MuiTypography-root makeStyles-change-8 MuiTypography-body1"
-        >
-          <span>
-            Endre
-          </span>
-          <i
-            aria-hidden="true"
-            class="fa fa-editing-file makeStyles-editIcon-7"
-          />
-        </p>
-      </span>
-      <span
-        class="MuiTouchRipple-root"
-      />
+        <path
+          clip-rule="evenodd"
+          d="M22.835 1.165a3.976 3.976 0 0 1 0 5.623L8.073 21.549.682 24 0 23.318l2.45-7.392L17.21 1.165a3.977 3.977 0 0 1 5.624 0Zm-4.218 7.029-2.811-2.812L4.188 17l-1.393 4.205 4.207-1.395L18.618 8.194ZM21.43 2.57a1.989 1.989 0 0 0-2.703-.1l-.108.1-1.406 1.406 2.811 2.812 1.406-1.406a1.988 1.988 0 0 0 .101-2.703l-.1-.109Z"
+          fill="currentColor"
+          fill-rule="evenodd"
+        />
+      </svg>
     </button>
   </div>
   <div
diff --git a/test/e2e/integration/app-frontend/summary.ts b/test/e2e/integration/app-frontend/summary.ts
index a36824ef0a..45712f16f6 100644
--- a/test/e2e/integration/app-frontend/summary.ts
+++ b/test/e2e/integration/app-frontend/summary.ts
@@ -56,14 +56,14 @@ describe('Summary', () => {
           .children(mui.gridItem)
           .then((items) => {
             cy.wrap(items).should('contain.text', 'a a');
-            cy.wrap(items).find(mui.buttonIcon).should('not.exist');
+            cy.wrap(items).find('button').should('not.exist');
           });
 
         cy.wrap(summary)
           .siblings()
           .contains(mui.gridContainer, texts.dateOfEffect)
           .then((summaryDate) => {
-            cy.wrap(summaryDate).children(mui.gridItem).find(mui.buttonIcon).should('exist').and('be.visible').click();
+            cy.wrap(summaryDate).children(mui.gridItem).find('button').should('exist').and('be.visible').click();
             cy.get(appFrontend.changeOfName.dateOfEffect).clear();
             cy.get(appFrontend.changeOfName.upload).selectFile('test/e2e/fixtures/test.pdf', { force: true });
             cy.get(appFrontend.changeOfName.uploadWithTag.uploadZone).selectFile('test/e2e/fixtures/test.pdf', {
@@ -103,7 +103,7 @@ describe('Summary', () => {
         cy.wrap(summaryDate).contains('button', texts.goToRightPage).should('be.visible').click();
         cy.get(appFrontend.changeOfName.dateOfEffect)
           .siblings()
-          .children(mui.buttonIcon)
+          .children('button')
           .click()
           .then(() => {
             cy.get(mui.selectedDate).parent().click();
@@ -199,7 +199,7 @@ describe('Summary', () => {
       .children(mui.gridItem)
       .should('have.length', 8)
       .then((item) => {
-        cy.wrap(item).find(mui.buttonIcon).should('have.length', 7);
+        cy.wrap(item).find('button').should('have.length', 7);
         cy.wrap(item)
           .eq(1)
           .children(mui.gridContainer)