Files
pa11y-dashboard/view/task/edit.html
Sangita Mane 5202f59008 A11y fixes for pa11y dashboard pages. (#306)
* First draft of a11y fixes.

* Amended results title

* Amended results title (again)

* Back to top keyboard operation

Removed the 'data-role="top"' attribute, which implemented a cool animation to scroll to top but prevented the default behaviour, resulting in the keyboard focus not going back to top.

* Options Button

Fix to have a working options button, but using the mouse only. This is not a good solution because it cannot be operated via the keyboard.

* Fixed options menu css.

* Results view layout changes

* Undoing layout changes

* Graph layout fixes.

* Skip Rules Link

Added a link to skip the list of rules, which can get very long and annoying for any keyboard user not interested in selecting a rule. Most probably, implementing a collapsible list of rules would be a better solution here.

Co-authored-by: Carlos Muncharaz <carlos@muncharaz.eu>
2022-10-11 14:17:43 +02:00

173 lines
6.3 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

{{!
This file is part of Pa11y Dashboard.
Pa11y Dashboard is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
Pa11y Dashboard is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
}}
{{#content "title"}}
Edit URL
{{/content}}
{{#edited}}
<div class="col-md-12 clearfix" data-test="alert">
<div class="alert alert-success">
<button aria-hidden="true" data-dismiss="alert" class="close" type="button" aria-label="Close">×</button>
<strong>Success!</strong>
<p>Your changes have been saved.</p>
</div>
</div>
{{/edited}}
<form class="col-md-12" action="/{{task.id}}/edit" method="post" data-test="edit-url-form">
<div class="legend">
<h1 class="h2 crunch-top">Edit URL</h1>
</div>
{{#error}}
<div class="col-md-12 clearfix" data-test="error">
<div class="row">
<div class="alert alert-danger">
<strong>Oh my gosh!</strong>
<p>{{.}}</p>
</div>
</div>
</div>
{{/error}}
<div class="form-group clearfix">
<div class="row">
<div class="col-md-8 col-sm-8 col-xs-10">
<label class="control-label" for="new-task-name">Name</label>
<input class="form-control" id="new-task-name" type="text" required placeholder="E.g. My Home Page" name="name" value="{{task.name}}"/>
</div>
</div>
</div>
<div class="form-group clearfix">
<div class="row">
<div class="col-md-8 col-sm-8 col-xs-10">
<label class="control-label" for="new-task-url">URL</label>
<input class="form-control" id="new-task-url" type="url" required pattern="https?:\/\/.+" placeholder="E.g. http://mysite.com/" name="url" value="{{task.url}}" disabled/>
</div>
</div>
</div>
<div class="form-group clearfix">
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-6">
<label class="control-label" for="new-task-standard">Standard</label>
<select data-role="new-task-select" class="form-control" id="new-task-standard" name="standard" disabled>
{{#standards}}
<option {{#selected}}selected{{/selected}}>{{title}}</option>
{{/standards}}
</select>
</div>
</div>
</div>
<div class="form-group clearfix">
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-6">
<label class="control-label" for="new-task-timeout">Timeout (milliseconds)</label>
<input class="form-control" id="new-task-timeout" type="text" placeholder="E.g. 30000" name="timeout" value="{{task.timeout}}"/>
</div>
</div>
</div>
<div class="form-group clearfix">
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-6">
<label class="control-label" for="new-task-wait">Wait (milliseconds)</label>
<input class="form-control" id="new-task-wait" type="text" placeholder="E.g. 3000" name="wait" value="{{task.wait}}"/>
<em>(Note: default wait time is 0ms)</em>
</div>
</div>
</div>
<div class="form-group clearfix">
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-6">
<label class="control-label" for="new-task-actions">
Task Actions
(<a href="https://github.com/pa11y/pa11y#actions">see Pa11y documentation</a>)
</label>
<textarea class="form-control" id="new-task-actions" name="actions" aria-describedby="action-detail" placeholder="E.g. Click element #login-button">{{task.actions}}</textarea>
<em id="action-detail">(one action per line)</em>
</div>
</div>
</div>
<div class="form-group clearfix">
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-6">
<label class="control-label" for="new-task-username">Username</label>
<input class="form-control" id="new-task-username" type="text" name="username" value="{{task.username}}"/>
</div>
</div>
</div>
<div class="form-group clearfix">
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-6">
<label class="control-label" for="new-task-password">Password</label>
<input class="form-control" id="new-task-password" type="text" name="password" value="{{task.password}}"/> <em>(Note: this will be stored and displayed in plain-text - only suitable for use in a secure environment)</em>
</div>
</div>
</div>
<div class="form-group clearfix">
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-6">
<label class="control-label" for="new-task-headers">HTTP Headers</label>
<textarea class="form-control" id="new-task-headers" name="headers" placeholder="Cookie: foo=bar">{{task.headers}}</textarea>
<em>(As key/value pairs, separated by newlines/colons)</em>
</div>
</div>
</div>
<div class="form-group clearfix">
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-6">
<label class="control-label" for="new-task-hide-elements">Hide Elements</label>
<input class="form-control" id="new-task-hide-elements" type="text" name="hideElements" value="{{task.hideElements}}" placeholder=".advert, #modal, div[aria-role=presentation]"/> <em>(CSS selector)</em>
</div>
</div>
</div>
<p class="control-label"><b>Ignore these rules</b> (<a target="_blank" href="https://github.com/pa11y/pa11y/wiki/HTML-CodeSniffer-Rules">full list of rules here</a>) <a href="#submitEditBtn" id="skipRules">Skip list of rules</a></p>
<div class="standards-lists">
{{#standards}}
<div data-role="standards-list" data-attr="{{title}}" class="form-group">
<p class="control-label rules-list-title ruled"><b>{{title}} Rules</b></p>
<ul class="list-unstyled">
{{#rules}}
<li>
<input class="pull-left" id="{{name}}" type="checkbox" name="ignore[]" value="{{name}}" {{#ignored}}checked{{/ignored}}/>
<label for="{{name}}" title="{{description}}" data-role="rule-tooltip" class="checkbox">
{{name}}
</label>
</li>
{{/rules}}
</ul>
</div>
{{/standards}}
</div>
<button type="submit" id="submitEditBtn" class="btn btn-success">Save changes <span class="glyphicon glyphicon-save"></span></button>
<a href="/{{task.id}}/edit" class="btn btn-primary">Undo <span class="glyphicon glyphicon-refresh"></span></a>
</form>