Merge branch 'develop' into dependabot/npm_and_yarn/frontend/micromat…

…ch-4.0.8

backend/requirements.txt

@@ -73,9 +73,9 @@ defusedxml==0.7.1
     #   djangosaml2
     #   pysaml2
     #   python3-openid
-dj-rest-auth[with_social]==4.0.1
+dj-rest-auth[with-social,with_social]==4.0.1
     # via -r requirements.in
-django==4.2.14
+django==4.2.15
     # via
     #   -r requirements.in
     #   dj-rest-auth

frontend/src/app/document-view/document-view.component.html

@@ -17,7 +17,12 @@
                     </tr>
                     <ng-container *ngFor="let field of propertyFields">
                         <tr *ngIf="document.fieldValue(field)">
-                            <th [iaBalloon]="field.description" iaBalloonPosition="up" iaBalloonLength="medium">{{field.displayName}}</th>
+                            <th>
+                                <span [iaBalloon]="field.description"
+                                    iaBalloonPosition="up" iaBalloonLength="medium">
+                                    {{field.displayName}}
+                                </span>
+                            </th>
                             <td *ngIf="!isUrlField(field) && !isGeoPointField(field)"
                                 data-test-field-value
                                 [attr.lang]="document.language(field)"

frontend/src/app/document/document-preview/document-preview.component.html

@@ -2,8 +2,10 @@
     <table class="table is-fullwidth">
         <ng-container *ngFor="let field of page.fields">
             <tr *ngIf="document.fieldValue(field)">
-                <th [iaBalloon]="field.description" iaBalloonPosition="left" iaBalloonLength="medium">
-                    {{field.displayName}}:
+                <th>
+                    <span [iaBalloon]="field.description" iaBalloonPosition="left" iaBalloonLength="medium">
+                        {{field.displayName}}:
+                    </span>
                 </th>
                 <td *ngIf="document.highlight && document.highlight[field.name]; else unhighlightedRow"
                     [attr.lang]="document.language(field)">

frontend/src/app/filter/filter-manager.component.html

@@ -1,7 +1,7 @@
 <div>
     <div class="field has-addons">
         <div class="control is-expanded">
-            <h4 class="title">Filters</h4>
+            <h2 class="title">Filters</h2>
         </div>
         <p class="control" style="float:right">
             <span *ngIf="anyActiveFilters$ | async" class="button icon filter-icon is-primary is-active is-medium is-round"

frontend/src/app/footer/footer.component.html

@@ -1,4 +1,4 @@
-<footer class="footer">
+<div class="footer">
     <div class="container is-readable">
         <div class="columns">
             <div class="column">
@@ -29,4 +29,4 @@
             </p>
         </div>
     </div>
-</footer>
+</div>

frontend/src/app/image-view/image-navigation.component.html

@@ -4,9 +4,10 @@
         <fa-icon [icon]="scanIcons.prev" aria-hidden="true"></fa-icon>
     </button>
     <ng-container *ngFor="let pageNumber of buttonArray">
-        <a class="button is-small" [ngClass]="{'is-primary':pageNumber===page}" (click)="goToPage(pageNumber)">
+        <button class="button is-small" iaToggleButton [active]="pageNumber===page"
+            (click)="goToPage(pageNumber)">
             {{pageNumber}}
-        </a>
+    </button>
     </ng-container>
     <button id="nextButton" class="button is-small" (click)="nextPage()"
         aria-label="next page">

frontend/src/app/search/pagination/pagination.component.html

@@ -8,14 +8,11 @@
         <li *ngIf="currentPages[0]>2">
             <span class="pagination-ellipsis">&hellip;</span>
         </li>
-        <li>
-            <button [ngClass]="{'is-current': currentPage===currentPages[0]}" class="pagination-link" (click)="loadResults(currentPages[0])">{{currentPages[0]}}</button>
-        </li>
-        <li>
-            <button [ngClass]="{'is-current': currentPage===currentPages[1]}" class="pagination-link" (click)="loadResults(currentPages[1])">{{currentPages[1]}}</button>
-        </li>
-        <li *ngIf="totalResults>resultsPerPage*2">
-            <button [ngClass]="{'is-current': currentPage===currentPages[2]}" class="pagination-link" (click)="loadResults(currentPages[2])">{{currentPages[2]}}</button>
+        <li *ngFor="let page of currentPages">
+            <button iaToggleButton [active]="currentPage===page"
+                activeClass="is-current" class="pagination-link"
+                (click)="loadResults(page)">{{page}}
+            </button>
         </li>
         <li *ngIf="currentPages[2]<totalPages-1">
             <span class="pagination-ellipsis">&hellip;</span>

frontend/src/app/services/download.service.spec.ts

@@ -68,8 +68,8 @@ describe('DownloadService', () => {
                 sort: [{ great_field: 'desc' }],
                 highlight: {
                     fragment_size: highlight,
-                    pre_tags: ['<span class="highlight">'],
-                    post_tags: ['</span>'],
+                    pre_tags: ['<mark class="highlight">'],
+                    post_tags: ['</mark>'],
                     order: 'score',
                     fields: [{ speech: {} }],
                 },

frontend/src/app/shared/pipes/regex-highlight.pipe.ts

@@ -18,7 +18,7 @@ export class RegexHighlightPipe implements PipeTransform {
         const highlightedText = parts.map(part => {
             const sanitizedText = this.sanitizedLineBreaks(part.substring, '<br />');
 
-            return part.isHit ? `<span class="highlight">${sanitizedText}</span>` : sanitizedText;
+            return part.isHit ? `<mark class="highlight">${sanitizedText}</mark>` : sanitizedText;
         }).join('');
 
         return this.sanitizer.bypassSecurityTrustHtml(highlightedText);

frontend/src/app/shared/shared.module.ts

@@ -17,6 +17,7 @@ import { TabPanelDirective } from './tabs/tab-panel.directive';
 import { TabsComponent } from './tabs/tabs.component';
 import { ToggleComponent } from './toggle/toggle.component';
 import { SlugifyPipe } from './pipes/slugify.pipe';
+import { ToggleButtonDirective } from './toggle-button.directive';
 
 @NgModule({
     declarations: [
@@ -28,6 +29,7 @@ import { SlugifyPipe } from './pipes/slugify.pipe';
         TabPanelDirective,
         ToggleComponent,
         SlugifyPipe,
+        ToggleButtonDirective,
     ],
     exports: [
         // shared components
@@ -36,6 +38,7 @@ import { SlugifyPipe } from './pipes/slugify.pipe';
         ScrollToDirective,
         TabsComponent,
         TabPanelDirective,
+        ToggleButtonDirective,
 
         // shared modules
         BrowserAnimationsModule,

frontend/src/app/shared/toggle-button.directive.spec.ts

@@ -0,0 +1,54 @@
+import { Component } from '@angular/core';
+import { ToggleButtonDirective } from './toggle-button.directive';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { CommonModule } from '@angular/common';
+
+@Component({
+    template: `
+    <button class="button" iaToggleButton [active]="active" [activeClass]="class">
+        Test
+    </button>
+    `,
+})
+class ToggleButtonTestComponent {
+    active = false;
+    class = 'is-primary';
+}
+
+describe('ToggleButtonDirective', () => {
+    let fixture: ComponentFixture<ToggleButtonTestComponent>;
+    let component: ToggleButtonTestComponent;
+    let button: HTMLButtonElement;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            declarations: [ToggleButtonTestComponent, ToggleButtonDirective],
+            imports: [CommonModule],
+        });
+        fixture = TestBed.createComponent(ToggleButtonTestComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+        const element = fixture.debugElement.nativeElement as Element;
+        button = element.querySelector('button');
+
+    });
+
+    it('should show toggle state', () => {
+        expect(button.className).toEqual('button');
+        expect(button.getAttribute('aria-pressed')).toBe('false');
+
+        component.active = true;
+        fixture.detectChanges();
+
+        expect(button.className).toEqual('button is-primary');
+        expect(button.getAttribute('aria-pressed')).toBe('true');
+    });
+
+    it('should set the CSS class through input', () => {
+        component.class = 'is-danger';
+        component.active = true;
+        fixture.detectChanges();
+
+        expect(button.className).toEqual('button is-danger');
+    });
+});

frontend/src/app/shared/toggle-button.directive.ts

@@ -0,0 +1,17 @@
+import { Directive, HostBinding, Input } from '@angular/core';
+
+@Directive({
+    selector: 'button[iaToggleButton]',
+})
+export class ToggleButtonDirective {
+    @HostBinding('attr.aria-pressed')
+    @Input() active: boolean;
+
+    /** name of the CSS class that should be applied when active */
+    @Input() activeClass: string = 'is-primary';
+
+    @HostBinding('class')
+    get classes(): Record<string, boolean> {
+        return { [this.activeClass]: this.active }
+    }
+}

frontend/src/app/utils/es-query.spec.ts

@@ -49,8 +49,8 @@ describe('es-query utils', () => {
         expect(makeHighlightSpecification(mockCorpus3, 'test', 100)).toEqual({
             highlight: {
                 fragment_size: 100,
-                pre_tags: ['<span class="highlight">'],
-                post_tags: ['</span>'],
+                pre_tags: ['<mark class="highlight">'],
+                post_tags: ['</mark>'],
                 order: 'score',
                 fields: [{speech: {}}]
             }

frontend/src/app/utils/es-query.ts

@@ -98,8 +98,8 @@ export const makeHighlightSpecification = (corpus: Corpus, queryText?: string, h
     return {
         highlight: {
             fragment_size: highlightSize,
-            pre_tags: ['<span class="highlight">'],
-            post_tags: ['</span>'],
+            pre_tags: ['<mark class="highlight">'],
+            post_tags: ['</mark>'],
             order: 'score',
             fields: highlightFields.map((field) =>
                 field.displayType === 'text_content' &&

frontend/src/app/visualization/freqtable.component.html

@@ -26,15 +26,17 @@
         <div class="level-item" *ngIf="wideFormatColumn !== undefined" iaBalloon="change the format for the table">
             <div class="field has-addons">
                 <div class="control">
-                    <button class="button" [class.is-primary]="format === 'long'" (click)="setFormat('long')">long format</button>
+                    <button class="button" iaToggleButton [active]="format === 'long'"
+                        (click)="setFormat('long')">long format</button>
                 </div>
                 <div class="control">
-                    <button class="button" [class.is-primary]="format === 'wide'" (click)="setFormat('wide')">wide format</button>
+                    <button class="button" iaToggleButton [active]="format === 'wide'"
+                        (click)="setFormat('wide')">wide format</button>
                 </div>
             </div>
         </div>
         <div class="level-item" *ngIf="!disableFullTable">
-            <button class="button" [class.is-primary]="fullTableToggle === true" (click)="toggleFullTable()">Show extra
+            <button class="button" iaToggleButton [active]="fullTableToggle" (click)="toggleFullTable()">Show extra
                 columns</button>
         </div>
     </div>

frontend/src/app/visualization/visualization.component.html

@@ -61,13 +61,15 @@
                 <div class="field has-addons">
                     <!-- Buttons for switching between table and graphical representation -->
                     <div class="control">
-                        <button class="button" [class.is-primary]="!freqtable" (click)="freqtable = false">
-                            <fa-icon [icon]="visualizationIcons.chart" aria-label="view chart"></fa-icon>
+                        <button class="button" iaToggleButton [active]="!freqtable"
+                            (click)="freqtable = false" aria-label="view chart">
+                            <fa-icon [icon]="visualizationIcons.chart" aria-hidden="true" />
                         </button>
                     </div>
                     <div class="control">
-                        <button class="button" [class.is-primary]="freqtable" (click)="freqtable = true">
-                            <fa-icon [icon]="visualizationIcons.table" aria-label="view table"></fa-icon>
+                        <button class="button" iaToggleButton [active]="freqtable"
+                            (click)="freqtable = true" aria-label="view table">
+                            <fa-icon [icon]="visualizationIcons.table" aria-hidden="true"/>
                         </button>
                     </div>
                 </div>

frontend/src/app/word-models/word-models.component.html

@@ -34,13 +34,21 @@
                                 <div class="field has-addons">
                                     <!-- Buttons for switching between table and graphical representation -->
                                     <div class="control">
-                                        <button class="button" [class.is-primary]="!asTable" (click)="asTable = false">
-                                            <fa-icon [icon]="visualizationIcons.chart" aria-label="view chart"></fa-icon>
+                                        <button class="button" iaToggleButton
+                                            [active]="!asTable"
+                                            (click)="asTable = false"
+                                            aria-label="view chart">
+                                            <fa-icon [icon]="visualizationIcons.chart"
+                                                aria-hidden="true" />
                                         </button>
                                     </div>
                                     <div class="control">
-                                        <button class="button" [class.is-primary]="asTable" (click)="asTable = true">
-                                            <fa-icon [icon]="visualizationIcons.table" aria-label="view table"></fa-icon>
+                                        <button class="button" iaToggleButton
+                                            [active]="asTable"
+                                            (click)="asTable = true"
+                                            aria-label="view table">
+                                            <fa-icon [icon]="visualizationIcons.table"
+                                                aria-hidden="true" />
                                         </button>
                                     </div>
                                 </div>