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

Fixed feedback form page accessibility issue

Browse Source 
- The form used a fieldset tag instead of a form tag
This commit is contained in:
Alexandre Vryghem
2023-12-16 15:33:07 +01:00
parent 7f0264ed1c
commit 8ad1b4b0d4
1 changed files with 33 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
src/app/info/feedback/feedback-form/feedback-form.component.html
View File

@@ -1,45 +1,43 @@
<div class="row row-offcanvas row-offcanvas-right"> <div class="row row-offcanvas row-offcanvas-right">
<div class="col-xs-12 col-sm-12 col-md-9"> <div class="col-xs-12 col-sm-12 col-md-9">
<form class="primary" [formGroup]="feedbackForm" (ngSubmit)="createFeedback()"> <h1>{{ 'info.feedback.head' | translate }}</h1>
<h1>{{ 'info.feedback.head' | translate }}</h1> <p>{{ 'info.feedback.info' | translate }}</p>
<p>{{ 'info.feedback.info' | translate }}</p> <form [formGroup]="feedbackForm" (ngSubmit)="createFeedback()" class="col p-0">
<fieldset class="col p-0"> <div class="row">
<div class="row"> <div class="control-group col-sm-12">
<div class="control-group col-sm-12"> <label class="control-label" for="email">{{ 'info.feedback.email-label' | translate }}&nbsp;</label>
<label class="control-label" for="email">{{ 'info.feedback.email-label' | translate }}&nbsp;</label> <input id="email" class="form-control" name="email" type="text" value="" formControlName="email" autofocus="autofocus" title="{{ 'info.feedback.email_help' | translate }}">
<input id="email" class="form-control" name="email" type="text" value="" formControlName="email" autofocus="autofocus" title="{{ 'info.feedback.email_help' | translate }}"> <small class="text-muted">{{ 'info.feedback.email_help' | translate }}</small>
<small class="text-muted">{{ 'info.feedback.email_help' | translate }}</small>
</div>
</div> </div>
</div>
<ng-container *ngIf="feedbackForm.controls.email.invalid && (feedbackForm.controls.email.dirty || feedbackForm.controls.email.touched)" <ng-container *ngIf="feedbackForm.controls.email.invalid && (feedbackForm.controls.email.dirty || feedbackForm.controls.email.touched)"
class="alert"> class="alert">
<ds-error *ngIf="feedbackForm.controls.email.errors?.required" message="{{'info.feedback.error.email.required' | translate}}"></ds-error> <ds-error *ngIf="feedbackForm.controls.email.errors?.required" message="{{'info.feedback.error.email.required' | translate}}"></ds-error>
<ds-error *ngIf="feedbackForm.controls.email.errors?.pattern" message="{{'info.feedback.error.email.required' | translate}}"></ds-error> <ds-error *ngIf="feedbackForm.controls.email.errors?.pattern" message="{{'info.feedback.error.email.required' | translate}}"></ds-error>
</ng-container> </ng-container>
<div class="row"> <div class="row">
<div class="control-group col-sm-12"> <div class="control-group col-sm-12">
<label class="control-label" for="comments">{{ 'info.feedback.comments' | translate }}:&nbsp;</label> <label class="control-label" for="comments">{{ 'info.feedback.comments' | translate }}:&nbsp;</label>
<textarea id="comments" formControlName="message" class="form-control" name="message" cols="20" rows="5"> </textarea> <textarea id="comments" formControlName="message" class="form-control" name="message" cols="20" rows="5"> </textarea>
</div>
</div> </div>
<ng-container *ngIf="feedbackForm.controls.message.invalid && (feedbackForm.controls.message.dirty || feedbackForm.controls.message.touched)" </div>
class="alert"> <ng-container *ngIf="feedbackForm.controls.message.invalid && (feedbackForm.controls.message.dirty || feedbackForm.controls.message.touched)"
<ds-error *ngIf="feedbackForm.controls.message.errors?.required" message="{{'info.feedback.error.message.required' | translate}}"></ds-error> class="alert">
</ng-container> <ds-error *ngIf="feedbackForm.controls.message.errors?.required" message="{{'info.feedback.error.message.required' | translate}}"></ds-error>
<div class="row"> </ng-container>
<div class="control-group col-sm-12"> <div class="row">
<label class="control-label" for="page">{{ 'info.feedback.page-label' | translate }}&nbsp;</label> <div class="control-group col-sm-12">
<input id="page" readonly class="form-control" name="page" type="text" value="" formControlName="page" autofocus="autofocus" title="{{ 'info.feedback.page_help' | translate }}"> <label class="control-label" for="page">{{ 'info.feedback.page-label' | translate }}&nbsp;</label>
<small class="text-muted">{{ 'info.feedback.page_help' | translate }}</small> <input id="page" readonly class="form-control" name="page" type="text" value="" formControlName="page" autofocus="autofocus" title="{{ 'info.feedback.page_help' | translate }}">
</div> <small class="text-muted">{{ 'info.feedback.page_help' | translate }}</small>
</div> </div>
<div class="row py-2"> </div>
<div class="control-group col-sm-12 text-right"> <div class="row py-2">
<button [disabled]="!feedbackForm.valid" class="btn btn-primary" name="submit" type="submit">{{ 'info.feedback.send' | translate }}</button> <div class="control-group col-sm-12 text-right">
</div> <button [disabled]="!feedbackForm.valid" class="btn btn-primary" name="submit" type="submit">{{ 'info.feedback.send' | translate }}</button>
</div> </div>
</fieldset> </div>
</form> </form>
</div> </div>
</div> </div>