[ENG-9839] User Settings: Input fields missing labels (#807)

- Ticket: [ENG-9839]
- Feature flag: n/a

## Summary of Changes

1. Fixed accessibility issues with labels and heading.

Author: nsemets

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>

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>
 

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>

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>

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">

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">

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"

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

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

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