Skip to content

Commit

Permalink
Merge pull request #1928 from IBMa/dev-1624
Browse files Browse the repository at this point in the history
fixrule(`input_onchange_review`): Update the input types and messages
  • Loading branch information
ErickRenteria authored Jun 27, 2024
2 parents ee397d5 + b1128a0 commit 166ec4f
Show file tree
Hide file tree
Showing 5 changed files with 203 additions and 34 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -45,20 +45,27 @@ <h3 id="ruleMessage"></h3>

### Why is this important?

Changing the value of an input does not typically result in a [change of context](https://www.w3.org/WAI/WCAG22/Understanding/on-focus.html#dfn-changes-of-context).
This can disorientate users who cannot see the changes.
Changing the value of an input that results in a [change of context](https://www.w3.org/WAI/WCAG22/Understanding/on-focus.html#dfn-changes-of-context)
can disorientate users who cannot see the context changes.
Users must be told in advance that the change of context will occur.
For example, if filling in the final field of a form causes the form to be submitted, this should be made clear before the user interacts with it.
For example, if filling in the final field of a form causes the form to be automatically submitted,
this typically unexpected behavior should be made clear before the user interacts with it.
Or better, allow the user to review and edit their input without automatically submitting the form.

* Examples of **changing an element’s value** include selecting a radio button, checking a checkbox, selecting an item in a list, or typing text in a field.
* Examples of a **change of context**, not content, include when a form automatically submits, a new window opens, or a change in focus occurs.
* Possible exception: When using two (2) factor authentication, a password is automatically submitted when pasted in from a code sent via a smartphone when the number of expected digits match. The user’s expectation is that when the code is copied and pasted, it is automatically submitted saving unnecessary additional steps.

<!-- This is where the code snippet is injected -->
<div id="locSnippet"></div>

### What to do

* Verify that changing the input element's value does not cause a [change of context](https://www.w3.org/WAI/WCAG22/Understanding/on-focus.html#dfn-changes-of-context)
* **Or**, verify that the Web page explains what will happen when values are selected for this input component. This explanation must appear earlier in the reading order than the component itself.
* **Or**, add an explanation as described
* **Or**, trigger the change of context on an explicit user action
* Confirm that changing the input element's value does not cause a [change of context](https://www.w3.org/WAI/WCAG22/Understanding/on-focus.html#dfn-changes-of-context)
* **Or**, confirm that the page explains in advance and earlier in the reading order what will happen when values are selected for the component
* **Or**, add an explanation if missing earlier in the reading order
* **Or**, replace the `onchange` with an `event listener`
* **Or**, trigger the change of context on an explicit user action (e.g. submit button)

</script></mark-down>
<!-- End main panel -->
Expand All @@ -73,6 +80,7 @@ <h3 id="ruleMessage"></h3>

* [IBM 3.2.2 On Input](https://www.ibm.com/able/requirements/requirements/#3_2_2)
* [G13: Describing what will happen before a change of context is made](https://www.w3.org/WAI/WCAG22/Techniques/general/G13)
* [F37: Failure due to launching a new window when the selection of a radio button, check box, or select list is changed](https://www.w3.org/WAI/WCAG22/Techniques/failures/F37)

### Who does this affect?

Expand Down
16 changes: 8 additions & 8 deletions accessibility-checker-engine/src/v4/rules/a_target_warning.ts
Original file line number Diff line number Diff line change
Expand Up @@ -21,22 +21,22 @@ export let a_target_warning: Rule = {
context: "dom:a[target],dom:area[target],dom:base[target]",
refactor: {
"WCAG20_A_TargetAndText": {
"Pass_0": "Pass_0",
"Potential_1": "Potential_1"
"Pass_0": "pass",
"Potential_1": "potential_warn"
}
},
help: {
"en-US": {
"group": `a_target_warning.html`,
"Pass_0": `a_target_warning.html`,
"Potential_1": `a_target_warning.html`
"pass": `a_target_warning.html`,
"potential_warn": `a_target_warning.html`
}
},
messages: {
"en-US": {
"group": "Users should be warned in advance if their input action will open a new window or otherwise change their context",
"Pass_0": "Rule Passed",
"Potential_1": "Inform the user when their input action will open a new window or otherwise change their context"
"group": "Users should be warned in advance if their input action will open a new window",
"pass": "The user is warned in advance that the input action opens a new window",
"potential_warn": "Inform the user when their input action will open a new window"
}
},
rulesets: [{
Expand Down Expand Up @@ -68,6 +68,6 @@ export let a_target_warning: Rule = {
for (let i = 0; !passed && i < params.paramWinText.value.length; ++i)
if (textStr.indexOf(params.paramWinText.value[i]) != -1) passed = true;
}
return passed ? RulePass("Pass_0") : RulePotential("Potential_1");
return passed ? RulePass("pass") : RulePotential("potential_warn");
}
}
10 changes: 6 additions & 4 deletions accessibility-checker-engine/src/v4/rules/form_submit_review.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,8 @@
limitations under the License.
*****************************************************************************/

import { Rule, RuleResult, RuleFail, RuleContext, RulePotential, RuleManual, RulePass, RuleContextHierarchy } from "../api/IRule";
import { Rule, RuleResult, RuleContext, RulePotential, RuleContextHierarchy } from "../api/IRule";
import { eRulePolicy, eToolkitLevel } from "../api/IRule";
import { RPTUtil } from "../../v2/checker/accessibility/util/legacy";

export let form_submit_review: Rule = {
id: "form_submit_review",
Expand All @@ -37,12 +36,15 @@ export let form_submit_review: Rule = {
"group": "A form should not be submitted automatically without warning the user"
}
},
rulesets: [{
/**
rulesets: [{
"id": ["IBM_Accessibility", "IBM_Accessibility_next", "WCAG_2_1", "WCAG_2_0", "WCAG_2_2"],
"num": ["3.2.2"],
"level": eRulePolicy.VIOLATION,
"toolkitLevel": eToolkitLevel.LEVEL_THREE
}],
}],*/
//deprecate the rule on Jun 10, 2024
rulesets: [],
act: [],
run: (context: RuleContext, options?: {}, contextHierarchies?: RuleContextHierarchy): RuleResult | RuleResult[] => {
const ruleContext = context["dom"].node as Element;
Expand Down
27 changes: 12 additions & 15 deletions accessibility-checker-engine/src/v4/rules/input_onchange_review.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,30 +11,29 @@
limitations under the License.
*****************************************************************************/

import { Rule, RuleResult, RuleFail, RuleContext, RulePotential, RuleManual, RulePass, RuleContextHierarchy } from "../api/IRule";
import { Rule, RuleResult, RuleFail, RuleContext, RulePotential, RuleContextHierarchy } from "../api/IRule";
import { eRulePolicy, eToolkitLevel } from "../api/IRule";
import { RPTUtil } from "../../v2/checker/accessibility/util/legacy";

export let input_onchange_review: Rule = {
id: "input_onchange_review",
context: "dom:input, dom:textarea, dom:select",
context: "dom:input[onchange], dom:textarea[onchange], dom:select[onchange]",
refactor: {
"WCAG20_Input_HasOnchange": {
"Pass_0": "Pass_0",
"Potential_1": "Potential_1"}
"Pass_0": "pass",
"Potential_1": "potential_warning"}
},
help: {
"en-US": {
"Pass_0": "input_onchange_review.html",
"Potential_1": "input_onchange_review.html",
"pass": "input_onchange_review.html",
"potential_warning": "input_onchange_review.html",
"group": "input_onchange_review.html"
}
},
messages: {
"en-US": {
"Pass_0": "Rule Passed",
"Potential_1": "Verify that any changes of context are explained in advance to the user",
"group": "Verify that any changes of context are explained in advance to the user"
"group": "Users must be advised if, due to a change of element value, a form automatically submits, a new window opens, or a change in focus occurs",
"pass": "The user is advised of the automatic form submission, new window opening, or focus change",
"potential_warning": "Confirm that the user is advised if, due to a change of element value, a form automatically submits, a new window opens, or a change in focus occurs"
}
},
rulesets: [{
Expand All @@ -48,13 +47,11 @@ export let input_onchange_review: Rule = {
const ruleContext = context["dom"].node as Element;
if (ruleContext.nodeName.toLowerCase() == "input" && ruleContext.hasAttribute("type")) {
let type = ruleContext.getAttribute("type").toLowerCase();
if (type != "text" && type != "file" && type != "password" && type != "checkbox" && type != "radio")
return RulePass("Pass_0");
if (type === "hidden" || type === "submit" || type === "image" || type === "button" || type === "reset")
return null;
}

let passed = !ruleContext.hasAttribute("onchange");
if (passed) return RulePass("Pass_0");
if (!passed) return RulePotential("Potential_1");
return RulePotential("potential_warning");

}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,162 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!--
/******************************************************************************
Copyright:: 2020- IBM, Inc
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*****************************************************************************/
-->

<html lang="en">

<head>
<title>RPT Test Suite</title>
</head>

<body>

<a href="#navskip">skip to main content</a>


<h2>Test case: Input-hasNoOnChange.html</h2>



<!-- ################################################################### -->


<h3>Input OnChange event Tests</h3>

<form action="..." method="post">
<fieldset>
<legend>Legend text: Personal Information</legend>

<input type="hidden" name="hide1" id="hide1" onchange="javaScript: alert( 'onDblClick event' )" />
<input type="hidden" name="hide2" id="hide2" onchange="javaScript: alert( 'onDblClick event' )" />

<label for="ln1">Date</label>
<input type="date" name="date" id="ln1" onchange="javaScript: alert( 'onDblClick event' )" />

<label for="lfn2">Number</label>
<input type="number" name="number" id="lfn2" onchange="javaScript: alert( 'onDblClick event' )">

<label for="lpw3">Password</label>
<input type="password" name="lastpassword" id="lpw3" value="enter last password" title="enter last password" onchange="javaScript: alert( 'onDblClick event' ) " />

<input type="checkbox" name="athletic1" id="athletic1" value="athletic" title="strong" onchange="javaScript: alert( 'onDblClick event' ) " />
<label for="athletic1">Althletic</label>

<input type="range" name="athletic2" id="athletic2" onchange="javaScript: alert( 'onDblClick event' ) " />
<label for="athletic2">Range</label>




</fieldset>
<button type="submit" onchange="javaScript: alert( 'onDblClick event' ) ">Submit</button>
</form>

<a name="navskip">End</a>


<script>
UnitTest = {
ruleIds: ["input_onchange_review"],
results: [
{
"ruleId": "input_onchange_review",
"value": [
"INFORMATION",
"POTENTIAL"
],
"path": {
"dom": "/html[1]/body[1]/form[1]/fieldset[1]/input[3]",
"aria": "/document[1]/form[1]/group[1]"
},
"reasonId": "potential_warning",
"message": "Confirm that the user is advised if, due to a change of element value, a form automatically submits, a new window opens, or a change in focus occurs",
"messageArgs": [],
"apiArgs": [],
"category": "Accessibility"
},
{
"ruleId": "input_onchange_review",
"value": [
"INFORMATION",
"POTENTIAL"
],
"path": {
"dom": "/html[1]/body[1]/form[1]/fieldset[1]/input[4]",
"aria": "/document[1]/form[1]/group[1]/spinbutton[1]"
},
"reasonId": "potential_warning",
"message": "Confirm that the user is advised if, due to a change of element value, a form automatically submits, a new window opens, or a change in focus occurs",
"messageArgs": [],
"apiArgs": [],
"category": "Accessibility"
},
{
"ruleId": "input_onchange_review",
"value": [
"INFORMATION",
"POTENTIAL"
],
"path": {
"dom": "/html[1]/body[1]/form[1]/fieldset[1]/input[5]",
"aria": "/document[1]/form[1]/group[1]"
},
"reasonId": "potential_warning",
"message": "Confirm that the user is advised if, due to a change of element value, a form automatically submits, a new window opens, or a change in focus occurs",
"messageArgs": [],
"apiArgs": [],
"category": "Accessibility"
},
{
"ruleId": "input_onchange_review",
"value": [
"INFORMATION",
"POTENTIAL"
],
"path": {
"dom": "/html[1]/body[1]/form[1]/fieldset[1]/input[6]",
"aria": "/document[1]/form[1]/group[1]/checkbox[1]"
},
"reasonId": "potential_warning",
"message": "Confirm that the user is advised if, due to a change of element value, a form automatically submits, a new window opens, or a change in focus occurs",
"messageArgs": [],
"apiArgs": [],
"category": "Accessibility"
},
{
"ruleId": "input_onchange_review",
"value": [
"INFORMATION",
"POTENTIAL"
],
"path": {
"dom": "/html[1]/body[1]/form[1]/fieldset[1]/input[7]",
"aria": "/document[1]/form[1]/group[1]/slider[1]"
},
"reasonId": "potential_warning",
"message": "Confirm that the user is advised if, due to a change of element value, a form automatically submits, a new window opens, or a change in focus occurs",
"messageArgs": [],
"apiArgs": [],
"category": "Accessibility"
}
]
}
</script>
</body>

</html>

0 comments on commit 166ec4f

Please sign in to comment.