fix: accessibility issue caused by an incorrect idp mapping

Author: sebbalex

src/oneid/oneid-fe/src/pages/login/components/CieButton/index.tsx

@@ -26,6 +26,7 @@ export const CieButton = ({ onClick }: CieButtonProps) => {
       variant="contained"
       startIcon={<CieIconWrapper />}
       onClick={onClick}
+      aria-label="CIE Login"
     >
       {t('loginPage.loginBox.cieLogin')}
     </Button>

src/oneid/oneid-fe/src/pages/login/components/SpidModal/SpidModal.test.tsx

@@ -12,8 +12,18 @@ vi.mock('../../../../utils/utils', () => ({
 
 const mockIdpList = {
   identityProviders: [
-    { entityID: 'idp1', name: 'IDP 1', imageUrl: 'image1.png' },
-    { entityID: 'idp2', name: 'IDP 2', imageUrl: 'image2.png' },
+    {
+      active: true,
+      entityID: 'idp1',
+      friendlyName: 'IDP 1',
+      imageUrl: 'image1.png',
+    },
+    {
+      active: true,
+      entityID: 'idp2',
+      friendlyName: 'IDP 2',
+      imageUrl: 'image2.png',
+    },
   ],
 } as IdentityProviders;
 

src/oneid/oneid-fe/src/pages/login/components/SpidSelect/SpidSelect.test.tsx

@@ -14,15 +14,20 @@ afterAll(() => {
 });
 const idpList = {
   identityProviders: [
-    { identifier: 'test', entityID: 'testID', name: 'test', imageUrl: 'test' },
+    {
+      active: true,
+      entityID: 'testID',
+      friendlyName: 'test',
+      imageUrl: 'test',
+    },
   ],
   richiediSpid: '',
 };
 test('go to the spid url', () => {
   render(<SpidSelect onBack={() => null} idpList={idpList} />);
 
   idpList.identityProviders.forEach((element) => {
-    const spidImg = screen.getByAltText(element.name);
+    const spidImg = screen.getByAltText(element.friendlyName);
     const spidSpan = spidImg.parentNode;
     const spidButton = spidSpan?.parentNode;
     fireEvent.click(spidButton as Element);

src/oneid/oneid-fe/src/pages/login/components/SpidSelection.tsx

@@ -12,7 +12,7 @@ export const getSPID = (IDP: IdentityProvider) => {
   trackEvent(
     'LOGIN_IDP_SELECTED',
     {
-      SPID_IDP_NAME: IDP.name,
+      SPID_IDP_NAME: IDP.friendlyName,
       SPID_IDP_ID: IDP.entityID,
       FORWARD_PARAMETERS: params,
     },
@@ -42,7 +42,7 @@ export const SpidSelection = ({
               backgroundColor: 'background.default',
               alignItems: 'center',
             }}
-            aria-label={IDP.name}
+            aria-label={IDP.friendlyName}
             id={IDP.entityID}
             data-testid={`idp-button-${IDP.entityID}`}
           >
@@ -57,7 +57,7 @@ export const SpidSelection = ({
               <ImageWithFallback
                 width="100px"
                 src={IDP.imageUrl}
-                alt={IDP.name}
+                alt={IDP.friendlyName}
                 placeholder={IDP_PLACEHOLDER_IMG}
               />
             </Icon>

src/oneid/oneid-fe/src/services/api.test.ts

@@ -18,8 +18,16 @@ describe('Utils functions', () => {
 
   describe('getIdpList', () => {
     const mockIDPList: Array<Omit<IdentityProvider, 'imageUrl'>> = [
-      { entityID: 'idp1', name: 'IDP 1', identifier: 'idp-identifier-1' },
-      { entityID: 'idp2', name: 'IDP 2', identifier: 'idp-identifier-2' },
+      {
+        active: true,
+        entityID: 'idp1',
+        friendlyName: 'IDP 1',
+      },
+      {
+        active: true,
+        entityID: 'idp2',
+        friendlyName: 'IDP 2',
+      },
     ];
 
     it('returns a enhanced IDP list', async () => {

src/oneid/oneid-fe/src/utils/IDPS.ts

@@ -1,7 +1,7 @@
 export type IdentityProvider = {
-  identifier: string;
+  active: boolean;
   entityID: string;
-  name: string;
+  friendlyName: string;
   imageUrl: string;
 };