From e444332cf87ed267d811cb8996f28012cf603216 Mon Sep 17 00:00:00 2001
From: alex-slobodian <alexx.slobodyan@gmail.com>
Date: Fri, 24 May 2024 13:34:08 +0300
Subject: [PATCH] Improve providers list accessibility

---
 .../CertificatesProvidersListItem.tsx         | 11 ++++--
 .../styles/index.module.scss                  | 13 ++++---
 .../CertificatesProvidersList.stories.tsx     | 38 +++++++++++++++++++
 .../CertificatesProvidersList.tsx             |  2 +-
 .../styles/index.module.scss                  |  2 +-
 src/icons/provider.svg                        |  6 +--
 src/icons/smartcard.svg                       |  4 ++
 7 files changed, 63 insertions(+), 13 deletions(-)
 create mode 100644 src/components/certificates-providers-list/CertificatesProvidersList.stories.tsx
 create mode 100644 src/icons/smartcard.svg

diff --git a/src/components/certificates-providers-list-item/CertificatesProvidersListItem.tsx b/src/components/certificates-providers-list-item/CertificatesProvidersListItem.tsx
index 07a3c763..6dd9b6bd 100644
--- a/src/components/certificates-providers-list-item/CertificatesProvidersListItem.tsx
+++ b/src/components/certificates-providers-list-item/CertificatesProvidersListItem.tsx
@@ -4,10 +4,11 @@ import { useTranslation } from "react-i18next";
 import clsx from "clsx";
 import { Typography } from "@peculiar/react-components";
 import ProviderIcon from "../../icons/provider.svg?react";
+import SmartcardIcon from "../../icons/smartcard.svg?react";
 import styles from "./styles/index.module.scss";
 
 interface CertificatesProvidersListItemProps {
-  provider: IProviderInfo;
+  provider: Pick<IProviderInfo, "id" | "name" | "isRemovable" | "readOnly">;
   isSelected: boolean;
   onClick: (id: string) => void;
 }
@@ -20,15 +21,19 @@ export const CertificatesProvidersListItem: React.FunctionComponent<
 
   return (
     <li
+      tabIndex={0}
       className={clsx(styles.list_item, {
         [styles.current_list_item]: isSelected,
       })}
       onClick={() => {
-        onClick && onClick(provider.id);
+        onClick(provider.id);
       }}
+      onKeyDown={(event) =>
+        ["Enter"].includes(event.code) && onClick(provider.id)
+      }
     >
       <div className={styles.list_item_icon_wrapper}>
-        <ProviderIcon />
+        {provider.isRemovable ? <SmartcardIcon /> : <ProviderIcon />}
       </div>
       <div className={styles.list_item_name_wrapper}>
         <Typography
diff --git a/src/components/certificates-providers-list-item/styles/index.module.scss b/src/components/certificates-providers-list-item/styles/index.module.scss
index e3582145..4553678b 100644
--- a/src/components/certificates-providers-list-item/styles/index.module.scss
+++ b/src/components/certificates-providers-list-item/styles/index.module.scss
@@ -11,6 +11,7 @@
     display: flex;
     flex-direction: column;
     justify-content: center;
+    color: var(--pv-color-gray-9);
     svg {
       width: var(--pv-size-base-6);
       height: var(--pv-size-base-6);
@@ -39,11 +40,13 @@
     background-color: var(--pv-color-primary-tint-5);
     cursor: default;
 
-    .list_item_icon_wrapper svg circle {
-      fill: var(--pv-color-primary);
-    }
-    .list_item_icon_wrapper svg path {
-      stroke: var(--pv-color-primary);
+    .list_item_icon_wrapper {
+      color: var(--pv-color-primary);
     }
   }
+
+  &:focus-visible {
+    outline: 1px solid var(--pv-color-primary);
+    z-index: 1;
+  }
 }
diff --git a/src/components/certificates-providers-list/CertificatesProvidersList.stories.tsx b/src/components/certificates-providers-list/CertificatesProvidersList.stories.tsx
new file mode 100644
index 00000000..e8d90334
--- /dev/null
+++ b/src/components/certificates-providers-list/CertificatesProvidersList.stories.tsx
@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+import { CertificatesProvidersList } from "./CertificatesProvidersList";
+
+const meta: Meta<typeof CertificatesProvidersList> = {
+  title: "Components/CertificatesProvidersList",
+  component: CertificatesProvidersList,
+};
+
+export default meta;
+type Story = StoryObj<typeof CertificatesProvidersList>;
+
+export const Default: Story = {
+  args: {
+    currentProviderId: "1",
+    providers: [
+      {
+        id: "1",
+        name: "Provider 1",
+        isRemovable: false,
+        readOnly: true,
+      },
+      {
+        id: "2",
+        name: "Provider 2",
+        isRemovable: false,
+        readOnly: true,
+      },
+      {
+        id: "3",
+        name: "Smartcard",
+        isRemovable: true,
+        readOnly: true,
+      },
+    ],
+    onSelect: fn(),
+  },
+};
diff --git a/src/components/certificates-providers-list/CertificatesProvidersList.tsx b/src/components/certificates-providers-list/CertificatesProvidersList.tsx
index e693fa2c..d3e20375 100644
--- a/src/components/certificates-providers-list/CertificatesProvidersList.tsx
+++ b/src/components/certificates-providers-list/CertificatesProvidersList.tsx
@@ -7,7 +7,7 @@ import { Typography } from "@peculiar/react-components";
 import styles from "./styles/index.module.scss";
 
 interface CertificatesProvidersListProps {
-  providers: IProviderInfo[];
+  providers: Pick<IProviderInfo, "id" | "name" | "isRemovable" | "readOnly">[];
   currentProviderId?: string;
   onSelect?: (id: string) => void;
 }
diff --git a/src/components/certificates-providers-list/styles/index.module.scss b/src/components/certificates-providers-list/styles/index.module.scss
index 54404243..f709e8db 100644
--- a/src/components/certificates-providers-list/styles/index.module.scss
+++ b/src/components/certificates-providers-list/styles/index.module.scss
@@ -9,7 +9,7 @@
   }
 
   .list_wrapper {
-    padding: 0 var(--pv-size-base-2);
+    padding: 1px var(--pv-size-base-2);
     max-height: 100%;
     overflow-y: scroll;
     .list {
diff --git a/src/icons/provider.svg b/src/icons/provider.svg
index 07ccd137..e2852400 100644
--- a/src/icons/provider.svg
+++ b/src/icons/provider.svg
@@ -1,5 +1,5 @@
 <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7.58579 13.4142L15 6L22.4142 13.4142C22.7893 13.7893 23 14.298 23 14.8284V22C23 23.1046 22.1046 24 21 24H17H13H9C7.89543 24 7 23.1046 7 22V14.8284C7 14.298 7.21071 13.7893 7.58579 13.4142Z" stroke="#5C666A" stroke-width="2" stroke-linejoin="round"/>
-<circle cx="15" cy="15" r="2" fill="#5C666A"/>
-<path d="M15 16L15 20" stroke="#5C666A" stroke-width="2"/>
+<path d="M7.58579 13.4142L15 6L22.4142 13.4142C22.7893 13.7893 23 14.298 23 14.8284V22C23 23.1046 22.1046 24 21 24H17H13H9C7.89543 24 7 23.1046 7 22V14.8284C7 14.298 7.21071 13.7893 7.58579 13.4142Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
+<circle cx="15" cy="15" r="2" fill="currentColor"/>
+<path d="M15 16L15 20" stroke="currentColor" stroke-width="2"/>
 </svg>
diff --git a/src/icons/smartcard.svg b/src/icons/smartcard.svg
new file mode 100644
index 00000000..998b62d8
--- /dev/null
+++ b/src/icons/smartcard.svg
@@ -0,0 +1,4 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 14L24 10L20 6L16 10M8 22V22C10.2091 24.2091 13.7909 24.2091 16 22L20.5858 17.4142C21.3668 16.6332 21.3668 15.3668 20.5858 14.5858L15.4142 9.41421C14.6332 8.63317 13.3668 8.63316 12.5858 9.41421L8 14C5.79086 16.2091 5.79086 19.7909 8 22Z" stroke="currentColor" stroke-width="2"/>
+<circle cx="12" cy="18" r="2" fill="currentColor"/>
+</svg>