[CST-4659] Deque accessibility issues - 470001

This commit is contained in:
Davide Negretti
2021-09-30 18:11:24 +02:00
parent a2eb16d328
commit a80d9694d8
4 changed files with 26 additions and 6 deletions

View File

@@ -1,6 +1,6 @@
<div class="d-flex flex-column align-items-center justify-content-around mr-3"> <div class="d-flex flex-column align-items-center justify-content-around mr-3">
<button <button
class="btn btn-arrow" class="btn btn-link-focus"
type="button" type="button"
tabindex="0" tabindex="0"
[disabled]="disabled" [disabled]="disabled"
@@ -25,7 +25,7 @@
aria-label="name" aria-label="name"
> >
<button <button
class="btn btn-arrow" class="btn btn-link-focus"
type="button" type="button"
tabindex="0" tabindex="0"
[disabled]="disabled" [disabled]="disabled"

View File

@@ -24,7 +24,7 @@ input {
max-width: 80px !important; max-width: 80px !important;
} }
.btn-arrow { .btn-link-focus {
// behave as btn-link but does not override box-shadow of btn-link:focus // behave as btn-link but does not override box-shadow of btn-link:focus
font-weight: $font-weight-normal; font-weight: $font-weight-normal;
color: $link-color; color: $link-color;

View File

@@ -17,3 +17,23 @@
z-index: var(--ds-submission-footer-z-index); z-index: var(--ds-submission-footer-z-index);
} }
.btn-link-focus {
// behave as btn-link but does not override box-shadow of btn-link:focus
font-weight: $font-weight-normal;
color: $link-color;
text-decoration: $link-decoration;
@include hover {
color: $link-hover-color;
text-decoration: $link-hover-decoration;
}
&:disabled,
&.disabled {
color: $btn-link-disabled-color;
pointer-events: none;
}
&:focus,
&.focus {
text-decoration: $link-hover-decoration;
}
}

View File

@@ -10,16 +10,16 @@
</div> </div>
<div class="float-right w-15" [class.sticky-buttons]="!readMode"> <div class="float-right w-15" [class.sticky-buttons]="!readMode">
<ng-container *ngIf="readMode"> <ng-container *ngIf="readMode">
<ds-file-download-link [cssClasses]="'btn btn-link'" [isBlank]="true" [bitstream]="getBitstream()"> <ds-file-download-link [cssClasses]="'btn btn-link-focus'" [isBlank]="true" [bitstream]="getBitstream()">
<i class="fa fa-download fa-2x text-normal" aria-hidden="true"></i> <i class="fa fa-download fa-2x text-normal" aria-hidden="true"></i>
</ds-file-download-link> </ds-file-download-link>
<button class="btn btn-link" <button class="btn btn-link-focus"
[attr.aria-label]="'submission.sections.upload.edit.title' | translate" [attr.aria-label]="'submission.sections.upload.edit.title' | translate"
title="{{ 'submission.sections.upload.edit.title' | translate }}" title="{{ 'submission.sections.upload.edit.title' | translate }}"
(click)="$event.preventDefault();switchMode();"> (click)="$event.preventDefault();switchMode();">
<i class="fa fa-edit fa-2x text-normal"></i> <i class="fa fa-edit fa-2x text-normal"></i>
</button> </button>
<button class="btn btn-link" <button class="btn btn-link-focus"
[attr.aria-label]="'submission.sections.upload.delete.confirm.title' | translate" [attr.aria-label]="'submission.sections.upload.delete.confirm.title' | translate"
title="{{ 'submission.sections.upload.delete.confirm.title' | translate }}" title="{{ 'submission.sections.upload.delete.confirm.title' | translate }}"
[disabled]="(processingDelete$ | async)" [disabled]="(processingDelete$ | async)"