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">
<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">
<button (click)="back()" class="btn btn-outline-secondary">
<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="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"
[attr.aria-label]="(dsoType + '.edit.metadata.edit.value') | translate"
[dsDebounce]="300" (onDebounce)="confirm.emit(false)"></textarea>
<div class="d-flex" *ngIf="mdRepresentation">
<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="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"
[attr.aria-label]="(dsoType + '.edit.metadata.edit.language') | translate"
[dsDebounce]="300" (onDebounce)="confirm.emit(false)" />
</div>
<div class="text-center ds-flex-cell ds-edit-cell" role="cell">

View File

@@ -2,7 +2,7 @@
<ng-container *ngIf="bundles">
<div class="row">
<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">
<div *ngIf="item">
<span class="font-weight-bold">{{'item.bitstreams.upload.item' | translate}}</span>

View File

@@ -1,7 +1,7 @@
<ds-metadata-field-wrapper [label]="label | translate">
<div *ngVar="(originals$ | async)?.payload as 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"
[hideGear]="true"
[hidePagerWhenSinglePage]="true"
@@ -44,7 +44,7 @@
</div>
<div *ngVar="(licenses$ | async)?.payload as 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"
[hideGear]="true"
[hidePagerWhenSinglePage]="true"

View File

@@ -1,6 +1,6 @@
<ng-container *ngIf="relationTypes.length > 1">
<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>
<ng-template ngbNavContent>
<div class="mt-4">

View File

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

View File

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

View File

@@ -9,7 +9,7 @@
<ds-themed-loading *ngIf="!item || !collection"></ds-themed-loading>
<ng-container *ngIf="item && collection">
<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>
<ng-template ngbNavContent>
<ds-themed-dynamic-lookup-relation-search-tab
@@ -31,7 +31,7 @@
</ds-themed-dynamic-lookup-relation-search-tab>
</ng-template>
</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>
<ng-template ngbNavContent>
<ds-themed-dynamic-lookup-relation-external-source-tab
@@ -49,7 +49,7 @@
</ds-themed-dynamic-lookup-relation-external-source-tab>
</ng-template>
</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>
<ng-template ngbNavContent>
<ds-dynamic-lookup-relation-selection-tab

View File

@@ -9,13 +9,13 @@
<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">
<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>
<ng-template ngbNavContent>
<ds-eperson-group-list (select)="updateObjectSelected($event, true)"></ds-eperson-group-list>
</ng-template>
</li>
<li [ngbNavItem]="'group'">
<li [ngbNavItem]="'group'" role="presentation">
<a ngbNavLink>{{'resource-policies.form.eperson-group-list.tab.group' | translate}}</a>
<ng-template ngbNavContent>
<ds-eperson-group-list [isListOfEPerson]="false"

View File

@@ -1622,6 +1622,8 @@
"feed.description": "Syndication feed",
"file-download-link.restricted": "Restricted bitstream",
"file-section.error.header": "Error obtaining files for this item",
"footer.copyright": "copyright © 2002-{{ year }}",
@@ -2096,6 +2098,10 @@
"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.drag": "Drag to reorder",
@@ -2616,6 +2622,10 @@
"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.drag": "Drag to reorder",