From 18fa9c947569c6e8739a3b43f63a8363e5e0ae30 Mon Sep 17 00:00:00 2001
From: nsemets <nsemets@exoft.net>
Date: Fri, 5 Dec 2025 11:28:24 +0200
Subject: [PATCH 1/3] fix(accessibility): fixed labels issues

---
 .../affiliated-institutions.component.html                 | 6 +++++-
 .../connected-emails/connected-emails.component.html       | 2 ++
 .../connected-identities.component.html                    | 1 +
 .../developer-app-details.component.html                   | 7 ++++---
 .../readonly-input/readonly-input.component.html           | 2 ++
 .../components/readonly-input/readonly-input.component.ts  | 6 +++++-
 src/styles/overrides/button.scss                           | 4 ++++
 7 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/src/app/features/settings/account-settings/components/affiliated-institutions/affiliated-institutions.component.html b/src/app/features/settings/account-settings/components/affiliated-institutions/affiliated-institutions.component.html
index 9ec09b40b..420eabc1b 100644
--- a/src/app/features/settings/account-settings/components/affiliated-institutions/affiliated-institutions.component.html
+++ b/src/app/features/settings/account-settings/components/affiliated-institutions/affiliated-institutions.component.html
@@ -13,7 +13,11 @@ <h2>{{ 'settings.accountSettings.affiliatedInstitutions.title' | translate }}</h
 
   @for (institution of institutions(); track institution.id) {
     <div class="flex mt-3">
-      <osf-readonly-input [value]="institution.name" (deleteItem)="deleteInstitution(institution)"></osf-readonly-input>
+      <osf-readonly-input
+        [value]="institution.name"
+        [ariaLabelKey]="'settings.accountSettings.affiliatedInstitutions.title'"
+        (deleteItem)="deleteInstitution(institution)"
+      ></osf-readonly-input>
     </div>
   }
 </p-card>
diff --git a/src/app/features/settings/account-settings/components/connected-emails/connected-emails.component.html b/src/app/features/settings/account-settings/components/connected-emails/connected-emails.component.html
index 21a90f4a9..9035faeed 100644
--- a/src/app/features/settings/account-settings/components/connected-emails/connected-emails.component.html
+++ b/src/app/features/settings/account-settings/components/connected-emails/connected-emails.component.html
@@ -31,6 +31,7 @@ <h2>{{ 'settings.accountSettings.connectedEmails.title' | translate }}</h2>
             <div class="flex align-items-center flex-wrap gap-2">
               <osf-readonly-input
                 [value]="email.emailAddress"
+                [ariaLabelKey]="'settings.accountSettings.connectedEmails.alternateEmails'"
                 (deleteItem)="openConfirmDeleteEmail(email)"
               ></osf-readonly-input>
 
@@ -59,6 +60,7 @@ <h2>{{ 'settings.accountSettings.connectedEmails.title' | translate }}</h2>
             <div class="flex align-items-center flex-wrap gap-2">
               <osf-readonly-input
                 [value]="email.emailAddress"
+                [ariaLabelKey]="'settings.accountSettings.connectedEmails.unconfirmedEmails'"
                 (deleteItem)="openConfirmDeleteEmail(email)"
               ></osf-readonly-input>
 
diff --git a/src/app/features/settings/account-settings/components/connected-identities/connected-identities.component.html b/src/app/features/settings/account-settings/components/connected-identities/connected-identities.component.html
index 90ffb5265..c88df8833 100644
--- a/src/app/features/settings/account-settings/components/connected-identities/connected-identities.component.html
+++ b/src/app/features/settings/account-settings/components/connected-identities/connected-identities.component.html
@@ -10,6 +10,7 @@ <h2>{{ 'settings.accountSettings.connectedIdentities.title' | translate }}</h2>
       <div class="flex mt-3">
         <osf-readonly-input
           [value]="`${identity.id}: ${identity.externalId} (${identity.status})`"
+          [ariaLabelKey]="'settings.accountSettings.connectedIdentities.title'"
           (deleteItem)="deleteExternalIdentity(identity)"
         ></osf-readonly-input>
       </div>
diff --git a/src/app/features/settings/developer-apps/pages/developer-app-details/developer-app-details.component.html b/src/app/features/settings/developer-apps/pages/developer-app-details/developer-app-details.component.html
index a65cd6d94..c5964c9a3 100644
--- a/src/app/features/settings/developer-apps/pages/developer-app-details/developer-app-details.component.html
+++ b/src/app/features/settings/developer-apps/pages/developer-app-details/developer-app-details.component.html
@@ -24,7 +24,7 @@ <h1>{{ developerApp()?.name }}</h1>
       <section class="flex flex-column gap-4 mt-4 md:mt-6">
         <p-card class="no-padding-card">
           <section class="p-3 md:p-4">
-            <h2>
+            <h2 id="clientId">
               {{ 'settings.developerApps.details.clientId.title' | translate }}
             </h2>
 
@@ -34,7 +34,7 @@ <h2>
 
             <div class="mt-3 w-4">
               <p-iconfield iconPosition="right">
-                <input type="text" pInputText readonly [value]="clientId()" />
+                <input type="text" pInputText readonly [value]="clientId()" aria-labelledby="clientId" />
                 <p-inputicon>
                   <osf-copy-button [copyItem]="clientId()"></osf-copy-button>
                 </p-inputicon>
@@ -45,7 +45,7 @@ <h2>
 
         <p-card class="no-padding-card">
           <section class="p-3 md:p-4">
-            <h2>
+            <h2 id="clientSecret">
               {{ 'settings.developerApps.details.clientSecret.title' | translate }}
             </h2>
 
@@ -60,6 +60,7 @@ <h2>
                     pInputText
                     [value]="isClientSecretVisible() ? clientSecret() : hiddenClientSecret()"
                     readonly
+                    aria-labelledby="clientSecret"
                   />
                   <p-inputicon>
                     <osf-copy-button [copyItem]="clientSecret()"></osf-copy-button>
diff --git a/src/app/shared/components/readonly-input/readonly-input.component.html b/src/app/shared/components/readonly-input/readonly-input.component.html
index 1b506f279..3839e0345 100644
--- a/src/app/shared/components/readonly-input/readonly-input.component.html
+++ b/src/app/shared/components/readonly-input/readonly-input.component.html
@@ -6,6 +6,8 @@
     [readonly]="readonly()"
     [disabled]="disabled()"
     [placeholder]="placeholder()"
+    [attr.aria-label]="ariaLabelKey().length ? (ariaLabelKey() | translate) : null"
+    [attr.aria-labelledby]="ariaLabelledBy() || null"
   />
   <p-inputicon
     class="fas fa-close remove-icon cursor-pointer"
diff --git a/src/app/shared/components/readonly-input/readonly-input.component.ts b/src/app/shared/components/readonly-input/readonly-input.component.ts
index 1385ff827..aa9379bf5 100644
--- a/src/app/shared/components/readonly-input/readonly-input.component.ts
+++ b/src/app/shared/components/readonly-input/readonly-input.component.ts
@@ -1,3 +1,5 @@
+import { TranslatePipe } from '@ngx-translate/core';
+
 import { IconField } from 'primeng/iconfield';
 import { InputIcon } from 'primeng/inputicon';
 import { InputText } from 'primeng/inputtext';
@@ -6,7 +8,7 @@ import { ChangeDetectionStrategy, Component, input, output } from '@angular/core
 
 @Component({
   selector: 'osf-readonly-input',
-  imports: [IconField, InputIcon, InputText],
+  imports: [IconField, InputIcon, InputText, TranslatePipe],
   templateUrl: './readonly-input.component.html',
   styleUrl: './readonly-input.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -16,6 +18,8 @@ export class ReadonlyInputComponent {
   readonly = input<boolean>(true);
   disabled = input<boolean>(false);
   placeholder = input<string>('');
+  ariaLabelKey = input<string>('');
+  ariaLabelledBy = input<string>('');
 
   deleteItem = output<void>();
 }
diff --git a/src/styles/overrides/button.scss b/src/styles/overrides/button.scss
index d2cf4ebb3..993411425 100644
--- a/src/styles/overrides/button.scss
+++ b/src/styles/overrides/button.scss
@@ -69,3 +69,7 @@
   --p-button-padding-y: 0;
   --p-button-padding-x: 0;
 }
+
+.copy-icon-btn .p-button {
+  height: 1.5rem;
+}

From f44b7a6dd6268bca1d09f01749993c1bfc207055 Mon Sep 17 00:00:00 2001
From: nsemets <nsemets@exoft.net>
Date: Fri, 5 Dec 2025 11:54:10 +0200
Subject: [PATCH 2/3] fix(accessibility): fixed headings

---
 src/app/shared/components/bar-chart/bar-chart.component.html    | 2 +-
 .../components/doughnut-chart/doughnut-chart.component.html     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/shared/components/bar-chart/bar-chart.component.html b/src/app/shared/components/bar-chart/bar-chart.component.html
index 52ddf6b06..4669b3d83 100644
--- a/src/app/shared/components/bar-chart/bar-chart.component.html
+++ b/src/app/shared/components/bar-chart/bar-chart.component.html
@@ -15,7 +15,7 @@ <h2>{{ title() | translate }}</h2>
         <p-accordion>
           <p-accordion-panel value="0">
             <p-accordion-header class="flex flex-row column-gap-3 align-items-center p-0">
-              <h4>{{ title() | translate }}</h4>
+              <p class="font-bold">{{ title() | translate }}</p>
             </p-accordion-header>
             <p-accordion-content>
               <div class="pt-3">
diff --git a/src/app/shared/components/doughnut-chart/doughnut-chart.component.html b/src/app/shared/components/doughnut-chart/doughnut-chart.component.html
index b66fe02b4..c506b6578 100644
--- a/src/app/shared/components/doughnut-chart/doughnut-chart.component.html
+++ b/src/app/shared/components/doughnut-chart/doughnut-chart.component.html
@@ -17,7 +17,7 @@ <h2>{{ title() | translate }}</h2>
         <p-accordion>
           <p-accordion-panel value="0">
             <p-accordion-header class="flex flex-row column-gap-3 align-items-center p-0">
-              <h4>{{ title() | translate }}</h4>
+              <p class="font-bold">{{ title() | translate }}</p>
             </p-accordion-header>
             <p-accordion-content>
               <div class="pt-3">

From 3e62e6042a66387c12ace3bb7d493b2aec399f6a Mon Sep 17 00:00:00 2001
From: nsemets <nsemets@exoft.net>
Date: Fri, 5 Dec 2025 12:08:46 +0200
Subject: [PATCH 3/3] fix(unit-tests): fixed unit tests

---
 .../readonly-input/readonly-input.component.spec.ts           | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/app/shared/components/readonly-input/readonly-input.component.spec.ts b/src/app/shared/components/readonly-input/readonly-input.component.spec.ts
index e483207be..fd7642eb4 100644
--- a/src/app/shared/components/readonly-input/readonly-input.component.spec.ts
+++ b/src/app/shared/components/readonly-input/readonly-input.component.spec.ts
@@ -3,6 +3,8 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { ReadonlyInputComponent } from './readonly-input.component';
 
+import { OSFTestingModule } from '@testing/osf.testing.module';
+
 describe('ReadonlyInputComponent', () => {
   let component: ReadonlyInputComponent;
   let fixture: ComponentFixture<ReadonlyInputComponent>;
@@ -12,7 +14,7 @@ describe('ReadonlyInputComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [ReadonlyInputComponent],
+      imports: [ReadonlyInputComponent, OSFTestingModule],
     }).compileComponents();
 
     fixture = TestBed.createComponent(ReadonlyInputComponent);