feat(accessibility): added missing <legend>-elements to form fields…

…ets (#1694)
intershop · Sep 4, 2024 · e931783 · e931783
1 parent 4a1620f
commit e931783
Show file tree

Hide file tree

Showing 9 changed files with 30 additions and 2 deletions.
diff --git a/...organization-management/src/app/components/cost-center-form/cost-center-form.component.ts b/...organization-management/src/app/components/cost-center-form/cost-center-form.component.ts
@@ -69,6 +69,10 @@ export class CostCenterFormComponent implements OnInit {
     return [
       {
         type: 'ish-fieldset-field',
+        props: {
+          legend: 'account.costcenter.create.heading',
+          legendClass: 'legend-invisible',
+        },
         fieldGroup: [
           {
             key: 'currency',

diff --git a/...organization-management/src/app/components/user-budget-form/user-budget-form.component.ts b/...organization-management/src/app/components/user-budget-form/user-budget-form.component.ts
@@ -68,6 +68,10 @@ export class UserBudgetFormComponent implements OnInit {
     return [
       {
         type: 'ish-fieldset-field',
+        props: {
+          legend: 'account.user.update_budget.heading',
+          legendClass: 'legend-invisible',
+        },
         fieldGroup: [
           {
             key: 'currency',

diff --git a/...ganization-management/src/app/components/user-profile-form/user-profile-form.component.ts b/...ganization-management/src/app/components/user-profile-form/user-profile-form.component.ts
@@ -33,6 +33,10 @@ export class UserProfileFormComponent implements OnInit {
     return [
       {
         type: 'ish-fieldset-field',
+        props: {
+          legend: 'account.register.personal_information.heading',
+          legendClass: 'legend-invisible',
+        },
         fieldGroup: [
           {
             type: '#title',

diff --git a/...on-management/src/app/components/user-roles-selection/user-roles-selection.component.html b/...on-management/src/app/components/user-roles-selection/user-roles-selection.component.html
@@ -1,4 +1,5 @@
 <fieldset>
+  <legend class="legend-invisible">{{ 'account.user.details.profile.role_permissions.heading' | translate }}</legend>
   <div class="row">
     <div class="col-md-4 col-form-label">{{ 'account.user.details.profile.role_permissions.heading' | translate }}</div>
     <div class="col-md-8">

diff --git a/src/app/extensions/store-locator/pages/store-locator/store-locator-page.component.html b/src/app/extensions/store-locator/pages/store-locator/store-locator-page.component.html
@@ -6,6 +6,7 @@ <h1>{{ 'store_locator.title' | translate }}</h1>
 <form [formGroup]="form" (ngSubmit)="submitForm()">
   <div class="row">
     <fieldset class="col-sm-8">
+      <legend class="legend-invisible">{{ 'store_locator.title' | translate }}</legend>
       <formly-form [form]="form" [fields]="fields" [model]="model" />
       <div class="form-group row align-items-baseline">
         <div class="col-sm-4"></div>

diff --git a/...ation/services/registration-form-configuration/registration-form-configuration.service.ts b/...ation/services/registration-form-configuration/registration-form-configuration.service.ts
@@ -78,6 +78,8 @@ export class RegistrationFormConfigurationService {
         props: {
           fieldsetClass: 'row',
           childClass: 'col-md-10 col-lg-8 col-xl-6',
+          legend: 'account.register.address.headding',
+          legendClass: 'legend-invisible',
         },
         fieldGroup: [
           {
@@ -237,6 +239,8 @@ export class RegistrationFormConfigurationService {
         props: {
           fieldsetClass: 'row',
           childClass: 'col-md-10 col-lg-8 col-xl-6',
+          legend: 'account.register.email_password.heading',
+          legendClass: 'legend-invisible',
         },
         validators: {
           validation: [
@@ -318,6 +322,8 @@ export class RegistrationFormConfigurationService {
         props: {
           fieldsetClass: 'row',
           childClass: 'col-md-10 col-lg-8 col-xl-6',
+          legend: 'account.register.personal_information.heading',
+          legendClass: 'legend-invisible',
         },
         fieldGroup: this.fieldLibrary.getConfigurationGroup('personalInfo'),
       },
@@ -339,6 +345,8 @@ export class RegistrationFormConfigurationService {
         props: {
           fieldsetClass: 'row',
           childClass: 'col-md-10 col-lg-8 col-xl-6',
+          legend: 'account.register.company_information.heading',
+          legendClass: 'legend-invisible',
         },
         fieldGroup: this.fieldLibrary.getConfigurationGroup('companyInfo'),
       },

diff --git a/src/app/shared/formly/types/fieldset-field/fieldset-field.component.html b/src/app/shared/formly/types/fieldset-field/fieldset-field.component.html
@@ -1,6 +1,6 @@
 <fieldset [ngClass]="props.fieldsetClass">
+  <legend *ngIf="props.legend" [ngClass]="props.legendClass">{{ props.legend | translate }}</legend>
   <div [ngClass]="props.childClass">
-    <legend *ngIf="props.legend" [ngClass]="props.legendClass">{{ props.legend | translate }}</legend>
     <formly-field *ngFor="let f of field.fieldGroup" [field]="f" />
   </div>
 </fieldset>
diff --git a/src/app/shared/formly/types/fieldset-field/fieldset-field.component.spec.ts b/src/app/shared/formly/types/fieldset-field/fieldset-field.component.spec.ts
@@ -89,7 +89,7 @@ describe('Fieldset Field Component', () => {
 
   it('should contain a legend in a fieldset', () => {
     fixture.detectChanges();
-    expect(element.querySelector('fieldset > div > legend')).toBeTruthy();
+    expect(element.querySelector('fieldset > legend')).toBeTruthy();
   });
 
   it('should contain a legend class in a fieldset', () => {

diff --git a/src/styles/global/forms.scss b/src/styles/global/forms.scss
@@ -1,9 +1,15 @@
+// FIELDSET
 fieldset {
   margin-bottom: ($space-default);
 
   legend {
     font-size: $font-size-corporate;
   }
+
+  .legend-invisible {
+    position: absolute;
+    left: -10000px;
+  }
 }
 
 // 	REQUIRED FIELDS