Merge pull request #1644 from UUDigitalHumanitieslab/feature/minor-ac…

…cessibility-improvements Feature/minor accessibility improvements
CentreForDigitalHumanities · Aug 30, 2024 · 1d20509 · 1d20509
2 parents 8f21960 + 84fa318
commit 1d20509
Show file tree

Hide file tree

Showing 8 changed files with 20 additions and 13 deletions.
diff --git a/frontend/src/app/document-view/document-view.component.html b/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)"

diff --git a/frontend/src/app/document/document-preview/document-preview.component.html b/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)">

diff --git a/frontend/src/app/filter/filter-manager.component.html b/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"

diff --git a/frontend/src/app/footer/footer.component.html b/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>
diff --git a/frontend/src/app/services/download.service.spec.ts b/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: {} }],
                 },

diff --git a/frontend/src/app/shared/pipes/regex-highlight.pipe.ts b/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);

diff --git a/frontend/src/app/utils/es-query.spec.ts b/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: {}}]
             }

diff --git a/frontend/src/app/utils/es-query.ts b/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' &&