hazza/dspace-angular
1
0
Fork 1
mirror of https://github.com/DSpace/dspace-angular.git synced 2025-10-07 10:04:11 +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="content dont-break-out" id="dontBreakContent">
<div class="content dont-break-out">
<ng-content></ng-content>
</div>
<label for="dontBreakContent" role="button" id="expandButton">
<a dsDragClick (actualClick)="toggle()">
<i class="fas fa-angle-down"></i> {{ 'item.truncatable-part.show-more' | translate }}</a>
</label>
<a id="collapseButton" dsDragClick (actualClick)="toggle()" *ngIf="expand && expandable">
<i class="fas fa-angle-up"></i> {{ 'item.truncatable-part.show-less' | translate }}</a>
<button class="btn btn-link p-0 expandButton" dsDragClick (actualClick)="toggle()">
<i class="fas fa-angle-down"></i> {{ 'item.truncatable-part.show-more' | translate }}</button>
<button class="btn btn-link p-0 collapseButton" dsDragClick (actualClick)="toggle()" *ngIf="expand && expandable">
<i class="fas fa-angle-up"></i> {{ 'item.truncatable-part.show-less' | translate }}</button>
</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;
}
a {
color: #207698 !important;
text-decoration: none !important;
background-color: transparent !important;
cursor: pointer;
.btn:focus {
box-shadow: none !important;
}

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', () => {
const a = fixture.debugElement.query(By.css('#collapseButton'));
const a = fixture.debugElement.query(By.css('.collapseButton'));
expect(a).toBeNull();
});
});
@@ -98,7 +98,7 @@ describe('TruncatablePartComponent', () => {
(comp as any).setLines();
(comp as any).expandable = true;
fixture.detectChanges();
const a = fixture.debugElement.query(By.css('#collapseButton'));
const a = fixture.debugElement.query(By.css('.collapseButton'));
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 { hasValue } from '../../empty.util';
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
* 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
*/
@@ -116,9 +116,8 @@ export class TruncatablePartComponent implements OnInit, OnDestroy {
* Function to get data to be observed
*/
toObserve() {
this.observedContent = this.document.querySelectorAll('#dontBreakContent');
this.observer = new (this._window.nativeWindow as any).ResizeObserver(entries => {
// tslint:disable-next-line:prefer-const
this.observedContent = this.document.querySelectorAll('.content');
this.observer = new (this._window.nativeWindow as any).ResizeObserver((entries) => {
for (let entry of entries) {
if (!entry.target.classList.contains('notruncatable')) {
if (entry.target.scrollHeight > entry.contentRect.height) {