Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

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

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.

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

Already on GitHub?Sign in to your account

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

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
110 changes: 110 additions & 0 deletionsdemo/aria-describedby-cleanup.html
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -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 deletionsdemo/css/cmxform.css
View file
Open in desktop
Original file line numberDiff line numberDiff line change
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.cmxformfieldset 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 deletionsdemo/css/cmxformTemplate.css
View file
Open in desktop
Original file line numberDiff line numberDiff line change
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 deletionsdemo/index.html
View file
Open in desktop
Original file line numberDiff line numberDiff line change
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
Loading

[8]ページ先頭

©2009-2025 Movatter.jp