Skip to content
Snippets Groups Projects
Verified Commit 1af9253e authored by Joshua Barlin's avatar Joshua Barlin
Browse files

Make form accessibility tweaks

parent a5b5c8de
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
js/prototype3.js
+ 97
− 27
View file @ 1af9253e
$.fn.hideOptionGroup = function () {
$(this).hide();
$(this).children().each(function () {
$(this).attr("disabled", "disabled").removeAttr("selected");
});
$(this).appendTo($(this).parent());
}
$.fn.showOptionGroup = function () {
$(this).show();
$(this).children().each(function () {
$(this).removeAttr("disabled");
});
$(this).prependTo($(this).parent());
$(this).parent().animate({ scrollTop: 0 }, 0);
}
$(document).ready(function () {
$('#sectionbutton').click(function () {
......@@ -11,11 +29,45 @@ $(document).ready(function () {
$("#continuing").hide();
break;
}
});
$('#posntype-dr1').on('change', function () {
if ($(this).val() == 'contract') {
$('#posntype-dr4').attr('disabled', false);
$('#posntype-dr4').show();
} else {
$('#posntype-dr4').attr('disabled', 'disabled');
$('#posntype-dr4-naop').attr('selected', true);
$('#posntype-dr4-naop').attr('selected', 'selected');
$('#posntype-dr4').val('');
$('#posntype-dr4').hide();
}
});
$('#posntype-dr2').on('change', function () {
if ($(this).val() == 'part time') {
$('#posntype-dr3').attr('disabled', false);
$('#posntype-dr3').show();
} else {
$('#posntype-dr3').attr('disabled', 'disabled');
$('#posntype-dr3-naop').attr('selected', true);
$('#posntype-dr3-naop').attr('selected', 'selected');
$('#posntype-dr3').val('');
$('#posntype-dr3').hide();
}
});
$('#posntype-dr3').hide();
$('#posntype-dr4').hide();
for (i = 1; i <= 9; i++) {
var $op = $('<option>');
$op.text(i + ' days per fortnight');
$op.val(i + ' days per fortnight');
$('#posntype-dr3-days').append($op);
}
for (i = 3; i <= 24; i++) {
var $op = $('<option>');
$op.text(i + ' months');
$op.val(i + ' month');
$('#posntype-dr4-months').append($op);
}
/*
Removed this. Not sure if will need later so keeping it for now.
......@@ -44,34 +96,52 @@ $(document).ready(function () {
}
// Build header unordered list
if (
$("#roletype").val().length > 0
|| $("#salary").val().length > 0
|| $("#positiontier").val().length > 0
|| $("#superpercentage").val().length > 0
|| $("#relocation").val().length > 0
) {
outputhtml += "<section aria-labelledby=\"une-hr-posnov-header\">";
outputhtml += "<h3 id=\"une-hr-posnov-header\">Position overview</h3>";
outputhtml += "<ul>";
if ($("#roletype").val().length > 0) {
outputhtml += "<li>" + $("#roletype").val() + "</li>";
outputhtml += "<li></li>";
outputhtml += "<li>"
if ($('#posntype-dr4').val() != '') {
outputhtml += $('#posntype-dr4').val() + " ";
}
if ($("#salary").val().length > 0) {
outputhtml += "<li>" + $("#salary").val() + "</li>";
}
if ($("#positiontier").val().length > 0) {
outputhtml += "<li>" + $("#positiontier").val() + "</li>";
outputhtml += $('#posntype-dr1').val() + ", " + $('#posntype-dr2').val();
if ($('#posntype-dr3').val() != '') {
outputhtml += " " + $('#posntype-dr3').val()
}
outputhtml += "</li>"
if ($("#superpercentage").val().length > 0) {
outputhtml += "<li>" + $("#superpercentage").val() + "</li>";
outputhtml += "<li>Plus " + $("#superpercentage").val() + "% employer superannuation";
if ($('#posntype-dr1').val() == 'Continuing' || $('#posntype-dr1').val() == 'continuing') {
outputhtml += ". Salary packaging options are available";
}
outputhtml += "</li>";
}
if ($("#salarylow").val().length > 0 || $("#salaryhigh").val().length > 0) {
if ($("#salarylow").val() == $("#salaryhigh").val() || $("#salaryhigh").val() == "") {
outputhtml += "<li>$" + $("#salarylow").val();
} else {
outputhtml += "<li>$" + $("#salarylow").val() + " - $" + $("#salaryhigh").val();
}
outputhtml += $("#salarylabel").val();
if ($("#posntier").val().length > 0) {
outputhtml += " " + $("#posntier").val();
}
outputhtml += "</li>";
} else {
if ($("#posntier").val().length > 0) {
outputhtml += "<li>" + $("#posntier").val() + "</li>";
}
}
if ($("#relocation").val().length > 0) {
outputhtml += "<li>" + $("#relocation").val() + "</li>";
}
if ($("#visa").val().length > 0) {
outputhtml += "<li>" + $("#visa").val() + "</li>";
}
outputhtml += "</ul>";
outputhtml += "</section>";
}
if ($("#abouttherole-header").val().length > 0 && $("#abouttherole-body").val().length > 0) {
......
prototype3.html
+ 271
− 182
View file @ 1af9253e
......@@ -42,60 +42,151 @@
</select> <button name="sectionbutton" id="sectionbutton">Select</button>
<!-- start continuing -->
<div id="continuing" class="display-none">
<div id="jobinformation-header">
<h3>Header</h3>
<div class="reset padding-5">
<div class="floatleft width-50">Job Title</div>
<div class="floatright width-50">
<input type="text" name="jobtitle" id="jobtitle" class="width-100 padding-5">
</div>
</div>
<div class="reset padding-5">
<div class="floatleft width-50">Job Area</div>
<div class="floatright width-50">
<input type="text" name="jobarea" id="jobarea" class="width-100 padding-5">
</div>
</div>
<div class="reset padding-5">
<div class="floatleft width-50">Role Type</div>
<div class="floatright width-50">
<input type="text" name="roletype" id="roletype" class="width-100 padding-5">
</div>
</div>
<div class="reset padding-5">
<div class="floatleft width-50">Salary</div>
<div class="floatright width-50">
<input type="text" name="salary" id="salary" class="width-100 padding-5">
</div>
</div>
<div class="reset padding-5">
<div class="floatleft width-50">Position Tier</div>
<div class="floatright width-50">
<input type="text" name="positiontier" id="positiontier" class="width-100 padding-5">
</div>
</div>
<form autocomplete="off" id="continuing" class="display-none">
<section aria-labelledby="une-hr-headinfhd" id="jobinformation-header">
<h3 id="une-hr-headinfhd">Header Information</h3>
<table style="table-layout:fixed; width: 95%;">
<tbody>
<tr>
<th>
<label id="jobtitlelabel" for="jobtitle">Job Title</label>
</th>
<td colspan="4">
<input type="text" aria-labelledby="jobtitlelabel" name="jobtitle" id="jobtitle"
class="width-100 padding-5">
</td>
</tr>
<tr>
<th>
<label id="jobarealabel" for="jobarea">Job Area</label>
</th>
<td colspan="4">
<input type="text" aria-labelledby="jobarealabel" name="jobarea" id="jobarea"
class="width-100 padding-5">
</td>
</tr>
<tr>
<th>
<label id="roletypelabel" for="roletype">Role Type</label>
</th>
<td colspan="4">
<input type="text" aria-labelledby="roletypelabel" name="roletype" id="roletype"
class="width-100 padding-5">
</td>
</tr>
<tr>
<th>
<label id="posntypelbl-dr1">Position Type</label>
</th>
<td>
<select class="width-100" id="posntype-dr1" aria-labelledby="posntypelbl-dr1">
<option selected="selected" value="Continuing">Continuing</option>
<option value="contract">Contract</option>
</select>
</td>
<td>
<select class="width-100" id="posntype-dr2" aria-labelledby="posntypelbl-dr1">
<option selected="selected" value="full time">Full Time</option>
<option value="part time">Part Time</option>
</select>
</td>
<td>
<select class="width-100" id="posntype-dr3" disabled="disabled" aria-labelledby="posntypelbl-dr1">
<optgroup id="posntype-dr3-na" label="Other">
<option selected="selected" id="posntype-dr3-naop" value=""></option>
<option value="(See position description for details)">(See position
description for details)</option>
</optgroup>
<optgroup label="Days per fortnight" id="posntype-dr3-days">
<div class="reset padding-5">
<div class="floatleft width-50">Superannuation</div>
<div class="floatright width-50">
<input type="text" name="superpercentage" id="superpercentage" class="width-100 padding-5">
</div>
</div>
<div class="reset padding-5">
<div class="floatleft width-50">Visa Requirements</div>
<div class="floatright width-50">
<input type="text" name="superpercentage" id="superpercentage" class="width-100 padding-5">
</div>
</div>
<div class="reset padding-5">
<div class="floatleft width-50">Relocation</div>
<div class="floatright width-50">
<input type="text" name="relocation" id="relocation" class="width-100 padding-5">
</div>
</div>
</optgroup>
</select>
</td>
<td>
<select class="width-100" id="posntype-dr4" disabled="disabled" aria-labelledby="posntypelbl-dr1">
<optgroup id="posntype-dr4-na" label="Other">
<option selected="selected" id="posntype-dr4-naop" value=""></option>
</optgroup>
<optgroup label="Months in contract" id="posntype-dr4-months">
</div>
</optgroup>
</select>
</td>
</tr>
<tr>
<th>
Salary
</th>
<td>
<input type="text" aria-label="Salary Low" name="salarylow" id="salarylow"
class="width-100 padding-5">
</td>
<td>
<span class="padding-5">to</span>
</td>
<td>
<input type="text" aria-label="Salary High" name="salaryhigh" id="salaryhigh"
class="width-100 padding-5">
</td>
<td>
<select id="salarylabel" aria-label="Salary label" class="width-100 padding-5">
<option value="" selected="selected">
</option>
<option value=" per hour">
per hour
</option>
<option value=" per annum">
per annum
</option>
<option value=" per annum (or part-time thereof)">
per annum (or part-time thereof)
</option>
<option value=" for entire contracted work">
for entire contracted work
</option>
</select>
</td>
</tr>
<tr>
<th>
<label id="superpercentagelabel" for="superpercentage">Superannuation</label>
</th>
<td colspan="4">
<input type="number" step="0.1" value="17" min="9" max="100" aria-labelledby="superpercentagelabel"
name="superpercentage" id="superpercentage" class="width-100 padding-5">
</td>
</tr>
<tr>
<th>
<label id="posntierlabel" for="posntier">Position Tier</label>
</th>
<td colspan="4">
<input type="text" aria-labelledby="posntierlabel" name="posntier" id="posntier"
class="width-100 padding-5">
</td>
</tr>
<tr>
<th>
<label id="visalabel" for="visa">Visa Requirements</label>
</th>
<td colspan="4">
<input type="text" aria-labelledby="visalabel" name="visa" id="visa" class="width-100 padding-5">
</td>
</tr>
<tr>
<th>
<label id="relocationlabel" for="relocation">Relocation</label>
</th>
<td colspan="4">
<input type="text" aria-labelledby="relocationlabel" name="relocation" id="relocation"
class="width-100 padding-5">
</td>
</tr>
</tbody>
</table>
</section>
<div>&nbsp;</div>
<div id="abouttherole">
<h3>About the role</h3>
......@@ -117,8 +208,8 @@
<div class="reset padding-5">
<div class="floatleft width-100">
<input type="text" name="skillsandexperience-header" id="skillsandexperience-header" class="width-100 padding-5"
value="Skills & Experience">
<input type="text" name="skillsandexperience-header" id="skillsandexperience-header"
class="width-100 padding-5" value="Skills & Experience">
</div>
<div class="floatleft width-100">
<textarea name="skillsandexperience-body" id="skillsandexperience-body" class="width-100 padding-5"></textarea>
......@@ -172,7 +263,6 @@
</div>
<div>&nbsp;</div>
<div id="jobinformation-footer">
<h3>Footer</h3>
......@@ -190,7 +280,7 @@
</div>
</div>
</div>
</form>
<div>&nbsp;</div>
<!-- end continuing -->
......@@ -200,7 +290,6 @@
</div>
<!-- end casual -->
</div>
<div id="update-code-div">
<div id="update-code-wrapper">
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment