Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Core: Unnecessary aria-describedby (makes #2094 fixable) #2410

Open
wants to merge 15 commits into
base: master
Choose a base branch
from
Open

Core: Unnecessary aria-describedby (makes #2094 fixable) #2410

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
b190ab1
Core: progress on removing aria-describedby from valid fields
eden-jh Nov 2, 2021
86880c1
core: aria-describedby
eden-jh Nov 10, 2021
4009ffe
Core: remove aria-describedby when hiding error
eden-jh Nov 11, 2021
bd860fa
Core: fix syntax issues, Test: add test for new setting
eden-jh Nov 11, 2021
567bd4c
Core: Fix bugs in aria-describedby behavior and related tests
eden-jh Nov 12, 2021
0af496d
Core: bugfix for labels without id
eden-jh Nov 12, 2021
a46475e
Core: don't create a new error element if one exists
eden-jh Nov 12, 2021
7e8a788
Core: progress on test for group of fields with ariaDescribedbyCleanup
eden-jh Nov 12, 2021
2f29b11
Core: Groups aria-describedby
eden-jh Nov 15, 2021
11c72be
Core: fix aria-describedby not being removed from grouped fields
eden-jh Nov 15, 2021
2b367e0
Core: Update capitalization
eden-jh Nov 16, 2021
31847b9
Demo: Add page for ariaDescribedByCleanup
eden-jh Nov 16, 2021
73a70d2
Core: add setting to remove aria-describedby from valid fields
eden-jh Nov 16, 2021
96be3bb
Merge branch 'unnecessary-aria-describedby' of https://github.com/ede…
eden-jh Nov 16, 2021
ebe5293
Core: Fix camel case inconsistency, remove stray comment
eden-jh Dec 9, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
110 changes: 110 additions & 0 deletions demo/aria-describedby-cleanup.html
View file
Open in desktop
@@ -0,0 +1,110 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Validation Plugin Demo - ariaDescribedByCleanup set to true</title>
<link rel="stylesheet" href="css/screen.css">
<script src="../lib/jquery.js"></script>
<script src="../dist/jquery.validate.js"></script>
<script>
$.validator.setDefaults({
submitHandler: function() {
alert("submitted!");
}
});

$().ready(function() {
var valid = $("#group-form").validate({
errorElement: 'div',

groups: {
fullName: "first middle last"
},
ariaDescribedByCleanup: true,
rules: {

first: { required: true, minlength: 2 },
middle: {required: true, minlength: 2 },
last: {required: true},
email: { required: true, email: true },
phone: { required: true },
comment: {required: true, maxlength: 300}
}
});
$('button[type="reset"]').on('click',function(){
valid.resetForm();
});

});
</script>
<style>
#group-form {
width: 35rem;
}
.textarea-container {
display: inline-block;
}
.description {
display: block;
}
</style>
</head>
<body>
<h1 id="banner"><a href="https://jqueryvalidation.org/">jQuery Validation Plugin</a> Demo - ariaDescribedByCleanup set to true</h1>
<main id="main">

<form id="group-form" class="cmxform" aria-labelledby="group-example-title" aria-describedby="required-note">

<div class="box">
<h2 id="group-example-title">Example with group</h2>
<div><p id="required-note">Fields marked with * are required</p></div>

<div id="errorlabelcontainer"></div>
<fieldset>
<legend>Name*</legend>
<div class="row">
<div class="col">
<label for="first">First</label>
<input type="text" aria-required="true" id="first" name="first"/>
</div>
<div class="col">
<label for="middle">Middle</label>
<input type="text" aria-required="true" id="middle" name="middle"/>
</div>
<div class="col">
<label for="last">Last</label>
<input type="text" aria-required="true" id="last" name="last"/>
</div>
</div>

</fieldset>

<div class="row">
<label for="email">Email*</label>
<input type="email" id="email" aria-required="true" name="email"/>
</div>

<div class="row">
<label for="phone">Phone*</label>
<input type="text" id="phone" aria-required="true" name="phone"/>
</div>
<div class="row">
<label for="comment">Your comment*</label>
<div class="textarea-container">
<textarea id="comment" name="comment" aria-required="true" aria-describedby="comment-max-length"></textarea>
<span class="description" id="comment-max-length">300 characters maximum</span>
</div>

</div>
<div class="row">

<button>Submit</button>
<button type="reset">Reset</button>
</div>
</div>

</form>
<p><a href="index.html">Back to main page</a></p>
</div>
</main>
</html>
26 changes: 22 additions & 4 deletions demo/css/cmxform.css
View file
Open in desktop
Expand Up @@ -17,18 +17,36 @@ form.cmxform legend, form.cmxform label {
color: #333;
}

form.cmxform fieldset {
form.cmxform fieldset, form.cmxform .box {
border: none;
border-top: 1px solid #C9DCA6;
background: url(../images/cmxform-fieldset.gif) left bottom repeat-x;
background-color: #F8FDEF;
}
form.cmxform fieldset .col label {
margin-left: 0;
}
form.cmxform fieldset .col {
margin-right: .5rem;
}
form.cmxform fieldset .row .col:last-child {
margin-right: 0;
}
form.cmxform fieldset .row {
display: flex;

form.cmxform fieldset fieldset {
box-sizing: border-box;
}
form.cmxform .box,
form.cmxform fieldset .row,
form.cxmform .box fieldset {
width: 100%;
}
form.cmxform fieldset fieldset, form.cmxform .box fieldset {
background: none;
}

form.cmxform fieldset p, form.cmxform fieldset fieldset {
form.cmxform .box > .row, form.cmxform fieldset p, form.cmxform fieldset fieldset, form.cmxform .box fieldset {
padding: 5px 10px 7px;
background: url(../images/cmxform-divider.gif) left bottom repeat-x;
}
Expand All @@ -43,4 +61,4 @@ input { border: 1px solid black; }
input.checkbox { border: none }
input:focus { border: 1px dotted black; }
input.error { border: 1px dotted red; }
form.cmxform .gray * { color: gray; }
form.cmxform .gray * { color: gray; }
22 changes: 14 additions & 8 deletions demo/css/cmxformTemplate.css
View file
Open in desktop
Expand Up @@ -7,7 +7,7 @@ form.cmxform fieldset {
margin-bottom: 10px;
}

form.cmxform legend {
form.cmxform legend, form.cmxform .box .title {
padding: 0 2px;
font-weight: bold;
_margin: 0 -7px; /* IE Win */
Expand All @@ -20,29 +20,35 @@ form.cmxform label {
cursor: hand;
}

form.cmxform fieldset p {
form.cmxform fieldset p,
form.cmxform .box p {
list-style: none;
padding: 5px;
margin: 0;
}

form.cmxform fieldset fieldset {
form.cmxform fieldset fieldset,
form.cmxform .box fieldset {
border: none;
margin: 3px 0 0;
}

form.cmxform fieldset fieldset legend {
form.cmxform fieldset fieldset legend, form.cmxform .box fieldset legend {
padding: 0 0 5px;
font-weight: normal;
}

form.cmxform fieldset fieldset label {

form.cmxform label { width: 100px; } /* Width of labels */
form.cmxform fieldset fieldset label,
form.cmxform .box fieldset label {
display: block;
width: auto;
/* Width plus 3 (html space) */
margin-left: 103px;
}

form.cmxform label { width: 100px; } /* Width of labels */
form.cmxform fieldset fieldset label { margin-left: 103px; } /* Width plus 3 (html space) */

form.cmxform label.error {
margin-left: 103px;
width: 220px;
Expand All @@ -52,4 +58,4 @@ form.cmxform input.submit {
margin-left: 103px;
}

/*\*//*/ form.cmxform legend { display: inline-block; } /* IE Mac legend fix */
/*\*//*/ form.cmxform legend { display: inline-block; } /* IE Mac legend fix */
2 changes: 2 additions & 0 deletions demo/index.html
View file
Open in desktop
Expand Up @@ -226,6 +226,8 @@ <h3>Synthetic examples</h3>
</li>
<li><a href="semantic-ui/index.html">Using with Semantic-UI</a>
</li>
<li><a href="aria-describedby-cleanup.html">ariaDescribedByCleanup set to true</a>
</li>
</ul>
<h3>Real-world examples</h3>
<ul>
Expand Down