From edc5bf57ee92978008a55aafd686b16223dc718a Mon Sep 17 00:00:00 2001
From: rare-magma <rare-magma@posteo.eu>
Date: Thu, 12 Oct 2023 15:19:25 +0200
Subject: [PATCH] feat: improve screen reader a11y

Signed-off-by: rare-magma <rare-magma@posteo.eu>
---
 src/App.test.tsx                              |  2 +-
 .../CalculateButton/CalculateButton.test.tsx  | 81 +++++++------------
 .../CalculateButton/CalculateButton.tsx       | 40 ++++-----
 src/components/Chart/Chart.tsx                |  2 +-
 src/components/ErrorModal/ErrorModal.tsx      | 20 +++--
 .../ItemForm/ItemFormGroup.test.tsx           |  2 +-
 src/components/ItemForm/ItemFormGroup.tsx     |  4 +-
 src/components/NavBar/NavBar.tsx              | 22 ++---
 src/components/NavBar/NavBarDelete.tsx        |  4 +-
 src/components/NavBar/NavBarExport.tsx        |  2 +-
 src/components/Notification/Notification.tsx  |  2 +-
 src/components/StatCard/StatCard.tsx          | 16 ++--
 src/components/TableCard/TableCard.tsx        |  4 +-
 13 files changed, 94 insertions(+), 107 deletions(-)

diff --git a/src/App.test.tsx b/src/App.test.tsx
index 539754f..34e8b37 100644
--- a/src/App.test.tsx
+++ b/src/App.test.tsx
@@ -17,7 +17,7 @@ describe("App", () => {
     render(comp);
     expect(screen.getAllByText("guitos")[0]).toBeInTheDocument();
     expect(screen.getByRole("status")).toBeInTheDocument();
-    expect(screen.getByText(/v[0-9.]/)).toBeInTheDocument();
+    expect(screen.getByLabelText("open guitos changelog")).toBeInTheDocument();
     expect(budgetsDB.config("name")).toBe("guitos");
     expect(budgetsDB.config("storeName")).toBe("budgets");
     expect(optionsDB.config("name")).toBe("guitos");
diff --git a/src/components/CalculateButton/CalculateButton.test.tsx b/src/components/CalculateButton/CalculateButton.test.tsx
index 271bbdc..ed73d80 100644
--- a/src/components/CalculateButton/CalculateButton.test.tsx
+++ b/src/components/CalculateButton/CalculateButton.test.tsx
@@ -24,13 +24,13 @@ describe("CalculateButton", () => {
 
   it("renders initial state", () => {
     expect(
-      screen.getByLabelText("select operations to change item value amount"),
+      screen.getByLabelText("select operation type to item value"),
     ).toBeInTheDocument();
   });
 
   it("opens popover when clicking the button", async () => {
     const button = screen.getByRole("button", {
-      name: "select operations to change item value amount",
+      name: "select operation type to item value",
     });
     await userEvent.click(button);
 
@@ -40,20 +40,18 @@ describe("CalculateButton", () => {
       }),
     ).toBeInTheDocument();
 
-    expect(
-      screen.getByLabelText("change item value amount"),
-    ).toBeInTheDocument();
+    expect(screen.getByLabelText("addition")).toBeInTheDocument();
 
     expect(
       screen.getByRole("button", {
-        name: "accept change item value amount",
+        name: "apply change to item value",
       }),
     ).toBeInTheDocument();
   });
 
   it("closes when clicking the button", async () => {
     const button = screen.getByRole("button", {
-      name: "select operations to change item value amount",
+      name: "select operation type to item value",
     });
     await userEvent.click(button);
 
@@ -68,7 +66,7 @@ describe("CalculateButton", () => {
 
   it("closes when pressing Escape key", async () => {
     const button = screen.getByRole("button", {
-      name: "select operations to change item value amount",
+      name: "select operation type to item value",
     });
     await userEvent.click(button);
 
@@ -76,27 +74,21 @@ describe("CalculateButton", () => {
       name: "select type of operation on item value",
     });
 
-    await userEvent.type(
-      screen.getByLabelText("change item value amount"),
-      "{Escape}",
-    );
+    await userEvent.type(screen.getByLabelText("addition"), "{Escape}");
 
     expect(button2).not.toBeInTheDocument();
   });
 
   it("calls onCalculate when accepting change > 0", async () => {
     const button = screen.getByRole("button", {
-      name: "select operations to change item value amount",
+      name: "select operation type to item value",
     });
     await userEvent.click(button);
     const acceptButton = screen.getByRole("button", {
-      name: "accept change item value amount",
+      name: "apply change to item value",
     });
 
-    await userEvent.type(
-      screen.getByLabelText("change item value amount"),
-      "123",
-    );
+    await userEvent.type(screen.getByLabelText("add"), "123");
     await userEvent.click(acceptButton);
 
     expect(onCalculate).toBeCalledWith(123, "add");
@@ -104,78 +96,63 @@ describe("CalculateButton", () => {
 
   it("calls onCalculate when change > 0 and enter is pressed", async () => {
     const button = screen.getByRole("button", {
-      name: "select operations to change item value amount",
+      name: "select operation type to item value",
     });
     await userEvent.click(button);
-    await userEvent.type(
-      screen.getByLabelText("change item value amount"),
-      "123",
-    );
-    await userEvent.type(
-      screen.getByLabelText("change item value amount"),
-      "{enter}",
-    );
+    await userEvent.type(screen.getByLabelText("addition"), "123");
+    await userEvent.type(screen.getByLabelText("addition"), "{enter}");
 
     expect(onCalculate).toBeCalledWith(123, "add");
   });
 
   it("calls onCalculate with sub", async () => {
     const button = screen.getByRole("button", {
-      name: "select operations to change item value amount",
+      name: "select operation type to item value",
     });
     await userEvent.click(button);
     const acceptButton = screen.getByRole("button", {
-      name: "accept change item value amount",
+      name: "apply change to item value",
     });
 
-    await userEvent.type(
-      screen.getByLabelText("change item value amount"),
-      "123",
-    );
+    await userEvent.type(screen.getByLabelText("add"), "123");
 
-    await userEvent.click(screen.getByLabelText("subtract to item value"));
+    await userEvent.click(screen.getByLabelText("subtraction"));
     await userEvent.click(acceptButton);
 
-    expect(onCalculate).toBeCalledWith(123, "sub");
+    expect(onCalculate).toBeCalledWith(123, "subtract");
   });
 
-  it("calls onCalculate with mul", async () => {
+  it("calls onCalculate with multiply", async () => {
     const button = screen.getByRole("button", {
-      name: "select operations to change item value amount",
+      name: "select operation type to item value",
     });
     await userEvent.click(button);
     const acceptButton = screen.getByRole("button", {
-      name: "accept change item value amount",
+      name: "apply change to item value",
     });
 
-    await userEvent.type(
-      screen.getByLabelText("change item value amount"),
-      "123",
-    );
+    await userEvent.type(screen.getByLabelText("add"), "123");
 
-    await userEvent.click(screen.getByLabelText("multiply item value"));
+    await userEvent.click(screen.getByLabelText("multiplication"));
     await userEvent.click(acceptButton);
 
-    expect(onCalculate).toBeCalledWith(123, "mul");
+    expect(onCalculate).toBeCalledWith(123, "multiply");
   });
 
   it("calls onCalculate with div", async () => {
     const button = screen.getByRole("button", {
-      name: "select operations to change item value amount",
+      name: "select operation type to item value",
     });
     await userEvent.click(button);
     const acceptButton = screen.getByRole("button", {
-      name: "accept change item value amount",
+      name: "apply change to item value",
     });
 
-    await userEvent.type(
-      screen.getByLabelText("change item value amount"),
-      "123",
-    );
+    await userEvent.type(screen.getByLabelText("add"), "123");
 
-    await userEvent.click(screen.getByLabelText("divide item value"));
+    await userEvent.click(screen.getByLabelText("division"));
     await userEvent.click(acceptButton);
 
-    expect(onCalculate).toBeCalledWith(123, "div");
+    expect(onCalculate).toBeCalledWith(123, "divide");
   });
 });
diff --git a/src/components/CalculateButton/CalculateButton.tsx b/src/components/CalculateButton/CalculateButton.tsx
index a7c6368..8380483 100644
--- a/src/components/CalculateButton/CalculateButton.tsx
+++ b/src/components/CalculateButton/CalculateButton.tsx
@@ -68,36 +68,36 @@ function CalculateButton({
                     variant="outline-secondary"
                     id="dropdown-operation"
                   >
-                    {operation === "add" && <CgMathPlus />}
-                    {operation === "sub" && <BsDashLg />}
-                    {operation === "mul" && <BsXLg />}
-                    {operation === "div" && <CgMathDivide />}
+                    {operation === "add" && <CgMathPlus aria-hidden />}
+                    {operation === "subtract" && <BsDashLg aria-hidden />}
+                    {operation === "multiply" && <BsXLg aria-hidden />}
+                    {operation === "divide" && <CgMathDivide aria-hidden />}
                   </Dropdown.Toggle>
 
                   <Dropdown.Menu>
                     <Dropdown.Item
-                      aria-label="add to item value"
+                      aria-label="addition"
                       onClick={() => setOperation("add")}
                     >
-                      <CgMathPlus />
+                      <CgMathPlus aria-hidden />
                     </Dropdown.Item>
                     <Dropdown.Item
-                      aria-label="subtract to item value"
-                      onClick={() => setOperation("sub")}
+                      aria-label="subtraction"
+                      onClick={() => setOperation("subtract")}
                     >
-                      <BsDashLg />
+                      <BsDashLg aria-hidden />
                     </Dropdown.Item>
                     <Dropdown.Item
-                      aria-label="multiply item value"
-                      onClick={() => setOperation("mul")}
+                      aria-label="multiplication"
+                      onClick={() => setOperation("multiply")}
                     >
-                      <BsXLg />
+                      <BsXLg aria-hidden />
                     </Dropdown.Item>
                     <Dropdown.Item
-                      aria-label="divide item value"
-                      onClick={() => setOperation("div")}
+                      aria-label="division"
+                      onClick={() => setOperation("divide")}
                     >
-                      <CgMathDivide />
+                      <CgMathDivide aria-hidden />
                     </Dropdown.Item>
                   </Dropdown.Menu>
                 </Dropdown>
@@ -105,7 +105,7 @@ function CalculateButton({
                   id={`${label}-${itemForm.id}-operation-value`}
                   key={`item-${itemForm.id}-operation-value`}
                   className="text-end form-control straight-corners fixed-width-font"
-                  aria-label={"change item value amount"}
+                  aria-label={`${operation}`}
                   name="item-operate-value"
                   intlConfig={intlConfig}
                   defaultValue={0}
@@ -120,7 +120,7 @@ function CalculateButton({
                 <Button
                   id={`item-${itemForm.id}-trigger-operation-button`}
                   key={`${itemForm.id}-trigger-operation-button`}
-                  aria-label={"accept change item value amount"}
+                  aria-label={"apply change to item value"}
                   variant="outline-secondary"
                   type="button"
                   onClick={() => {
@@ -128,7 +128,7 @@ function CalculateButton({
                     opButtonRef?.current?.click();
                   }}
                 >
-                  <BsCheckLg />
+                  <BsCheckLg aria-hidden />
                 </Button>
               </InputGroup>
             </Popover.Body>
@@ -138,7 +138,7 @@ function CalculateButton({
         <Button
           id={`${label}-${itemForm.id}-operate-button`}
           key={`${itemForm.id}-operate-button`}
-          aria-label={"select operations to change item value amount"}
+          aria-label={"select operation type to item value"}
           aria-haspopup="dialog"
           variant="outline-secondary"
           type="button"
@@ -149,7 +149,7 @@ function CalculateButton({
             }, 0);
           }}
         >
-          <BsPlusSlashMinus />
+          <BsPlusSlashMinus aria-hidden />
         </Button>
       </OverlayTrigger>
     </>
diff --git a/src/components/Chart/Chart.tsx b/src/components/Chart/Chart.tsx
index e607e55..f3a5a03 100644
--- a/src/components/Chart/Chart.tsx
+++ b/src/components/Chart/Chart.tsx
@@ -137,7 +137,7 @@ function Chart({
                 disabled
               />
               <InputGroup.Text>
-                <BsPercent />
+                <BsPercent aria-hidden />
               </InputGroup.Text>
             </InputGroup>
           )}
diff --git a/src/components/ErrorModal/ErrorModal.tsx b/src/components/ErrorModal/ErrorModal.tsx
index 7f3e762..50984b6 100644
--- a/src/components/ErrorModal/ErrorModal.tsx
+++ b/src/components/ErrorModal/ErrorModal.tsx
@@ -64,7 +64,7 @@ function ErrorModal({
                 handleShow(false);
               }}
             >
-              <BsXLg />
+              <BsXLg aria-hidden />
             </Button>
           </Modal.Header>
           <Modal.Body className="textarea mx-1">
@@ -87,7 +87,7 @@ function ErrorModal({
             <Button
               data-testid="json-error-close"
               className="align-self-end"
-              aria-label="dismiss error message"
+              aria-label="close error dialog"
               key={"modal-dismiss-button"}
               variant="delete-modal"
               type="button"
@@ -96,7 +96,7 @@ function ErrorModal({
                 handleError();
               }}
             >
-              <BsXLg />
+              <BsXLg aria-hidden />
             </Button>
           </Modal.Header>
           <Modal.Body key="json-error-modal-body">
@@ -110,7 +110,10 @@ function ErrorModal({
                   key={`${jsonError.file}-item-${i}`}
                   eventKey={jsonError.file}
                 >
-                  <Accordion.Header key={`${jsonError.file}-header-${i}`}>
+                  <Accordion.Header
+                    aria-label="file"
+                    key={`${jsonError.file}-header-${i}`}
+                  >
                     {jsonError.file}
                   </Accordion.Header>
                   <Accordion.Body
@@ -146,7 +149,7 @@ function ErrorModal({
               data-testid="csv-error-close"
               className="align-self-end"
               key={"modal-dismiss-button"}
-              aria-label="dismiss error message"
+              aria-label="close error dialog"
               variant="delete-modal"
               type="button"
               onClick={() => {
@@ -154,7 +157,7 @@ function ErrorModal({
                 handleError();
               }}
             >
-              <BsXLg />
+              <BsXLg aria-hidden />
             </Button>
           </Modal.Header>
           <Modal.Body key="csv-error-modal-body">
@@ -168,7 +171,10 @@ function ErrorModal({
                   key={`${csvError.file}-item-${i}`}
                   eventKey={csvError.file}
                 >
-                  <Accordion.Header key={`${csvError.file}-header-${i}`}>
+                  <Accordion.Header
+                    aria-label="file"
+                    key={`${csvError.file}-header-${i}`}
+                  >
                     {csvError.file}
                   </Accordion.Header>
                   <Accordion.Body
diff --git a/src/components/ItemForm/ItemFormGroup.test.tsx b/src/components/ItemForm/ItemFormGroup.test.tsx
index 94c26ff..7fe58ad 100644
--- a/src/components/ItemForm/ItemFormGroup.test.tsx
+++ b/src/components/ItemForm/ItemFormGroup.test.tsx
@@ -80,7 +80,7 @@ describe("ItemFormGroup", () => {
   it("opens popover when clicking the button", async () => {
     await userEvent.click(
       screen.getByRole("button", {
-        name: "select operations to change item value amount",
+        name: "select operation type to item value",
       }),
     );
 
diff --git a/src/components/ItemForm/ItemFormGroup.tsx b/src/components/ItemForm/ItemFormGroup.tsx
index 09596cc..b893aaa 100644
--- a/src/components/ItemForm/ItemFormGroup.tsx
+++ b/src/components/ItemForm/ItemFormGroup.tsx
@@ -177,7 +177,7 @@ function ItemFormGroup({
                     handleRemove(itemForm);
                   }}
                 >
-                  <BsXLg />
+                  <BsXLg aria-hidden />
                 </Button>
               </OverlayTrigger>
             </Popover.Body>
@@ -196,7 +196,7 @@ function ItemFormGroup({
             }, 0);
           }}
         >
-          <BsXLg />
+          <BsXLg aria-hidden />
         </Button>
       </OverlayTrigger>
     </InputGroup>
diff --git a/src/components/NavBar/NavBar.tsx b/src/components/NavBar/NavBar.tsx
index 61c9b9d..90a7251 100644
--- a/src/components/NavBar/NavBar.tsx
+++ b/src/components/NavBar/NavBar.tsx
@@ -271,7 +271,7 @@ function NavBar({
                     tooltipText={"go to older budget"}
                     buttonAriaLabel={"go to older budget"}
                     buttonVariant={"go-button"}
-                    buttonIcon={<BsArrowLeft />}
+                    buttonIcon={<BsArrowLeft aria-hidden />}
                   />
                   <NavBarItem
                     itemClassName={"m-2"}
@@ -280,7 +280,7 @@ function NavBar({
                     tooltipText={"go to newer budget"}
                     buttonAriaLabel={"go to newer budget"}
                     buttonVariant={"go-button"}
-                    buttonIcon={<BsArrowRight />}
+                    buttonIcon={<BsArrowRight aria-hidden />}
                   />
                 </>
               )}
@@ -321,7 +321,6 @@ function NavBar({
 
         <Navbar.Offcanvas
           id={`offcanvasNavbar-expand-md`}
-          aria-labelledby={`offcanvasNavbarLabel-expand-md`}
           placement="end"
           show={expanded}
         >
@@ -334,7 +333,7 @@ function NavBar({
               variant="outline-secondary"
               onClick={() => setExpanded(false)}
             >
-              {<BsXLg />}
+              {<BsXLg aria-hidden />}
             </Button>
           </Offcanvas.Header>
           <Offcanvas.Body className="justify-content-end">
@@ -370,7 +369,7 @@ function NavBar({
                 buttonAriaLabel={"new budget"}
                 buttonClassName="w-100"
                 buttonVariant={"outline-success"}
-                buttonIcon={expanded ? "new" : <BsPlusLg />}
+                buttonIcon={expanded ? "new" : <BsPlusLg aria-hidden />}
               />
               {hasOneOrMoreBudgets && (
                 <>
@@ -382,7 +381,7 @@ function NavBar({
                     buttonAriaLabel={"clone budget"}
                     buttonClassName="w-100"
                     buttonVariant={"outline-success"}
-                    buttonIcon={expanded ? "clone" : <FaRegClone />}
+                    buttonIcon={expanded ? "clone" : <FaRegClone aria-hidden />}
                   />
                   <NavBarDelete
                     deleteButtonRef={deleteButtonRef}
@@ -392,7 +391,7 @@ function NavBar({
                 </>
               )}
 
-              <Nav className="m-2" as="li">
+              <Nav className="m-2">
                 <OverlayTrigger
                   delay={250}
                   placement="bottom"
@@ -414,7 +413,7 @@ function NavBar({
                         importRef.current?.click();
                       }}
                     >
-                      {expanded ? "import" : <BsUpload />}
+                      {expanded ? "import" : <BsUpload aria-hidden />}
                     </Button>
                     <Form.Control
                       data-testid="import-form-control"
@@ -436,10 +435,9 @@ function NavBar({
                     handleExport={handleExport}
                     expanded={expanded}
                   />
-                  <Nav className="m-2">
+                  <Nav className="m-2" aria-label="select currency">
                     <Typeahead
                       id="currency-option-list"
-                      aria-label="select currency option"
                       ref={currencyRef}
                       maxResults={currenciesList.length}
                       maxHeight="30vh"
@@ -478,7 +476,9 @@ function NavBar({
                 buttonClassName="w-100"
                 buttonVariant={"outline-info"}
                 buttonLink="https://github.com/rare-magma/guitos#getting-started"
-                buttonIcon={expanded ? "instructions" : <BsQuestionLg />}
+                buttonIcon={
+                  expanded ? "instructions" : <BsQuestionLg aria-hidden />
+                }
                 target="_blank"
               />
               <OverlayTrigger
diff --git a/src/components/NavBar/NavBarDelete.tsx b/src/components/NavBar/NavBarDelete.tsx
index 69f583e..fdc0693 100644
--- a/src/components/NavBar/NavBarDelete.tsx
+++ b/src/components/NavBar/NavBarDelete.tsx
@@ -48,7 +48,7 @@ export function NavBarDelete({
                     budget?.id && handleRemove(budget.id);
                   }}
                 >
-                  {expanded ? "delete budget" : <BsXLg />}
+                  {expanded ? "delete budget" : <BsXLg aria-hidden />}
                 </Button>
               </OverlayTrigger>
             </Popover.Body>
@@ -65,7 +65,7 @@ export function NavBarDelete({
             }, 0);
           }}
         >
-          {expanded ? "delete" : <BsXLg />}
+          {expanded ? "delete" : <BsXLg aria-hidden />}
         </Button>
       </OverlayTrigger>
     </Nav>
diff --git a/src/components/NavBar/NavBarExport.tsx b/src/components/NavBar/NavBarExport.tsx
index 19a2477..5bc0513 100644
--- a/src/components/NavBar/NavBarExport.tsx
+++ b/src/components/NavBar/NavBarExport.tsx
@@ -90,7 +90,7 @@ export function NavBarExport({
             }, 0);
           }}
         >
-          {expanded ? "export" : <BsDownload />}
+          {expanded ? "export" : <BsDownload aria-hidden />}
         </Button>
       </OverlayTrigger>
     </Nav>
diff --git a/src/components/Notification/Notification.tsx b/src/components/Notification/Notification.tsx
index 7348203..aeda851 100644
--- a/src/components/Notification/Notification.tsx
+++ b/src/components/Notification/Notification.tsx
@@ -39,7 +39,7 @@ function Notification({ notification, onShow }: NotificationProps) {
           variant="outline-secondary"
           onClick={() => onShow()}
         >
-          {<BsX />}
+          {<BsX aria-hidden />}
         </Button>
       </Toast.Body>
     </Toast>
diff --git a/src/components/StatCard/StatCard.tsx b/src/components/StatCard/StatCard.tsx
index 697e3cb..75ec1f6 100644
--- a/src/components/StatCard/StatCard.tsx
+++ b/src/components/StatCard/StatCard.tsx
@@ -95,6 +95,9 @@ function StatCard({ onChange, onAutoGoal, onShowGraphs }: StatCardProps) {
             <Col className="align-self-center">
               Statistics
               <ProgressBar
+                role="progressbar"
+                aria-label="percentage of revenue spent"
+                aria-valuetext={`${revenuePercentage}%`}
                 min={0}
                 max={100}
                 now={revenuePercentage}
@@ -122,7 +125,7 @@ function StatCard({ onChange, onAutoGoal, onShowGraphs }: StatCardProps) {
                   handleShowGraphs();
                 }}
               >
-                <BsGraphUp />
+                <BsGraphUp aria-hidden />
               </Button>
             </OverlayTrigger>
           </Col>
@@ -161,16 +164,16 @@ function StatCard({ onChange, onAutoGoal, onShowGraphs }: StatCardProps) {
               </Tooltip>
             }
           >
-            <InputGroup.Text>
+            <InputGroup.Text aria-label="percentage of revenue available">
               {shouldCalculateAvailablePerc ? 100 - revenuePercentage : 0}
-
-              <BsPercent />
+              <BsPercent aria-hidden />
             </InputGroup.Text>
           </OverlayTrigger>
         </InputGroup>
         <InputGroup className="mb-1" key={"withGoal"}>
           <InputGroup.Text>
             <svg
+              aria-hidden
               xmlns="http://www.w3.org/2000/svg"
               width="16"
               height="16"
@@ -233,7 +236,7 @@ function StatCard({ onChange, onAutoGoal, onShowGraphs }: StatCardProps) {
                 handleAutoGoal();
               }}
             >
-              <BsGear />
+              <BsGear aria-hidden />
             </Button>
           </OverlayTrigger>
           <Form.Control
@@ -253,12 +256,13 @@ function StatCard({ onChange, onAutoGoal, onShowGraphs }: StatCardProps) {
             }}
           />
           <InputGroup.Text>
-            <BsPercent />
+            <BsPercent aria-hidden />
           </InputGroup.Text>
         </InputGroup>
         <InputGroup className="mb-1" key={"saved"}>
           <InputGroup.Text>
             <svg
+              aria-hidden
               xmlns="http://www.w3.org/2000/svg"
               width="16"
               height="16"
diff --git a/src/components/TableCard/TableCard.tsx b/src/components/TableCard/TableCard.tsx
index b0ba00d..7c26533 100644
--- a/src/components/TableCard/TableCard.tsx
+++ b/src/components/TableCard/TableCard.tsx
@@ -146,7 +146,7 @@ function TableCard({
           <Row>
             <Col>{label}</Col>
             <Col className="text-end fixed-width-font">
-              <div>
+              <div aria-label="total amount">
                 {intlConfig?.currency &&
                   intlFormat(roundBig(Big(total), 2), intlConfig?.currency)}
               </div>
@@ -197,7 +197,7 @@ function TableCard({
               name=""
               value=""
             >
-              <BsPlusLg />
+              <BsPlusLg aria-hidden />
             </Button>
           </OverlayTrigger>
         </div>