Fixed item page accessibility issues

This commit is contained in:
Alexandre Vryghem
2023-12-03 16:37:08 +01:00
parent 1db83ba3c5
commit 8ba17c991e
11 changed files with 31 additions and 14 deletions

View File

@@ -1,5 +1,5 @@
<div class="container"> <div class="container">
<h3>{{'bitstream.download.page' | translate:{ bitstream: dsoNameService.getName((bitstream$ | async)) } }}</h3> <h1 class="h2">{{'bitstream.download.page' | translate:{ bitstream: dsoNameService.getName((bitstream$ | async)) } }}</h1>
<div class="pt-3"> <div class="pt-3">
<button (click)="back()" class="btn btn-outline-secondary"> <button (click)="back()" class="btn btn-outline-secondary">
<i class="fas fa-arrow-left"></i> {{'bitstream.download.page.back' | translate}} <i class="fas fa-arrow-left"></i> {{'bitstream.download.page.back' | translate}}

View File

@@ -4,6 +4,7 @@
<div class="flex-grow-1 ds-flex-cell ds-value-cell d-flex align-items-center" *ngVar="(mdRepresentation$ | async) as mdRepresentation" role="cell"> <div class="flex-grow-1 ds-flex-cell ds-value-cell d-flex align-items-center" *ngVar="(mdRepresentation$ | async) as mdRepresentation" role="cell">
<div class="dont-break-out preserve-line-breaks" *ngIf="!mdValue.editing && !mdRepresentation">{{ mdValue.newValue.value }}</div> <div class="dont-break-out preserve-line-breaks" *ngIf="!mdValue.editing && !mdRepresentation">{{ mdValue.newValue.value }}</div>
<textarea class="form-control" rows="5" *ngIf="mdValue.editing && !mdRepresentation" [(ngModel)]="mdValue.newValue.value" <textarea class="form-control" rows="5" *ngIf="mdValue.editing && !mdRepresentation" [(ngModel)]="mdValue.newValue.value"
[attr.aria-label]="(dsoType + '.edit.metadata.edit.value') | translate"
[dsDebounce]="300" (onDebounce)="confirm.emit(false)"></textarea> [dsDebounce]="300" (onDebounce)="confirm.emit(false)"></textarea>
<div class="d-flex" *ngIf="mdRepresentation"> <div class="d-flex" *ngIf="mdRepresentation">
<a class="mr-2" target="_blank" [routerLink]="mdRepresentationItemRoute$ | async">{{ mdRepresentationName$ | async }}</a> <a class="mr-2" target="_blank" [routerLink]="mdRepresentationItemRoute$ | async">{{ mdRepresentationName$ | async }}</a>
@@ -13,6 +14,7 @@
<div class="ds-flex-cell ds-lang-cell" role="cell"> <div class="ds-flex-cell ds-lang-cell" role="cell">
<div class="dont-break-out preserve-line-breaks" *ngIf="!mdValue.editing">{{ mdValue.newValue.language }}</div> <div class="dont-break-out preserve-line-breaks" *ngIf="!mdValue.editing">{{ mdValue.newValue.language }}</div>
<input class="form-control" type="text" *ngIf="mdValue.editing" [(ngModel)]="mdValue.newValue.language" <input class="form-control" type="text" *ngIf="mdValue.editing" [(ngModel)]="mdValue.newValue.language"
[attr.aria-label]="(dsoType + '.edit.metadata.edit.language') | translate"
[dsDebounce]="300" (onDebounce)="confirm.emit(false)" /> [dsDebounce]="300" (onDebounce)="confirm.emit(false)" />
</div> </div>
<div class="text-center ds-flex-cell ds-edit-cell" role="cell"> <div class="text-center ds-flex-cell ds-edit-cell" role="cell">

View File

@@ -2,7 +2,7 @@
<ng-container *ngIf="bundles"> <ng-container *ngIf="bundles">
<div class="row"> <div class="row">
<div class="col-12 mb-2"> <div class="col-12 mb-2">
<h2>{{'item.bitstreams.upload.title' | translate}}</h2> <h1>{{'item.bitstreams.upload.title' | translate}}</h1>
<ng-container *ngVar="(itemRD$ | async)?.payload as item"> <ng-container *ngVar="(itemRD$ | async)?.payload as item">
<div *ngIf="item"> <div *ngIf="item">
<span class="font-weight-bold">{{'item.bitstreams.upload.item' | translate}}</span> <span class="font-weight-bold">{{'item.bitstreams.upload.item' | translate}}</span>

View File

@@ -1,7 +1,7 @@
<ds-metadata-field-wrapper [label]="label | translate"> <ds-metadata-field-wrapper [label]="label | translate">
<div *ngVar="(originals$ | async)?.payload as originals"> <div *ngVar="(originals$ | async)?.payload as originals">
<div *ngIf="hasValuesInBundle(originals)"> <div *ngIf="hasValuesInBundle(originals)">
<h5 class="simple-view-element-header">{{"item.page.filesection.original.bundle" | translate}}</h5> <h3 class="h5 simple-view-element-header">{{"item.page.filesection.original.bundle" | translate}}</h3>
<ds-pagination *ngIf="originals?.page?.length > 0" <ds-pagination *ngIf="originals?.page?.length > 0"
[hideGear]="true" [hideGear]="true"
[hidePagerWhenSinglePage]="true" [hidePagerWhenSinglePage]="true"
@@ -44,7 +44,7 @@
</div> </div>
<div *ngVar="(licenses$ | async)?.payload as licenses"> <div *ngVar="(licenses$ | async)?.payload as licenses">
<div *ngIf="hasValuesInBundle(licenses)"> <div *ngIf="hasValuesInBundle(licenses)">
<h5 class="simple-view-element-header">{{"item.page.filesection.license.bundle" | translate}}</h5> <h3 class="h5 simple-view-element-header">{{"item.page.filesection.license.bundle" | translate}}</h3>
<ds-pagination *ngIf="licenses?.page?.length > 0" <ds-pagination *ngIf="licenses?.page?.length > 0"
[hideGear]="true" [hideGear]="true"
[hidePagerWhenSinglePage]="true" [hidePagerWhenSinglePage]="true"

View File

@@ -1,6 +1,6 @@
<ng-container *ngIf="relationTypes.length > 1"> <ng-container *ngIf="relationTypes.length > 1">
<ul ngbNav #tabs="ngbNav" [destroyOnHide]="true" [activeId]="activeTab$ | async" (navChange)="onTabChange($event)" class="nav-tabs"> <ul ngbNav #tabs="ngbNav" [destroyOnHide]="true" [activeId]="activeTab$ | async" (navChange)="onTabChange($event)" class="nav-tabs">
<li *ngFor="let relationType of relationTypes" [ngbNavItem]="relationType.filter"> <li *ngFor="let relationType of relationTypes" [ngbNavItem]="relationType.filter" rel="presentation">
<a ngbNavLink>{{'item.page.relationships.' + relationType.label | translate}}</a> <a ngbNavLink>{{'item.page.relationships.' + relationType.label | translate}}</a>
<ng-template ngbNavContent> <ng-template ngbNavContent>
<div class="mt-4"> <div class="mt-4">

View File

@@ -1,7 +1,7 @@
<div *ngVar="(versionsRD$ | async)?.payload as versions"> <div *ngVar="(versionsRD$ | async)?.payload as versions">
<div *ngVar="(versionRD$ | async)?.payload as itemVersion"> <div *ngVar="(versionRD$ | async)?.payload as itemVersion">
<div class="mb-2" *ngIf="versions?.page?.length > 0 || displayWhenEmpty"> <div class="mb-2" *ngIf="versions?.page?.length > 0 || displayWhenEmpty">
<h2 *ngIf="displayTitle">{{"item.version.history.head" | translate}}</h2> <h2 *ngIf="displayTitle" class="h4">{{"item.version.history.head" | translate}}</h2>
<ds-alert [type]="AlertTypeEnum.Info" *ngIf="itemVersion"> <ds-alert [type]="AlertTypeEnum.Info" *ngIf="itemVersion">
{{ "item.version.history.selected.alert" | translate : {version: itemVersion.version} }} {{ "item.version.history.selected.alert" | translate : {version: itemVersion.version} }}
</ds-alert> </ds-alert>
@@ -98,8 +98,9 @@
<ng-container *ngIf="isThisBeingEdited(version); then editSummary else showSummary"></ng-container> <ng-container *ngIf="isThisBeingEdited(version); then editSummary else showSummary"></ng-container>
<ng-template #showSummary>{{version?.summary}}</ng-template> <ng-template #showSummary>{{version?.summary}}</ng-template>
<ng-template #editSummary> <ng-template #editSummary>
<input class="form-control" type="text" [(ngModel)]="versionBeingEditedSummary" <input [attr.aria-label]="'item.version.history.table.action.editSummary' | translate"
(keyup.enter)="onSummarySubmit()"/> [(ngModel)]="versionBeingEditedSummary" (keyup.enter)="onSummarySubmit()"
class="form-control" type="text"/>
</ng-template> </ng-template>
</div> </div>

View File

@@ -1,5 +1,5 @@
<a [routerLink]="(bitstreamPath$| async)?.routerLink" class="dont-break-out" [queryParams]="(bitstreamPath$| async)?.queryParams" [target]="isBlank ? '_blank': '_self'" [ngClass]="cssClasses"> <a [routerLink]="(bitstreamPath$| async)?.routerLink" class="dont-break-out" [queryParams]="(bitstreamPath$| async)?.queryParams" [target]="isBlank ? '_blank': '_self'" [ngClass]="cssClasses">
<span *ngIf="!(canDownload$ |async)" class="pr-1"><i class="fas fa-lock"></i></span> <span *ngIf="!(canDownload$ |async)" [attr.aria-label]="'file-download-link.restricted' | translate" class="pr-1"><i class="fas fa-lock"></i></span>
<ng-container *ngTemplateOutlet="content"></ng-container> <ng-container *ngTemplateOutlet="content"></ng-container>
</a> </a>

View File

@@ -10,6 +10,7 @@ import { FeatureID } from '../../core/data/feature-authorization/feature-id';
import { Item } from '../../core/shared/item.model'; import { Item } from '../../core/shared/item.model';
import { getItemModuleRoute } from '../../item-page/item-page-routing-paths'; import { getItemModuleRoute } from '../../item-page/item-page-routing-paths';
import { RouterLinkDirectiveStub } from '../testing/router-link-directive.stub'; import { RouterLinkDirectiveStub } from '../testing/router-link-directive.stub';
import { TranslateModule } from '@ngx-translate/core';
describe('FileDownloadLinkComponent', () => { describe('FileDownloadLinkComponent', () => {
let component: FileDownloadLinkComponent; let component: FileDownloadLinkComponent;
@@ -41,6 +42,9 @@ describe('FileDownloadLinkComponent', () => {
function initTestbed() { function initTestbed() {
TestBed.configureTestingModule({ TestBed.configureTestingModule({
imports: [
TranslateModule.forRoot(),
],
declarations: [FileDownloadLinkComponent, RouterLinkDirectiveStub], declarations: [FileDownloadLinkComponent, RouterLinkDirectiveStub],
providers: [ providers: [
{provide: AuthorizationDataService, useValue: authorizationService}, {provide: AuthorizationDataService, useValue: authorizationService},

View File

@@ -9,7 +9,7 @@
<ds-themed-loading *ngIf="!item || !collection"></ds-themed-loading> <ds-themed-loading *ngIf="!item || !collection"></ds-themed-loading>
<ng-container *ngIf="item && collection"> <ng-container *ngIf="item && collection">
<ul ngbNav #nav="ngbNav" class="nav-tabs"> <ul ngbNav #nav="ngbNav" class="nav-tabs">
<li ngbNavItem> <li ngbNavItem role="presentation">
<a ngbNavLink>{{'submission.sections.describe.relationship-lookup.search-tab.tab-title.' + relationshipOptions.relationshipType | translate : { count: (totalInternal$ | async)} }}</a> <a ngbNavLink>{{'submission.sections.describe.relationship-lookup.search-tab.tab-title.' + relationshipOptions.relationshipType | translate : { count: (totalInternal$ | async)} }}</a>
<ng-template ngbNavContent> <ng-template ngbNavContent>
<ds-themed-dynamic-lookup-relation-search-tab <ds-themed-dynamic-lookup-relation-search-tab
@@ -31,7 +31,7 @@
</ds-themed-dynamic-lookup-relation-search-tab> </ds-themed-dynamic-lookup-relation-search-tab>
</ng-template> </ng-template>
</li> </li>
<li ngbNavItem *ngFor="let source of (externalSourcesRD$ | async); let idx = index"> <li ngbNavItem *ngFor="let source of (externalSourcesRD$ | async); let idx = index" role="presentation">
<a ngbNavLink>{{'submission.sections.describe.relationship-lookup.search-tab.tab-title.' + source.id | translate : { count: (totalExternal$ | async)[idx] } }}</a> <a ngbNavLink>{{'submission.sections.describe.relationship-lookup.search-tab.tab-title.' + source.id | translate : { count: (totalExternal$ | async)[idx] } }}</a>
<ng-template ngbNavContent> <ng-template ngbNavContent>
<ds-themed-dynamic-lookup-relation-external-source-tab <ds-themed-dynamic-lookup-relation-external-source-tab
@@ -49,7 +49,7 @@
</ds-themed-dynamic-lookup-relation-external-source-tab> </ds-themed-dynamic-lookup-relation-external-source-tab>
</ng-template> </ng-template>
</li> </li>
<li ngbNavItem *ngIf="!isEditRelationship"> <li ngbNavItem *ngIf="!isEditRelationship" role="presentation">
<a ngbNavLink>{{'submission.sections.describe.relationship-lookup.selection-tab.tab-title' | translate : { count: (selection$ | async)?.length } }}</a> <a ngbNavLink>{{'submission.sections.describe.relationship-lookup.selection-tab.tab-title' | translate : { count: (selection$ | async)?.length } }}</a>
<ng-template ngbNavContent> <ng-template ngbNavContent>
<ds-dynamic-lookup-relation-selection-tab <ds-dynamic-lookup-relation-selection-tab

View File

@@ -9,13 +9,13 @@
<label for="ResourcePolicyObject">{{'resource-policies.form.eperson-group-list.label' | translate}}</label> <label for="ResourcePolicyObject">{{'resource-policies.form.eperson-group-list.label' | translate}}</label>
<input id="ResourcePolicyObject" class="form-control mb-3" type="text" [value]="resourcePolicyTargetName$ | async"> <input id="ResourcePolicyObject" class="form-control mb-3" type="text" [value]="resourcePolicyTargetName$ | async">
<ul ngbNav #nav="ngbNav" class="nav-pills" [(activeId)]="navActiveId" (navChange)="onNavChange($event)"> <ul ngbNav #nav="ngbNav" class="nav-pills" [(activeId)]="navActiveId" (navChange)="onNavChange($event)">
<li [ngbNavItem]="'eperson'"> <li [ngbNavItem]="'eperson'" role="presentation">
<a ngbNavLink>{{'resource-policies.form.eperson-group-list.tab.eperson' | translate}}</a> <a ngbNavLink>{{'resource-policies.form.eperson-group-list.tab.eperson' | translate}}</a>
<ng-template ngbNavContent> <ng-template ngbNavContent>
<ds-eperson-group-list (select)="updateObjectSelected($event, true)"></ds-eperson-group-list> <ds-eperson-group-list (select)="updateObjectSelected($event, true)"></ds-eperson-group-list>
</ng-template> </ng-template>
</li> </li>
<li [ngbNavItem]="'group'"> <li [ngbNavItem]="'group'" role="presentation">
<a ngbNavLink>{{'resource-policies.form.eperson-group-list.tab.group' | translate}}</a> <a ngbNavLink>{{'resource-policies.form.eperson-group-list.tab.group' | translate}}</a>
<ng-template ngbNavContent> <ng-template ngbNavContent>
<ds-eperson-group-list [isListOfEPerson]="false" <ds-eperson-group-list [isListOfEPerson]="false"

View File

@@ -1622,6 +1622,8 @@
"feed.description": "Syndication feed", "feed.description": "Syndication feed",
"file-download-link.restricted": "Restricted bitstream",
"file-section.error.header": "Error obtaining files for this item", "file-section.error.header": "Error obtaining files for this item",
"footer.copyright": "copyright © 2002-{{ year }}", "footer.copyright": "copyright © 2002-{{ year }}",
@@ -2096,6 +2098,10 @@
"item.edit.metadata.discard-button": "Discard", "item.edit.metadata.discard-button": "Discard",
"item.edit.metadata.edit.language": "Edit language",
"item.edit.metadata.edit.value": "Edit value",
"item.edit.metadata.edit.buttons.confirm": "Confirm", "item.edit.metadata.edit.buttons.confirm": "Confirm",
"item.edit.metadata.edit.buttons.drag": "Drag to reorder", "item.edit.metadata.edit.buttons.drag": "Drag to reorder",
@@ -2616,6 +2622,10 @@
"itemtemplate.edit.metadata.discard-button": "Discard", "itemtemplate.edit.metadata.discard-button": "Discard",
"itemtemplate.edit.metadata.edit.language": "Edit language",
"itemtemplate.edit.metadata.edit.value": "Edit value",
"itemtemplate.edit.metadata.edit.buttons.confirm": "Confirm", "itemtemplate.edit.metadata.edit.buttons.confirm": "Confirm",
"itemtemplate.edit.metadata.edit.buttons.drag": "Drag to reorder", "itemtemplate.edit.metadata.edit.buttons.drag": "Drag to reorder",