EVOgeek
/
Vmeda.Online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-4565 a11y: Search box must alert of minimum required length

main
Pau Ferrer Ocaña 2024-04-15 12:54:14 +02:00
parent 8c3697a579
commit 540beee17e
7 changed files with 18 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
scripts/langindex.json
View File

@ -2407,6 +2407,7 @@
"core.search.allcategories": "local_moodlemobileapp",
"core.search.allcourses": "search",
"core.search.empty": "local_moodlemobileapp",
"core.search.err_minlength": "form",
"core.search.filtercategories": "local_moodlemobileapp",
"core.search.filtercourses": "local_moodlemobileapp",
"core.search.filterheader": "search",

2
src/core/features/courses/pages/list/list.html
View File

@ -26,7 +26,7 @@
<core-search-box *ngIf="searchEnabled" (onSubmit)="search($event)" (onClear)="clearSearch()"
[placeholder]="'core.courses.search' | translate" [searchLabel]="'core.courses.search' | translate" [autoFocus]="searchMode"
searchArea="CoreCoursesSearch" />
searchArea="CoreCoursesSearch" [lengthCheck]="1" />
<core-loading [hideUntil]="loaded">
<ng-container *ngIf="searchMode && searchTotal > 0">

8
src/core/features/search/components/search-box/core-search-box.html
View File

@ -2,8 +2,7 @@
<ion-input [attr.aria-label]="placeholder" type="search" name="search" [(ngModel)]="searchText" [placeholder]="placeholder"
[autocorrect]="autocorrect" [spellcheck]="spellcheck" [core-auto-focus]="autoFocus" [disabled]="disabled" role="searchbox"
(ionFocus)="focus($event)">
<ion-button slot="end" fill="clear" type="submit" [attr.aria-label]="searchLabel"
[disabled]="disabled || !searchText || (searchText.length < lengthCheck)">
<ion-button slot="end" fill="clear" type="submit" [attr.aria-label]="searchLabel" [disabled]="disabled || !searchText">
<ion-icon name="fas-magnifying-glass" slot="icon-only" aria-hidden="true" />
</ion-button>
<ion-button *ngIf="showClear" slot="end" fill="clear" [attr.aria-label]="'core.clearsearch' | translate"
@ -11,6 +10,11 @@
<ion-icon name="fas-delete-left" slot="icon-only" aria-hidden="true" flip-rtl />
</ion-button>
</ion-input>
<ion-item *ngIf="showLengthAlert" class="core-search-alert text-danger ion-text-wrap" role="alert">
<ion-label>
{{ 'core.search.err_minlength' | translate : {'$a': {'format': lengthCheck} } }}
</ion-label>
</ion-item>
<ion-list class="core-search-history" [hidden]="!historyShown">
<ion-item button class="ion-text-wrap" *ngFor="let item of history" (click)="historyClicked($event, item.searchedtext)" tabindex="0"
[detail]="true">

2
src/core/features/search/components/search-box/search-box.scss
View File

@ -35,8 +35,6 @@
}
}
.core-search-history {
max-height: calc(-120px + 80vh);
overflow-y: auto;

11
src/core/features/search/components/search-box/search-box.ts
View File

@ -62,6 +62,7 @@ export class CoreSearchBoxComponent implements OnInit {
searchText = '';
history: CoreSearchHistoryDBRecord[] = [];
historyShown = false;
showLengthAlert = false;
constructor() {
this.onSubmit = new EventEmitter<string>();
@ -86,14 +87,17 @@ export class CoreSearchBoxComponent implements OnInit {
* @param e Event.
*/
submitForm(e?: Event): void {
e && e.preventDefault();
e && e.stopPropagation();
e?.preventDefault();
e?.stopPropagation();
if (this.searchText.length < this.lengthCheck) {
// The view should handle this case, but we check it here too just in case.
this.showLengthAlert = true;
return;
}
this.showLengthAlert = false;
if (this.searchArea) {
this.saveSearchToHistory(this.searchText);
}
@ -147,6 +151,7 @@ export class CoreSearchBoxComponent implements OnInit {
clearForm(): void {
this.searched = '';
this.searchText = '';
this.showLengthAlert = false;
this.onClear.emit();
}

1
src/core/features/search/lang.json
View File

@ -8,5 +8,6 @@
"globalsearch": "Global search",
"noresults": "No results for \"{{$a}}\"",
"noresultshelp": "Check for typos or try using different keywords",
"err_minlength": "You must enter at least {{$a.format}} characters here.",
"resultby": "By {{$a}}"
}

2
src/core/features/tag/pages/search/search.html
View File

@ -19,7 +19,7 @@
<ion-row class="ion-no-padding ion-wrap">
<ion-col class="ion-no-padding" size="12" size-sm="6" [attr.col-sm-6]="collections && collections.length > 1 ? '' : null">
<core-search-box (onSubmit)="searchTags($event)" (onClear)="searchTags('')" [initialSearch]="query" [disabled]="searching"
autocorrect="off" [spellcheck]="false" [autoFocus]="false" [lengthCheck]="0" searchArea="CoreTag" />
autocorrect="off" [spellcheck]="false" [autoFocus]="false" [lengthCheck]="1" searchArea="CoreTag" />
</ion-col>
<ion-col class="ion-no-padding" size="12" size-sm="6" *ngIf="collections && collections.length > 1">
<core-combobox [selection]="collectionId" (onChange)="searchTags(query, $event)" [disabled]="searching">