Skip to content

Commit

Permalink
Fixed accessibility issues about header ordering
Browse files Browse the repository at this point in the history
  • Loading branch information
alexandrevryghem committed Dec 3, 2023
1 parent ffa0055 commit 6e4117a
Show file tree
Hide file tree
Showing 56 changed files with 112 additions and 96 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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"
Expand All @@ -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>
Expand Down
Original file line number Diff line number Diff line change
@@ -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"
Expand Down Expand Up @@ -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',
Expand All @@ -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">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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'">
Expand All @@ -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">
Expand Down
Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
@@ -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">
Expand Down
Original file line number Diff line number Diff line change
@@ -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>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
@@ -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>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
@@ -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"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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()">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
Original file line number Diff line number Diff line change
@@ -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">
Expand Down
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
Original file line number Diff line number Diff line change
@@ -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">
Expand Down
Original file line number Diff line number Diff line change
@@ -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"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down
Original file line number Diff line number Diff line change
@@ -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">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down
Original file line number Diff line number Diff line change
@@ -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">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down
Original file line number Diff line number Diff line change
@@ -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">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Original file line number Diff line number Diff line change
@@ -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>

Expand Down
20 changes: 10 additions & 10 deletions src/app/item-page/orcid-page/orcid-page.component.html
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -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>
Loading

0 comments on commit 6e4117a

Please sign in to comment.