hazza/dspace-angular
1
0
Fork 1
mirror of https://github.com/DSpace/dspace-angular.git synced 2025-10-07 18:14:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

[DSC-516] Fix accessibility issues

Browse Source
This commit is contained in:
Giuseppe Digilio
2022-04-27 18:59:29 +02:00
parent 0812377b58
commit aaa166593e
4 changed files with 20 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/app/shared/truncatable/truncatable-part/truncatable-part.component.html
View File

@@ -1,11 +1,9 @@
<div class="clamp-{{background}}-{{lines}} min-{{minLines}} {{type}} {{fixedHeight ? 'fixedHeight' : ''}}"> <div class="clamp-{{background}}-{{lines}} min-{{minLines}} {{type}} {{fixedHeight ? 'fixedHeight' : ''}}">
<div class="content dont-break-out" id="dontBreakContent"> <div class="content dont-break-out">
<ng-content></ng-content> <ng-content></ng-content>
</div> </div>
<label for="dontBreakContent" role="button" id="expandButton"> <button class="btn btn-link p-0 expandButton" dsDragClick (actualClick)="toggle()">
<a dsDragClick (actualClick)="toggle()"> <i class="fas fa-angle-down"></i> {{ 'item.truncatable-part.show-more' | translate }}</button>
<i class="fas fa-angle-down"></i> {{ 'item.truncatable-part.show-more' | translate }}</a> <button class="btn btn-link p-0 collapseButton" dsDragClick (actualClick)="toggle()" *ngIf="expand && expandable">
</label> <i class="fas fa-angle-up"></i> {{ 'item.truncatable-part.show-less' | translate }}</button>
<a id="collapseButton" dsDragClick (actualClick)="toggle()" *ngIf="expand && expandable">
<i class="fas fa-angle-up"></i> {{ 'item.truncatable-part.show-less' | translate }}</a>
</div> </div>

9
src/app/shared/truncatable/truncatable-part/truncatable-part.component.scss
View File

@@ -1,10 +1,7 @@
#dontBreakContent:not(.truncated) ~ label{ .content:not(.truncated) ~ button.expandButton {
display: none; display: none;
} }
a { .btn:focus {
color: #207698 !important; box-shadow: none !important;
text-decoration: none !important;
background-color: transparent !important;
cursor: pointer;
} }

4
src/app/shared/truncatable/truncatable-part/truncatable-part.component.spec.ts
View File

@@ -70,7 +70,7 @@ describe('TruncatablePartComponent', () => {
}); });
it('collapseButton should be hidden', () => { it('collapseButton should be hidden', () => {
const a = fixture.debugElement.query(By.css('#collapseButton')); const a = fixture.debugElement.query(By.css('.collapseButton'));
expect(a).toBeNull(); expect(a).toBeNull();
}); });
}); });
@@ -98,7 +98,7 @@ describe('TruncatablePartComponent', () => {
(comp as any).setLines(); (comp as any).setLines();
(comp as any).expandable = true; (comp as any).expandable = true;
fixture.detectChanges(); fixture.detectChanges();
const a = fixture.debugElement.query(By.css('#collapseButton')); const a = fixture.debugElement.query(By.css('.collapseButton'));
expect(a).not.toBeNull(); expect(a).not.toBeNull();
}); });
}); });

9
src/app/shared/truncatable/truncatable-part/truncatable-part.component.ts
View File

@@ -1,4 +1,4 @@
import { Component, Inject, Input, OnDestroy, OnInit, PLATFORM_ID } from '@angular/core'; import { AfterContentChecked, Component, Inject, Input, OnDestroy, OnInit, PLATFORM_ID } from '@angular/core';
import { TruncatableService } from '../truncatable.service'; import { TruncatableService } from '../truncatable.service';
import { hasValue } from '../../empty.util'; import { hasValue } from '../../empty.util';
import { DOCUMENT, isPlatformBrowser } from '@angular/common'; import { DOCUMENT, isPlatformBrowser } from '@angular/common';
@@ -14,7 +14,7 @@ import { NativeWindowRef, NativeWindowService } from '../../../core/services/win
* Component that truncates/clamps a piece of text * Component that truncates/clamps a piece of text
* It needs a TruncatableComponent parent to identify it's current state * It needs a TruncatableComponent parent to identify it's current state
*/ */
export class TruncatablePartComponent implements OnInit, OnDestroy { export class TruncatablePartComponent implements AfterContentChecked, OnInit, OnDestroy {
/** /**
* Number of lines shown when the part is collapsed * Number of lines shown when the part is collapsed
*/ */
@@ -116,9 +116,8 @@ export class TruncatablePartComponent implements OnInit, OnDestroy {
* Function to get data to be observed * Function to get data to be observed
*/ */
toObserve() { toObserve() {
this.observedContent = this.document.querySelectorAll('#dontBreakContent'); this.observedContent = this.document.querySelectorAll('.content');
this.observer = new (this._window.nativeWindow as any).ResizeObserver(entries => { this.observer = new (this._window.nativeWindow as any).ResizeObserver((entries) => {
// tslint:disable-next-line:prefer-const
for (let entry of entries) { for (let entry of entries) {
if (!entry.target.classList.contains('notruncatable')) { if (!entry.target.classList.contains('notruncatable')) {
if (entry.target.scrollHeight > entry.contentRect.height) { if (entry.target.scrollHeight > entry.contentRect.height) {