Careers

is produced by Amris, so it cannot be corrected at source from the Daybreak side. This repairs it in the page instead. It only ever adds or corrects attributes - no element is moved, renamed, restyled or removed, and no form value is touched. 1. Labels pointing at the wrong control (WCAG 1.3.1, 4.1.2) Several labels carry a `for` value copied from another field. On the vacancy search, for example, BOTH multi-selects are labelled ``, so "Job title" and "Location" are announced as belonging to the Type dropdown and clicking either label focuses the wrong control. The Key words and Process fields have the same problem. Rather than hard-code those ids, this walks every label and, where the label's own container holds exactly one form control, points it at that control. A container with more than one control is left untouched, because the correct target would be a guess. 2. Missing autocomplete (WCAG 1.3.5 Identify Input Purpose) The application and job-alert forms ask for the candidate's own email address, name, phone and postcode with no autocomplete attribute, and the

carries autocomplete="off", which stops the browser offering to fill them in at all. Re-runs when Amris injects new markup (search results, wizard steps). ==================================================================== */ (function () { 'use strict'; var CONTROLS = 'input, select, textarea'; var SKIP_TYPES = ['hidden', 'submit', 'button', 'image', 'reset']; var uid = 0; function isFillable(node) { var type = (node.getAttribute('type') || '').toLowerCase(); return SKIP_TYPES.indexOf(type) === -1; } function fillableControlsIn(box) { var found = []; var nodes = box.querySelectorAll(CONTROLS); for (var i = 0; i < nodes.length; i++) { if (isFillable(nodes[i])) { found.push(nodes[i]); } } return found; } /* ---- 1. Repair label -> control associations ------------------ */ function fixLabels(root) { var labels = root.querySelectorAll('label'); for (var i = 0; i < labels.length; i++) { var label = labels[i]; // A label that wraps its control is already associated. if (label.querySelector(CONTROLS)) { continue; } var box = label.parentNode; if (!box || !box.querySelectorAll) { continue; } var controls = fillableControlsIn(box); if (controls.length !== 1) { continue; } var control = controls[0]; if (!control.id) { control.id = 'db-a11y-field-' + (++uid); } if (label.getAttribute('for') !== control.id) { label.setAttribute('for', control.id); } } } /* ---- 2. Declare the purpose of personal-detail fields ---------- */ var PURPOSES = [ [/^title$|honorific/i, 'honorific-prefix'], [/e-?mail/i, 'email'], [/first.?name|forename|given.?name/i, 'given-name'], [/second.?name|sur.?name|last.?name|family.?name/i, 'family-name'], [/mobile/i, 'tel'], [/telephone|^tel$|phone/i, 'tel'], [/post.?code|eir.?code/i, 'postal-code'], [/date.?of.?birth|^dob$/i, 'bday'], [/organisation|organization|employer|company/i, 'organization'] ]; // name and id are tested separately, and anchored patterns are used // where a loose match would misfire - "jobTitle" must not be read as // the candidate's own title, for instance. function purposeFor(node) { var keys = [node.getAttribute('name') || '', node.getAttribute('id') || '']; for (var i = 0; i < PURPOSES.length; i++) { for (var k = 0; k < keys.length; k++) { if (keys[k] && PURPOSES[i][0].test(keys[k])) { return PURPOSES[i][1]; } } } return ''; } // The vacancy SEARCH form is excluded. Its fields are search filters, // not the candidate's own details, so WCAG 1.3.5 does not apply to // them and autofilling a home postcode into "Town or Postcode" is // not behaviour anyone asked for. function inSearchFilters(node) { var el = node; while (el && el !== document) { if (el.id === 'searchForm' || el.id === 'searchFormMap') { return true; } el = el.parentNode; } return false; } function fixAutocomplete(root) { // A form-level autocomplete="off" suppresses autofill for every // field inside it, so it has to come off before the per-field // values below can do anything. var forms = root.querySelectorAll('form[autocomplete="off"]'); for (var f = 0; f < forms.length; f++) { forms[f].setAttribute('autocomplete', 'on'); } var nodes = root.querySelectorAll('input, select'); for (var i = 0; i < nodes.length; i++) { var node = nodes[i]; if (!isFillable(node)) { continue; } if (node.getAttribute('autocomplete')) { continue; } if (inSearchFilters(node)) { continue; } var type = (node.getAttribute('type') || '').toLowerCase(); // Passwords: "new-password" on a form that also asks the user // to confirm it (registration), "current-password" otherwise // (sign-in). Getting this backwards makes password managers // behave badly, so it is decided per form. if (type === 'password') { var owner = node.form || root; var confirms = owner.querySelectorAll ? owner.querySelectorAll('input[type="password"]') : []; node.setAttribute('autocomplete', confirms.length > 1 ? 'new-password' : 'current-password'); continue; } var purpose = purposeFor(node); if (purpose) { node.setAttribute('autocomplete', purpose); } } } function run() { var root = document.querySelector('.amrisPage') || document; try { fixLabels(root); fixAutocomplete(root); } catch (e) { // Never let a fix break the form it is trying to improve. if (window.console && console.warn) { console.warn('a11y fixes:', e); } } } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', run); } else { run(); } // Amris renders search results and later wizard steps with JavaScript // after first paint, so the same pass has to run again on new markup. if (window.MutationObserver) { var pending = null; var observer = new MutationObserver(function () { if (pending) { clearTimeout(pending); } pending = setTimeout(run, 150); }); var start = function () { var target = document.querySelector('.amrisPage') || document.body; if (target) { observer.observe(target, { childList: true, subtree: true }); } }; if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', start); } else { start(); } } })();