Skip to content

Commit 8ba14aa

Browse files
tdonohuetdonohue
authored
Merge pull request DSpace#2683 from alexandrevryghem/fix-accessibility-issues_contribute-main
Fix accessibility issues
2 parents 08df2ea + 4545b53 commit 8ba14aa

128 files changed

Lines changed: 513 additions & 343 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎cypress/e2e/header.cy.ts‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,6 @@ describe('Header', () => {
88
cy.get('ds-header').should('be.visible');
99

1010
// Analyze <ds-header> for accessibility
11-
testA11y({
12-
include: ['ds-header'],
13-
exclude: [
14-
['#search-navbar-container'] // search in navbar has duplicative ID. Will be fixed in #1174
15-
],
16-
});
11+
testA11y('ds-header');
1712
});
1813
});

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,7 @@
121121
"ngx-infinite-scroll": "^15.0.0",
122122
"ngx-pagination": "6.0.3",
123123
"ngx-sortablejs": "^11.1.0",
124-
"ngx-ui-switch": "^14.0.3",
124+
"ngx-ui-switch": "^14.1.0",
125125
"nouislider": "^15.7.1",
126126
"pem": "1.14.7",
127127
"prop-types": "^15.8.1",

‎src/app/access-control/bulk-access/browse/bulk-access-browse.component.html‎

Lines changed: 52 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,69 @@
11
<ngb-accordion #acc="ngbAccordion" [activeIds]="'browse'">
22
<ngb-panel [id]="'browse'">
33
<ng-template ngbPanelHeader>
4-
<div class="w-100 d-flex justify-content-between collapse-toggle" ngbPanelToggle (click)="acc.toggle('browse')"
4+
<div class="w-100 d-flex gap-3 justify-content-between collapse-toggle" ngbPanelToggle (click)="acc.toggle('browse')"
55
data-test="browse">
66
<button type="button" class="btn btn-link p-0" (click)="$event.preventDefault()"
7-
[attr.aria-expanded]="!acc.isExpanded('browse')"
8-
aria-controls="collapsePanels">
7+
[attr.aria-expanded]="acc.isExpanded('browse')"
8+
aria-controls="bulk-access-browse-panel-content">
99
{{ 'admin.access-control.bulk-access-browse.header' | translate }}
1010
</button>
11-
<div class="text-right d-flex">
12-
<div class="ml-3 d-inline-block">
11+
<div class="text-right d-flex gap-2">
12+
<div class="d-flex my-auto">
1313
<span *ngIf="acc.isExpanded('browse')" class="fas fa-chevron-up fa-fw"></span>
1414
<span *ngIf="!acc.isExpanded('browse')" class="fas fa-chevron-down fa-fw"></span>
1515
</div>
1616
</div>
1717
</div>
1818
</ng-template>
1919
<ng-template ngbPanelContent>
20-
<ul ngbNav #nav="ngbNav" [(activeId)]="activateId" class="nav-pills">
21-
<li [ngbNavItem]="'search'">
22-
<a ngbNavLink>{{'admin.access-control.bulk-access-browse.search.header' | translate}}</a>
23-
<ng-template ngbNavContent>
24-
<div class="mx-n3">
25-
<ds-themed-search [configuration]="'administrativeBulkAccess'"
26-
[selectable]="true"
27-
[selectionConfig]="{ repeatable: true, listId: listId }"
28-
[showThumbnails]="false"></ds-themed-search>
29-
</div>
30-
</ng-template>
31-
</li>
32-
<li [ngbNavItem]="'selected'">
33-
<a ngbNavLink>
34-
{{'admin.access-control.bulk-access-browse.selected.header' | translate: {number: ((objectsSelected$ | async)?.payload?.totalElements) ? (objectsSelected$ | async)?.payload?.totalElements : '0'} }}
35-
</a>
36-
<ng-template ngbNavContent>
37-
<ds-pagination
38-
[paginationOptions]="(paginationOptions$ | async)"
39-
[pageInfoState]="(objectsSelected$|async)?.payload.pageInfo"
40-
[collectionSize]="(objectsSelected$|async)?.payload?.totalElements"
41-
[objects]="(objectsSelected$|async)"
42-
[showPaginator]="false"
43-
(prev)="pagePrev()"
44-
(next)="pageNext()">
45-
<ul *ngIf="(objectsSelected$|async)?.hasSucceeded" class="list-unstyled ml-4">
46-
<li *ngFor='let object of (objectsSelected$|async)?.payload?.page | paginate: { itemsPerPage: (paginationOptions$ | async).pageSize,
47-
currentPage: (paginationOptions$ | async).currentPage, totalItems: (objectsSelected$|async)?.payload?.page.length }; let i = index; let last = last '
48-
class="mt-4 mb-4 d-flex"
49-
[attr.data-test]="'list-object' | dsBrowserOnly">
50-
<ds-selectable-list-item-control [index]="i"
51-
[object]="object"
52-
[selectionConfig]="{ repeatable: true, listId: listId }"></ds-selectable-list-item-control>
53-
<ds-listable-object-component-loader [listID]="listId"
54-
[index]="i"
55-
[object]="object"
56-
[showThumbnails]="false"
57-
[viewMode]="'list'"></ds-listable-object-component-loader>
58-
</li>
59-
</ul>
60-
</ds-pagination>
61-
</ng-template>
62-
</li>
63-
</ul>
64-
<div [ngbNavOutlet]="nav" class="mt-5"></div>
20+
<div id="bulk-access-browse-panel-content">
21+
<ul ngbNav #nav="ngbNav" [(activeId)]="activateId" class="nav-pills">
22+
<li [ngbNavItem]="'search'" role="presentation">
23+
<a ngbNavLink>{{'admin.access-control.bulk-access-browse.search.header' | translate}}</a>
24+
<ng-template ngbNavContent>
25+
<div class="mx-n3">
26+
<ds-themed-search [configuration]="'administrativeBulkAccess'"
27+
[selectable]="true"
28+
[selectionConfig]="{ repeatable: true, listId: listId }"
29+
[showThumbnails]="false"></ds-themed-search>
30+
</div>
31+
</ng-template>
32+
</li>
33+
<li [ngbNavItem]="'selected'" role="presentation">
34+
<a ngbNavLink>
35+
{{'admin.access-control.bulk-access-browse.selected.header' | translate: {number: ((objectsSelected$ | async)?.payload?.totalElements) ? (objectsSelected$ | async)?.payload?.totalElements : '0'} }}
36+
</a>
37+
<ng-template ngbNavContent>
38+
<ds-pagination
39+
[paginationOptions]="(paginationOptions$ | async)"
40+
[pageInfoState]="(objectsSelected$|async)?.payload.pageInfo"
41+
[collectionSize]="(objectsSelected$|async)?.payload?.totalElements"
42+
[objects]="(objectsSelected$|async)"
43+
[showPaginator]="false"
44+
(prev)="pagePrev()"
45+
(next)="pageNext()">
46+
<ul *ngIf="(objectsSelected$|async)?.hasSucceeded" class="list-unstyled ml-4">
47+
<li *ngFor='let object of (objectsSelected$|async)?.payload?.page | paginate: { itemsPerPage: (paginationOptions$ | async).pageSize,
48+
currentPage: (paginationOptions$ | async).currentPage, totalItems: (objectsSelected$|async)?.payload?.page.length }; let i = index; let last = last '
49+
class="mt-4 mb-4 d-flex"
50+
[attr.data-test]="'list-object' | dsBrowserOnly">
51+
<ds-selectable-list-item-control [index]="i"
52+
[object]="object"
53+
[selectionConfig]="{ repeatable: true, listId: listId }"></ds-selectable-list-item-control>
54+
<ds-listable-object-component-loader [listID]="listId"
55+
[index]="i"
56+
[object]="object"
57+
[showThumbnails]="false"
58+
[viewMode]="'list'"></ds-listable-object-component-loader>
59+
</li>
60+
</ul>
61+
</ds-pagination>
62+
</ng-template>
63+
</li>
64+
</ul>
65+
<div [ngbNavOutlet]="nav" class="mt-5"></div>
66+
</div>
6567
</ng-template>
6668
</ngb-panel>
6769
</ngb-accordion>

‎src/app/access-control/bulk-access/settings/bulk-access-settings.component.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
11
<ngb-accordion #acc="ngbAccordion" [activeIds]="'settings'">
22
<ngb-panel [id]="'settings'">
33
<ng-template ngbPanelHeader>
4-
<div class="w-100 d-flex justify-content-between collapse-toggle" ngbPanelToggle (click)="acc.toggle('settings')" data-test="settings">
5-
<button type="button" class="btn btn-link p-0" (click)="$event.preventDefault()" [attr.aria-expanded]="!acc.isExpanded('browse')"
6-
aria-controls="collapsePanels">
4+
<div class="w-100 d-flex gap-3 justify-content-between collapse-toggle" ngbPanelToggle (click)="acc.toggle('settings')" data-test="settings">
5+
<button type="button" class="btn btn-link p-0" (click)="$event.preventDefault()" [attr.aria-expanded]="acc.isExpanded('settings')"
6+
aria-controls="bulk-access-settings-panel-content">
77
{{ 'admin.access-control.bulk-access-settings.header' | translate }}
88
</button>
9-
<div class="text-right d-flex">
10-
<div class="ml-3 d-inline-block">
9+
<div class="text-right d-flex gap-2">
10+
<div class="d-flex my-auto">
1111
<span *ngIf="acc.isExpanded('settings')" class="fas fa-chevron-up fa-fw"></span>
1212
<span *ngIf="!acc.isExpanded('settings')" class="fas fa-chevron-down fa-fw"></span>
1313
</div>
1414
</div>
1515
</div>
1616
</ng-template>
1717
<ng-template ngbPanelContent>
18-
<ds-access-control-form-container #dsAccessControlForm [showSubmit]="false"></ds-access-control-form-container>
18+
<ds-access-control-form-container id="bulk-access-settings-panel-content" #dsAccessControlForm [showSubmit]="false"></ds-access-control-form-container>
1919
</ng-template>
2020
</ngb-panel>
2121
</ngb-accordion>

‎src/app/access-control/epeople-registry/epeople-registry.component.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<div class="epeople-registry row">
33
<div class="col-12">
44
<div class="d-flex justify-content-between border-bottom mb-3">
5-
<h2 id="header" class="pb-2">{{labelPrefix + 'head' | translate}}</h2>
5+
<h1 id="header" class="pb-2">{{labelPrefix + 'head' | translate}}</h1>
66

77
<div>
88
<button class="mr-auto btn btn-success addEPerson-button"
@@ -13,9 +13,9 @@ <h2 id="header" class="pb-2">{{labelPrefix + 'head' | translate}}</h2>
1313
</div>
1414
</div>
1515

16-
<h3 id="search" class="border-bottom pb-2">{{labelPrefix + 'search.head' | translate}}
17-
18-
</h3>
16+
<h2 id="search" class="border-bottom pb-2">
17+
{{labelPrefix + 'search.head' | translate}}
18+
</h2>
1919
<form [formGroup]="searchForm" (ngSubmit)="search(searchForm.value)" class="d-flex justify-content-between">
2020
<div>
2121
<select name="scope" id="scope" formControlName="scope" class="form-control" aria-label="Search scope">

‎src/app/access-control/epeople-registry/eperson-form/eperson-form.component.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,11 @@
55
<div *ngIf="epersonService.getActiveEPerson() | async; then editHeader; else createHeader"></div>
66

77
<ng-template #createHeader>
8-
<h2 class="border-bottom pb-2">{{messagePrefix + '.create' | translate}}</h2>
8+
<h1 class="border-bottom pb-2">{{messagePrefix + '.create' | translate}}</h1>
99
</ng-template>
1010

1111
<ng-template #editHeader>
12-
<h2 class="border-bottom pb-2">{{messagePrefix + '.edit' | translate}}</h2>
12+
<h1 class="border-bottom pb-2">{{messagePrefix + '.edit' | translate}}</h1>
1313
</ng-template>
1414

1515
<ds-form [formId]="formId"
@@ -45,7 +45,7 @@ <h2 class="border-bottom pb-2">{{messagePrefix + '.edit' | translate}}</h2>
4545
<ds-themed-loading [showMessage]="false" *ngIf="!formGroup"></ds-themed-loading>
4646

4747
<div *ngIf="epersonService.getActiveEPerson() | async">
48-
<h5>{{messagePrefix + '.groupsEPersonIsMemberOf' | translate}}</h5>
48+
<h2>{{messagePrefix + '.groupsEPersonIsMemberOf' | translate}}</h2>
4949

5050
<ds-themed-loading [showMessage]="false" *ngIf="!(groups | async)"></ds-themed-loading>
5151

‎src/app/access-control/group-registry/group-form/group-form.component.html‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,11 @@
55
<div *ngIf="groupDataService.getActiveGroup() | async; then editHeader; else createHeader"></div>
66

77
<ng-template #createHeader>
8-
<h2 class="border-bottom pb-2">{{messagePrefix + '.head.create' | translate}}</h2>
8+
<h1 class="border-bottom pb-2">{{messagePrefix + '.head.create' | translate}}</h1>
99
</ng-template>
1010

1111
<ng-template #editHeader>
12-
<h2 class="border-bottom pb-2">
12+
<h1 class="border-bottom pb-2">
1313
<span
1414
*dsContextHelp="{
1515
content: 'admin.access-control.groups.form.tooltip.editGroupPage',
@@ -20,7 +20,7 @@ <h2 class="border-bottom pb-2">
2020
>
2121
{{messagePrefix + '.head.edit' | translate}}
2222
</span>
23-
</h2>
23+
</h1>
2424
</ng-template>
2525

2626
<ds-alert *ngIf="groupBeingEdited?.permanent" [type]="AlertTypeEnum.Warning"
@@ -39,9 +39,8 @@ <h2 class="border-bottom pb-2">
3939
<button (click)="onCancel()" type="button"
4040
class="btn btn-outline-secondary"><i class="fas fa-arrow-left"></i> {{messagePrefix + '.return' | translate}}</button>
4141
</div>
42-
<div after *ngIf="(canEdit$ | async) && !groupBeingEdited.permanent" class="btn-group">
43-
<button class="btn btn-danger delete-button" [disabled]="!(canEdit$ | async) || groupBeingEdited.permanent"
44-
(click)="delete()" type="button">
42+
<div after *ngIf="(canEdit$ | async) && !groupBeingEdited?.permanent" class="btn-group">
43+
<button (click)="delete()" class="btn btn-danger delete-button" type="button">
4544
<i class="fa fa-trash"></i> {{ messagePrefix + '.actions.delete' | translate}}
4645
</button>
4746
</div>

‎src/app/access-control/group-registry/group-form/members-list/members-list.component.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<ng-container>
2-
<h3 class="border-bottom pb-2">{{messagePrefix + '.head' | translate}}</h3>
2+
<h2 class="border-bottom pb-2">{{messagePrefix + '.head' | translate}}</h2>
33

4-
<h4>{{messagePrefix + '.headMembers' | translate}}</h4>
4+
<h3>{{messagePrefix + '.headMembers' | translate}}</h3>
55

66
<ds-pagination *ngIf="(ePeopleMembersOfGroup | async)?.totalElements > 0"
77
[paginationOptions]="config"
@@ -55,7 +55,7 @@ <h4>{{messagePrefix + '.headMembers' | translate}}</h4>
5555
{{messagePrefix + '.no-members-yet' | translate}}
5656
</div>
5757

58-
<h4 id="search" class="border-bottom pb-2">
58+
<h3 id="search" class="border-bottom pb-2">
5959
<span
6060
*dsContextHelp="{
6161
content: 'admin.access-control.groups.form.tooltip.editGroup.addEpeople',
@@ -66,7 +66,7 @@ <h4 id="search" class="border-bottom pb-2">
6666
>
6767
{{messagePrefix + '.search.head' | translate}}
6868
</span>
69-
</h4>
69+
</h3>
7070

7171
<form [formGroup]="searchForm" (ngSubmit)="search(searchForm.value)" class="d-flex justify-content-between">
7272
<div class="flex-grow-1 mr-3">

‎src/app/access-control/group-registry/groups-registry.component.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<div class="groups-registry row">
33
<div class="col-12">
44
<div class="d-flex justify-content-between border-bottom mb-3">
5-
<h2 id="header" class="pb-2">{{messagePrefix + 'head' | translate}}</h2>
5+
<h1 id="header" class="pb-2">{{messagePrefix + 'head' | translate}}</h1>
66
<div>
77
<button class="mr-auto btn btn-success"
88
[routerLink]="'create'">
@@ -12,7 +12,7 @@ <h2 id="header" class="pb-2">{{messagePrefix + 'head' | translate}}</h2>
1212
</div>
1313
</div>
1414

15-
<h3 id="search" class="border-bottom pb-2">{{messagePrefix + 'search.head' | translate}}</h3>
15+
<h2 id="search" class="border-bottom pb-2">{{messagePrefix + 'search.head' | translate}}</h2>
1616
<form [formGroup]="searchForm" (ngSubmit)="search(searchForm.value)" class="d-flex justify-content-between">
1717
<div class="flex-grow-1 mr-3">
1818
<div class="form-group input-group">

‎src/app/admin/admin-curation-tasks/admin-curation-tasks.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
<div class="container">
2-
<h2>{{'admin.curation-tasks.header' |translate }}</h2>
2+
<h1>{{'admin.curation-tasks.header' |translate }}</h1>
33
<ds-curation-form></ds-curation-form>
44
</div>

0 commit comments

Comments
 (0)