Fixed accessibility issues about header ordering

alexandrevryghem · Dec 3, 2023 · 860f74d · 860f74d
1 parent ffa0055
commit 860f74d
Show file tree

Hide file tree

Showing 58 changed files with 116 additions and 105 deletions.
diff --git a/src/app/access-control/epeople-registry/epeople-registry.component.html b/src/app/access-control/epeople-registry/epeople-registry.component.html
@@ -2,7 +2,7 @@
   <div class="epeople-registry row">
     <div class="col-12">
       <div class="d-flex justify-content-between border-bottom mb-3">
-        <h2 id="header" class="pb-2">{{labelPrefix + 'head' | translate}}</h2>
+        <h1 id="header" class="pb-2">{{labelPrefix + 'head' | translate}}</h1>
 
         <div>
           <button class="mr-auto btn btn-success addEPerson-button"
@@ -13,9 +13,9 @@ <h2 id="header" class="pb-2">{{labelPrefix + 'head' | translate}}</h2>
         </div>
       </div>
 
-      <h3 id="search" class="border-bottom pb-2">{{labelPrefix + 'search.head' | translate}}
-
-      </h3>
+      <h2 id="search" class="border-bottom pb-2">
+        {{labelPrefix + 'search.head' | translate}}
+      </h2>
       <form [formGroup]="searchForm" (ngSubmit)="search(searchForm.value)" class="d-flex justify-content-between">
         <div>
           <select name="scope" id="scope" formControlName="scope" class="form-control" aria-label="Search scope">

diff --git a/src/app/access-control/epeople-registry/eperson-form/eperson-form.component.html b/src/app/access-control/epeople-registry/eperson-form/eperson-form.component.html
@@ -5,11 +5,11 @@
       <div *ngIf="epersonService.getActiveEPerson() | async; then editHeader; else createHeader"></div>
 
       <ng-template #createHeader>
-        <h2 class="border-bottom pb-2">{{messagePrefix + '.create' | translate}}</h2>
+        <h1 class="border-bottom pb-2">{{messagePrefix + '.create' | translate}}</h1>
       </ng-template>
 
       <ng-template #editHeader>
-        <h2 class="border-bottom pb-2">{{messagePrefix + '.edit' | translate}}</h2>
+        <h1 class="border-bottom pb-2">{{messagePrefix + '.edit' | translate}}</h1>
       </ng-template>
 
       <ds-form [formId]="formId"
@@ -45,7 +45,7 @@ <h2 class="border-bottom pb-2">{{messagePrefix + '.edit' | translate}}</h2>
       <ds-themed-loading [showMessage]="false" *ngIf="!formGroup"></ds-themed-loading>
 
       <div *ngIf="epersonService.getActiveEPerson() | async">
-        <h5>{{messagePrefix + '.groupsEPersonIsMemberOf' | translate}}</h5>
+        <h2>{{messagePrefix + '.groupsEPersonIsMemberOf' | translate}}</h2>
 
         <ds-themed-loading [showMessage]="false" *ngIf="!(groups | async)"></ds-themed-loading>
 

diff --git a/src/app/access-control/group-registry/group-form/group-form.component.html b/src/app/access-control/group-registry/group-form/group-form.component.html
@@ -5,11 +5,11 @@
       <div *ngIf="groupDataService.getActiveGroup() | async; then editHeader; else createHeader"></div>
 
       <ng-template #createHeader>
-        <h2 class="border-bottom pb-2">{{messagePrefix + '.head.create' | translate}}</h2>
+        <h1 class="border-bottom pb-2">{{messagePrefix + '.head.create' | translate}}</h1>
       </ng-template>
 
       <ng-template #editHeader>
-        <h2 class="border-bottom pb-2">
+        <h1 class="border-bottom pb-2">
           <span
             *dsContextHelp="{
               content: 'admin.access-control.groups.form.tooltip.editGroupPage',
@@ -20,7 +20,7 @@ <h2 class="border-bottom pb-2">
           >
             {{messagePrefix + '.head.edit' | translate}}
           </span>
-        </h2>
+        </h1>
       </ng-template>
 
       <ds-alert *ngIf="groupBeingEdited?.permanent" [type]="AlertTypeEnum.Warning"
@@ -39,9 +39,8 @@ <h2 class="border-bottom pb-2">
           <button (click)="onCancel()" type="button"
                   class="btn btn-outline-secondary"><i class="fas fa-arrow-left"></i> {{messagePrefix + '.return' | translate}}</button>
         </div>
-        <div after *ngIf="(canEdit$ | async) && !groupBeingEdited.permanent" class="btn-group">
-          <button class="btn btn-danger delete-button" [disabled]="!(canEdit$ | async) || groupBeingEdited.permanent"
-                  (click)="delete()" type="button">
+        <div after *ngIf="(canEdit$ | async) && !groupBeingEdited?.permanent" class="btn-group">
+          <button (click)="delete()" class="btn btn-danger delete-button" type="button">
             <i class="fa fa-trash"></i> {{ messagePrefix + '.actions.delete' | translate}}
           </button>
         </div>

diff --git a/src/app/access-control/group-registry/group-form/members-list/members-list.component.html b/src/app/access-control/group-registry/group-form/members-list/members-list.component.html
@@ -1,7 +1,7 @@
 <ng-container>
-  <h3 class="border-bottom pb-2">{{messagePrefix + '.head' | translate}}</h3>
+  <h2 class="border-bottom pb-2">{{messagePrefix + '.head' | translate}}</h2>
 
-  <h4>{{messagePrefix + '.headMembers' | translate}}</h4>
+  <h3>{{messagePrefix + '.headMembers' | translate}}</h3>
 
   <ds-pagination *ngIf="(ePeopleMembersOfGroup | async)?.totalElements > 0"
                  [paginationOptions]="config"
@@ -55,7 +55,7 @@ <h4>{{messagePrefix + '.headMembers' | translate}}</h4>
     {{messagePrefix + '.no-members-yet' | translate}}
   </div>
 
-  <h4 id="search" class="border-bottom pb-2">
+  <h3 id="search" class="border-bottom pb-2">
     <span
       *dsContextHelp="{
         content: 'admin.access-control.groups.form.tooltip.editGroup.addEpeople',
@@ -66,7 +66,7 @@ <h4 id="search" class="border-bottom pb-2">
     >
       {{messagePrefix + '.search.head' | translate}}
     </span>
-  </h4>
+  </h3>
 
   <form [formGroup]="searchForm" (ngSubmit)="search(searchForm.value)" class="d-flex justify-content-between">
     <div class="flex-grow-1 mr-3">

diff --git a/src/app/access-control/group-registry/groups-registry.component.html b/src/app/access-control/group-registry/groups-registry.component.html
@@ -2,7 +2,7 @@
   <div class="groups-registry row">
     <div class="col-12">
       <div class="d-flex justify-content-between border-bottom mb-3">
-        <h2 id="header" class="pb-2">{{messagePrefix + 'head' | translate}}</h2>
+        <h1 id="header" class="pb-2">{{messagePrefix + 'head' | translate}}</h1>
         <div>
           <button class="mr-auto btn btn-success"
                   [routerLink]="'create'">
@@ -12,7 +12,7 @@ <h2 id="header" class="pb-2">{{messagePrefix + 'head' | translate}}</h2>
         </div>
       </div>
 
-      <h3 id="search" class="border-bottom pb-2">{{messagePrefix + 'search.head' | translate}}</h3>
+      <h2 id="search" class="border-bottom pb-2">{{messagePrefix + 'search.head' | translate}}</h2>
       <form [formGroup]="searchForm" (ngSubmit)="search(searchForm.value)" class="d-flex justify-content-between">
         <div class="flex-grow-1 mr-3">
           <div class="form-group input-group">

diff --git a/src/app/admin/admin-curation-tasks/admin-curation-tasks.component.html b/src/app/admin/admin-curation-tasks/admin-curation-tasks.component.html
@@ -1,4 +1,4 @@
 <div class="container">
-    <h2>{{'admin.curation-tasks.header' |translate }}</h2>
+    <h1>{{'admin.curation-tasks.header' |translate }}</h1>
     <ds-curation-form></ds-curation-form>
 </div>
diff --git a/src/app/admin/admin-import-metadata-page/metadata-import-page.component.html b/src/app/admin/admin-import-metadata-page/metadata-import-page.component.html
@@ -1,5 +1,5 @@
 <div class="container">
-  <h2 id="header">{{'admin.metadata-import.page.header' | translate}}</h2>
+  <h1 id="header">{{'admin.metadata-import.page.header' | translate}}</h1>
   <p>{{'admin.metadata-import.page.help' | translate}}</p>
   <div class="form-group">
     <div class="form-check">

diff --git a/...min-registries/bitstream-formats/add-bitstream-format/add-bitstream-format.component.html b/...min-registries/bitstream-formats/add-bitstream-format/add-bitstream-format.component.html
@@ -1,8 +1,8 @@
 <div class="container">
     <div class="row">
         <div class="col-12 mb-4">
-            <h2 id="sub-header"
-                class="border-bottom pb-2">{{ 'admin.registries.bitstream-formats.create.new' | translate }}</h2>
+            <h1 id="sub-header"
+                class="border-bottom pb-2">{{ 'admin.registries.bitstream-formats.create.new' | translate }}</h1>
 
             <ds-bitstream-format-form (updatedFormat)="createBitstreamFormat($event)"></ds-bitstream-format-form>
 

diff --git a/src/app/admin/admin-registries/bitstream-formats/bitstream-formats.component.html b/src/app/admin/admin-registries/bitstream-formats/bitstream-formats.component.html
@@ -2,7 +2,7 @@
   <div class="bitstream-formats row">
     <div class="col-12">
 
-      <h2 id="header" class="border-bottom pb-2">{{'admin.registries.bitstream-formats.head' | translate}}</h2>
+      <h1 id="header" class="border-bottom pb-2">{{'admin.registries.bitstream-formats.head' | translate}}</h1>
 
       <p id="description">{{'admin.registries.bitstream-formats.description' | translate}}</p>
       <p id="create-new" class="mb-2"><a [routerLink]="'add'" class="btn btn-success">{{'admin.registries.bitstream-formats.create.new' | translate}}</a></p>

diff --git a/...n-registries/bitstream-formats/edit-bitstream-format/edit-bitstream-format.component.html b/...n-registries/bitstream-formats/edit-bitstream-format/edit-bitstream-format.component.html
@@ -1,8 +1,8 @@
 <div class="container">
     <div class="row">
         <div class="col-12 mb-4">
-            <h2 id="sub-header"
-                class="border-bottom pb-2">{{'admin.registries.bitstream-formats.edit.head' | translate:{format: (bitstreamFormatRD$ | async)?.payload.shortDescription} }}</h2>
+            <h1 id="sub-header"
+                class="border-bottom pb-2">{{'admin.registries.bitstream-formats.edit.head' | translate:{format: (bitstreamFormatRD$ | async)?.payload.shortDescription} }}</h1>
 
              <ds-bitstream-format-form [bitstreamFormat]="(bitstreamFormatRD$ | async)?.payload" (updatedFormat)="updateFormat($event)"></ds-bitstream-format-form>
 

diff --git a/src/app/bitstream-page/edit-bitstream-page/edit-bitstream-page.component.html b/src/app/bitstream-page/edit-bitstream-page/edit-bitstream-page.component.html
@@ -8,7 +8,7 @@
         <div class="container">
           <div class="row">
             <div class="col-12">
-              <h3>{{dsoNameService.getName(bitstreamRD?.payload)}} <span class="text-muted">({{bitstreamRD?.payload?.sizeBytes | dsFileSize}})</span></h3>
+              <h1 class="h2">{{dsoNameService.getName(bitstreamRD?.payload)}} <span class="text-muted">({{bitstreamRD?.payload?.sizeBytes | dsFileSize}})</span></h1>
             </div>
           </div>
         </div>

diff --git a/src/app/browse-by/browse-by-taxonomy-page/browse-by-taxonomy-page.component.html b/src/app/browse-by/browse-by-taxonomy-page/browse-by-taxonomy-page.component.html
@@ -1,4 +1,5 @@
 <div class="container">
+  <h1>{{ ('browse.taxonomy_' + vocabularyName + '.title') | translate }}</h1>
   <div class="mb-3">
     <ds-vocabulary-treeview [vocabularyOptions]=vocabularyOptions
                             [multiSelect]="true"

diff --git a/src/app/collection-page/delete-collection-page/delete-collection-page.component.html b/src/app/collection-page/delete-collection-page/delete-collection-page.component.html
@@ -2,7 +2,7 @@
     <div class="row">
         <ng-container *ngVar="(dsoRD$ | async)?.payload as dso">
             <div class="col-12 pb-4">
-                <h2 id="header" class="border-bottom pb-2">{{ 'collection.delete.head' | translate}}</h2>
+                <h1 id="header" class="border-bottom pb-2">{{ 'collection.delete.head' | translate}}</h1>
                 <p class="pb-2">{{ 'collection.delete.text' | translate:{ dso: dsoNameService.getName(dso) } }}</p>
                 <div class="form-group row">
                   <div class="col text-right space-children-mr">

diff --git a/...p/collection-page/edit-collection-page/collection-curate/collection-curate.component.html b/...p/collection-page/edit-collection-page/collection-curate/collection-curate.component.html
@@ -1,5 +1,5 @@
 <div class="container">
-    <h3>{{'collection.curate.header' |translate:{collection: (collectionName$ |async)} }}</h3>
+    <h2>{{'collection.curate.header' |translate:{collection: (collectionName$ |async)} }}</h2>
     <ds-curation-form
             [dsoHandle]="(dsoRD$|async)?.payload.handle"
     ></ds-curation-form>

diff --git a/...p/collection-page/edit-collection-page/collection-source/collection-source.component.html b/...p/collection-page/edit-collection-page/collection-source/collection-source.component.html
@@ -18,7 +18,7 @@
             <span class="d-none d-sm-inline">&nbsp;{{"item.edit.metadata.save-button" | translate}}</span>
         </button>
     </div>
-    <h4>{{ 'collection.edit.tabs.source.head' | translate }}</h4>
+    <h2>{{ 'collection.edit.tabs.source.head' | translate }}</h2>
     <div *ngIf="contentSource" class="form-check mb-4">
         <input type="checkbox" class="form-check-input" id="externalSourceCheck"
                [checked]="(contentSource?.harvestType !== harvestTypeNone)" (change)="changeExternalSource()">

diff --git a/src/app/collection-page/edit-item-template-page/edit-item-template-page.component.html b/src/app/collection-page/edit-item-template-page/edit-item-template-page.component.html
@@ -2,7 +2,7 @@
   <div class="row">
     <div class="col-12" *ngVar="(itemRD$ | async) as itemRD">
       <ng-container *ngIf="itemRD?.hasSucceeded">
-        <h2 class="border-bottom">{{ 'collection.edit.template.head' | translate:{ collection: dsoNameService.getName(collection) } }}</h2>
+        <h1 class="border-bottom">{{ 'collection.edit.template.head' | translate:{ collection: dsoNameService.getName(collection) } }}</h1>
         <ds-themed-dso-edit-metadata [updateDataService]="itemTemplateService" [dso]="itemRD?.payload"></ds-themed-dso-edit-metadata>
         <button [routerLink]="getCollectionEditUrl(collection)" class="btn btn-outline-secondary">{{ 'collection.edit.template.cancel' | translate }}</button>
       </ng-container>

diff --git a/src/app/community-page/delete-community-page/delete-community-page.component.html b/src/app/community-page/delete-community-page/delete-community-page.component.html
@@ -2,7 +2,7 @@
     <div class="row">
         <ng-container *ngVar="(dsoRD$ | async)?.payload as dso">
             <div class="col-12 pb-4">
-                <h2 id="header" class="border-bottom pb-2">{{ 'community.delete.head' | translate}}</h2>
+                <h1 id="header" class="border-bottom pb-2">{{ 'community.delete.head' | translate}}</h1>
                 <p class="pb-2">{{ 'community.delete.text' | translate:{ dso: dsoNameService.getName(dso) } }}</p>
                 <div class="form-group row">
                     <div class="col text-right space-children-mr">

diff --git a/src/app/community-page/edit-community-page/community-curate/community-curate.component.html b/src/app/community-page/edit-community-page/community-curate/community-curate.component.html
@@ -1,5 +1,5 @@
 <div class="container">
-    <h3>{{'community.curate.header' |translate:{community: (communityName$ |async)} }}</h3>
+    <h2>{{'community.curate.header' |translate:{community: (communityName$ |async)} }}</h2>
     <ds-curation-form
            [dsoHandle]="(dsoRD$|async)?.payload.handle"
     ></ds-curation-form>

diff --git a/src/app/info/feedback/feedback-form/feedback-form.component.html b/src/app/info/feedback/feedback-form/feedback-form.component.html
@@ -1,7 +1,7 @@
 <div class="row row-offcanvas row-offcanvas-right">
   <div class="col-xs-12 col-sm-12 col-md-9">
     <form class="primary" [formGroup]="feedbackForm" (ngSubmit)="createFeedback()">
-      <h2>{{ 'info.feedback.head' | translate }}</h2>
+      <h1>{{ 'info.feedback.head' | translate }}</h1>
       <p>{{ 'info.feedback.info' | translate }}</p>
       <fieldset class="col p-0">
         <div class="row">

diff --git a/src/app/item-page/bitstreams/request-a-copy/bitstream-request-a-copy-page.component.html b/src/app/item-page/bitstreams/request-a-copy/bitstream-request-a-copy-page.component.html
@@ -1,5 +1,5 @@
 <div class="container">
-    <h3 class="mb-4">{{'bitstream-request-a-copy.header' | translate}}</h3>
+    <h1 class="mb-4">{{'bitstream-request-a-copy.header' | translate}}</h1>
     <div *ngIf="canDownload$|async" class="alert alert-success">
         <span>{{'bitstream-request-a-copy.alert.canDownload1' | translate}}</span>
         <a [routerLink]="getBitstreamLink()">{{'bitstream-request-a-copy.alert.canDownload2'| translate}}</a>

diff --git a/src/app/item-page/edit-item-page/edit-item-page.component.html b/src/app/item-page/edit-item-page/edit-item-page.component.html
@@ -1,7 +1,7 @@
 <div class="container">
     <div class="row">
         <div class="col-12">
-            <h2 class="border-bottom">{{'item.edit.head' | translate}}</h2>
+            <h1 class="border-bottom">{{'item.edit.head' | translate}}</h1>
             <div class="pt-2">
                 <ul class="nav nav-tabs justify-content-start" role="tablist">
                     <li *ngFor="let page of pages" class="nav-item" role="presentation">

diff --git a/src/app/item-page/edit-item-page/item-curate/item-curate.component.html b/src/app/item-page/edit-item-page/item-curate/item-curate.component.html
@@ -1,5 +1,5 @@
 <div class="container mt-3">
-    <h3>{{'item.edit.curate.title' |translate:{item: (itemName$ |async)} }}</h3>
+    <h2>{{'item.edit.curate.title' |translate:{item: (itemName$ |async)} }}</h2>
     <ds-curation-form
       *ngIf="dsoRD$ | async as dsoRD"
       [dsoHandle]="dsoRD?.payload.handle"

diff --git a/src/app/item-page/edit-item-page/item-delete/item-delete.component.html b/src/app/item-page/edit-item-page/item-delete/item-delete.component.html
@@ -2,7 +2,7 @@
     <div class="row">
         <div class="col-12">
 
-            <h2>{{headerMessage | translate: {id: item.handle} }}</h2>
+            <h1>{{headerMessage | translate: {id: item.handle} }}</h1>
             <p>{{descriptionMessage | translate}}</p>
             <ds-modify-item-overview [item]="item"></ds-modify-item-overview>
 

diff --git a/src/app/item-page/edit-item-page/item-delete/item-delete.component.spec.ts b/src/app/item-page/edit-item-page/item-delete/item-delete.component.spec.ts
@@ -171,7 +171,7 @@ describe('ItemDeleteComponent', () => {
   });
 
   it('should render a page with messages based on the \'delete\' messageKey', () => {
-    const header = fixture.debugElement.query(By.css('h2')).nativeElement;
+    const header = fixture.debugElement.query(By.css('h1')).nativeElement;
     expect(header.innerHTML).toContain('item.edit.delete.header');
     const description = fixture.debugElement.query(By.css('p')).nativeElement;
     expect(description.innerHTML).toContain('item.edit.delete.description');

diff --git a/src/app/item-page/edit-item-page/item-move/item-move.component.html b/src/app/item-page/edit-item-page/item-move/item-move.component.html
@@ -1,7 +1,7 @@
 <div class="container">
     <div class="row">
         <div class="col-12">
-            <h2>{{'item.edit.move.head' | translate: {id: (itemRD$ | async)?.payload?.handle} }}</h2>
+            <h1>{{'item.edit.move.head' | translate: {id: (itemRD$ | async)?.payload?.handle} }}</h1>
             <p>{{'item.edit.move.description' | translate}}</p>
             <div class="row">
                 <div class="col-12">

diff --git a/src/app/item-page/edit-item-page/item-private/item-private.component.spec.ts b/src/app/item-page/edit-item-page/item-private/item-private.component.spec.ts
@@ -80,7 +80,7 @@ describe('ItemPrivateComponent', () => {
   });
 
   it('should render a page with messages based on the \'private\' messageKey', () => {
-    const header = fixture.debugElement.query(By.css('h2')).nativeElement;
+    const header = fixture.debugElement.query(By.css('h1')).nativeElement;
     expect(header.innerHTML).toContain('item.edit.private.header');
     const description = fixture.debugElement.query(By.css('p')).nativeElement;
     expect(description.innerHTML).toContain('item.edit.private.description');

diff --git a/src/app/item-page/edit-item-page/item-public/item-public.component.spec.ts b/src/app/item-page/edit-item-page/item-public/item-public.component.spec.ts
@@ -74,7 +74,7 @@ describe('ItemPublicComponent', () => {
   });
 
   it('should render a page with messages based on the \'public\' messageKey', () => {
-    const header = fixture.debugElement.query(By.css('h2')).nativeElement;
+    const header = fixture.debugElement.query(By.css('h1')).nativeElement;
     expect(header.innerHTML).toContain('item.edit.public.header');
     const description = fixture.debugElement.query(By.css('p')).nativeElement;
     expect(description.innerHTML).toContain('item.edit.public.description');

diff --git a/src/app/item-page/edit-item-page/item-reinstate/item-reinstate.component.spec.ts b/src/app/item-page/edit-item-page/item-reinstate/item-reinstate.component.spec.ts
@@ -76,7 +76,7 @@ describe('ItemReinstateComponent', () => {
   });
 
   it('should render a page with messages based on the \'reinstate\' messageKey', () => {
-    const header = fixture.debugElement.query(By.css('h2')).nativeElement;
+    const header = fixture.debugElement.query(By.css('h1')).nativeElement;
     expect(header.innerHTML).toContain('item.edit.reinstate.header');
     const description = fixture.debugElement.query(By.css('p')).nativeElement;
     expect(description.innerHTML).toContain('item.edit.reinstate.description');

diff --git a/...item-page/item-relationships/edit-relationship-list/edit-relationship-list.component.html b/...item-page/item-relationships/edit-relationship-list/edit-relationship-list.component.html
@@ -1,10 +1,10 @@
-<h5>
+<h2 class="h4">
     {{getRelationshipMessageKey() | async | translate}}
     <button class="ml-2 btn btn-success" [disabled]="(hasChanges | async)" (click)="openLookup()">
         <i class="fas fa-plus"></i>
         <span class="d-none d-sm-inline">&nbsp;{{"item.edit.relationships.edit.buttons.add" | translate}}</span>
     </button>
-</h5>
+</h2>
 <ng-container *ngVar="updates$ | async as updates">
     <ng-container *ngIf="updates && !(loading$ | async)">
         <ng-container *ngVar="updates | dsObjectValues as updateValues">

diff --git a/src/app/item-page/edit-item-page/item-withdraw/item-withdraw.component.spec.ts b/src/app/item-page/edit-item-page/item-withdraw/item-withdraw.component.spec.ts
@@ -74,7 +74,7 @@ describe('ItemWithdrawComponent', () => {
   });
 
   it('should render a page with messages based on the \'withdraw\' messageKey', () => {
-    const header = fixture.debugElement.query(By.css('h2')).nativeElement;
+    const header = fixture.debugElement.query(By.css('h1')).nativeElement;
     expect(header.innerHTML).toContain('item.edit.withdraw.header');
     const description = fixture.debugElement.query(By.css('p')).nativeElement;
     expect(description.innerHTML).toContain('item.edit.withdraw.description');

diff --git a/...pp/item-page/edit-item-page/simple-item-action/abstract-simple-item-action.component.html b/...pp/item-page/edit-item-page/simple-item-action/abstract-simple-item-action.component.html
@@ -1,7 +1,7 @@
 <div class="container">
     <div class="row">
         <div class="col-12">
-            <h2>{{headerMessage | translate: {id: item.handle} }}</h2>
+            <h1>{{headerMessage | translate: {id: item.handle} }}</h1>
             <p>{{descriptionMessage | translate}}</p>
             <ds-modify-item-overview [item]="item"></ds-modify-item-overview>
           <div class="space-children-mr">

diff --git a/...item-page/edit-item-page/simple-item-action/abstract-simple-item-action.component.spec.ts b/...item-page/edit-item-page/simple-item-action/abstract-simple-item-action.component.spec.ts
@@ -111,7 +111,7 @@ describe('AbstractSimpleItemActionComponent', () => {
   });
 
   it('should render a page with messages based on the provided messageKey', () => {
-    const header = fixture.debugElement.query(By.css('h2')).nativeElement;
+    const header = fixture.debugElement.query(By.css('h1')).nativeElement;
     expect(header.innerHTML).toContain('item.edit.myEditAction.header');
 
     const description = fixture.debugElement.query(By.css('p')).nativeElement;

diff --git a/src/app/item-page/orcid-page/orcid-auth/orcid-auth.component.html b/src/app/item-page/orcid-page/orcid-auth/orcid-auth.component.html
@@ -1,5 +1,5 @@
 <div class="container mb-5">
-  <h2>{{'person.orcid.registry.auth' | translate}}</h2>
+  <h1>{{'person.orcid.registry.auth' | translate}}</h1>
   <ng-container *ngIf="(isLinkedToOrcid() | async); then orcidLinked; else orcidNotLinked"></ng-container>
 </div>
 

diff --git a/src/app/item-page/orcid-page/orcid-page.component.html b/src/app/item-page/orcid-page/orcid-page.component.html
@@ -1,13 +1,3 @@
-<div *ngIf="!(processingConnection | async) && (item | async)" class="container">
-  <div class="button-row bottom mb-3">
-    <div class="text-right">
-      <a [routerLink]="getItemPage()" role="button" class="btn btn-outline-secondary" data-test="back-button">
-        <i class="fas fa-arrow-left"></i> {{'item.orcid.return' | translate}}
-      </a>
-    </div>
-  </div>
-</div>
-
 <ds-loading *ngIf="(processingConnection | async)" [message]="'person.page.orcid.link.processing' | translate"></ds-loading>
 <div class="container" *ngIf="!(processingConnection | async) && !(connectionStatus | async)" data-test="error-box">
   <ds-alert [type]="'alert-danger'">{{'person.page.orcid.link.error.message' | translate}}</ds-alert>
@@ -17,3 +7,13 @@
   <ds-orcid-sync-setting *ngIf="isLinkedToOrcid()" [item]="(item | async)" (settingsUpdated)="updateItem()" data-test="orcid-sync-setting"></ds-orcid-sync-setting>
   <ds-orcid-queue *ngIf="isLinkedToOrcid()" [item]="(item | async)"></ds-orcid-queue>
 </ng-container>
+
+<div *ngIf="!(processingConnection | async) && (item | async)" class="container">
+  <div class="button-row bottom mb-3">
+    <div class="text-right">
+      <a [routerLink]="getItemPage()" role="button" class="btn btn-outline-secondary" data-test="back-button">
+        <i class="fas fa-arrow-left"></i> {{'item.orcid.return' | translate}}
+      </a>
+    </div>
+  </div>
+</div>