Improve providers list accessibility

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

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;
+  }
 }

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(),
+  },
+};

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;
 }

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 {