diff --git a/_rules/printable-characters-shortcut-ffbc54.md b/_rules/printable-characters-shortcut-ffbc54.md index b19491cbfda..52f09ae42e0 100644 --- a/_rules/printable-characters-shortcut-ffbc54.md +++ b/_rules/printable-characters-shortcut-ffbc54.md @@ -16,12 +16,12 @@ acknowledgments: authors: - Carlos Duarte - João Vicente - --- ## Applicability -The rule applies to any [keyboard event][] for which all of the following is true: +The rule applies to any [keyboard event][] for which all of the following is true: + - the event's attribute `key` is a [printable character][] key; and - the event's method `getModifierState` returns `false` for each of the [valid modifier keys][]; and - the event causes [changes in the content][changes in content] of the [HTML document][]. @@ -29,6 +29,7 @@ The rule applies to any [keyboard event][] for which all of the following is tru ## Expectation For each test target at least one of the following is true: + - (**remap**:) there is at least one [set of clearly labeled instruments][] to [block events][blocked event] that use the [same key][same key events] as the test target and whose `getModifierState` method returns `false` for each of the [valid modifier keys][]; or - (**focus**:) the [event target][] has a [semantic role][] that inherits from the [abstract role](https://www.w3.org/TR/wai-aria/#abstract_roles) of `widget`. @@ -56,28 +57,28 @@ This [HTML document][] is listening to [keyboard events][keyboard event] for whi ```html - - Passed Example 1 - - - - - -
-
Remap shortcut
-
- -
-
-
-
- To do list -
- - + + Passed Example 1 + + + + + +
+
Remap shortcut
+
+ +
+
+
+
+ To do list +
+ + ``` @@ -87,23 +88,23 @@ This [HTML document][] is listening to [keyboard events][keyboard event] for whi ```html - - Passed Example 2 - - - - - - -
-
- To do list -
- - + + Passed Example 2 + + + + + + +
+
+ To do list +
+ + ``` @@ -113,32 +114,34 @@ This [HTML document][] is listening to [keyboard events][keyboard event] for whi ```html - - Passed Example 3 - - - - - -
-
Remap shortcut
-
- - -
-
-
-
- To do list -
- - + + Passed Example 3 + + + + + +
+
Remap shortcut
+
+ + +
+
+
+
+ To do list +
+ + ``` @@ -148,28 +151,34 @@ This [HTML document][] is listening to [keyboard events][keyboard event] for whi ```html - - Passed Example 4 - - - - - -
-
Remap shortcut
-
- -
-
-
-
- To do list -
- - + + Passed Example 4 + + + + + +
+
Remap shortcut
+
+ +
+
+
+
+ To do list +
+ + ``` @@ -179,20 +188,20 @@ This [HTML document][] is listening to [keyboard events][keyboard event] for whi ```html - - Passed Example 5 - - - - - - -
-
- To do list -
- - + + Passed Example 5 + + + + + + +
+
+ To do list +
+ + ``` @@ -202,36 +211,36 @@ This [HTML document][] is listening to [keyboard events][keyboard event] for whi ```html - - Passed Example 6 - - - - -
-

Disable/remap shortcut

- -
- -
- -
-

To control the shortcuts activate the "Control shortcuts" button.

- - - - -
- To do list -
- - + + Passed Example 6 + + + + +
+

Disable/remap shortcut

+ +
+ +
+ +
+

To control the shortcuts activate the "Control shortcuts" button.

+ + + + +
+ To do list +
+ + ``` @@ -243,19 +252,19 @@ This [HTML document][] is listening to [keyboard events][keyboard event] for whi ```html - - Failed Example 1 - - - - - -
-
- To do list -
- - + + Failed Example 1 + + + + + +
+
+ To do list +
+ + ``` @@ -265,36 +274,36 @@ This [HTML document][] is listening to [keyboard events][keyboard event] for whi ```html - - Failed Example 2 - - - - -
-

Disable/remap shortcut

- -
- -
- -
- - - - - -
- To do list -
- - + + Failed Example 2 + + + + +
+

Disable/remap shortcut

+ +
+ +
+ +
+ + + + + +
+ To do list +
+ + ``` @@ -306,20 +315,20 @@ This [HTML document][] has a [keyboard event][] [dispatched][] to an [event targ ```html - - Inapplicable Example 1 - - - - - - -
-
- To do list -
- - + + Inapplicable Example 1 + + + + + + +
+
+ To do list +
+ + ``` @@ -329,26 +338,26 @@ This [HTML document][] has a [keyboard event][] [dispatched][] to an [event targ ```html - - Inapplicable Example 2 - - - - - - -
-
- To do list -
- - + + Inapplicable Example 2 + + + + + + +
+
+ To do list +
+ + ``` -[HTML document]: https://dom.spec.whatwg.org/#concept-document +[html document]: https://dom.spec.whatwg.org/#concept-document [focus]: https://html.spec.whatwg.org/#focusable-area -[event target]: https://dom.spec.whatwg.org/#eventtarget +[event target]: https://dom.spec.whatwg.org/#eventtarget [keyboard event]: https://www.w3.org/TR/uievents/#events-keyboardevents [legacy keyboard events]: https://www.w3.org/TR/uievents/#legacy-keyboardevent-events [dispatched]: https://dom.spec.whatwg.org/#dispatching-events diff --git a/_rules/visible-label-in-accessible-name-2ee8b8.md b/_rules/visible-label-in-accessible-name-2ee8b8.md index ecdf523132f..9b1c3b29d89 100755 --- a/_rules/visible-label-in-accessible-name-2ee8b8.md +++ b/_rules/visible-label-in-accessible-name-2ee8b8.md @@ -59,29 +59,37 @@ This rule applies to elements with a [widget roles][] that [support name from co #### Passed Example 1 -This link has [visible][] text that, ignoring trailing whitespace, matches the [accessible name][]. +This link has [visible][] text that matches the [accessible name][]. ```html -ACT rules +ACT rules ``` #### Passed Example 2 -This link has [visible][] text that, ignoring case, matches the [accessible name][]. +This link has [visible][] text that, ignoring trailing whitespace, matches the [accessible name][]. ```html -ACT rules +ACT rules ``` #### Passed Example 3 +This link has [visible][] text that, ignoring case, matches the [accessible name][]. + +```html +ACT rules +``` + +#### Passed Example 4 + This button has [visible][] text that is contained within the [accessible name][]. ```html ``` -#### Passed Example 4 +#### Passed Example 5 This button has [visible][] text that does not need to be contained within the [accessible name][], because the "x" text node is [non-text content][]. @@ -89,7 +97,7 @@ This button has [visible][] text that does not need to be contained within the [ ``` -#### Passed Example 5 +#### Passed Example 6 This `button` element has the text "search" rendered as an hourglass icon by the font. Because the text is rendered as [non-text content][], the text does not need to be contained within the [accessible name][]. diff --git a/pages/glossary/same-key-events.md b/pages/glossary/same-key-events.md index 990c4d849e4..594dea2f892 100644 --- a/pages/glossary/same-key-events.md +++ b/pages/glossary/same-key-events.md @@ -1,11 +1,12 @@ --- - title: Same key events - key: same-key-events - unambiguous: true - objective: true +title: Same key events +key: same-key-events +unambiguous: true +objective: true --- Two [keyboard events][] are _same key events_ if they have the same value for all the following attributes: + - `key` - `code` - `location` diff --git a/test-assets/ffbc54/shortcut.js b/test-assets/ffbc54/shortcut.js index 51dc415043d..3fd4f4f4f03 100644 --- a/test-assets/ffbc54/shortcut.js +++ b/test-assets/ffbc54/shortcut.js @@ -1,52 +1,52 @@ const defaultParams = { - target: 'target', - focusOnly: false, - shortcutKey: '', - ctrlKey: false, - disabled: false -}; + target: 'target', + focusOnly: false, + shortcutKey: '', + ctrlKey: false, + disabled: false, +} -const shortcutDefinitions = new Array(); +const shortcutDefinitions = new Array() function activateShortcuts() { - document.body.addEventListener("keydown", function(event) { - for (const settings of shortcutDefinitions) { - if (!settings.disabled) { - const target = document.getElementById(settings.target); - - if ( - event.key === settings.shortcutKey && - (!settings.ctrlKey || event.getModifierState("Control")) && - (!settings.focusOnly || document.activeElement === target) - ) { - document.getElementById("list").innerHTML += "
  • " + target.value + "
    • "; - target.value = ""; - event.preventDefault(); - } - } - } - }); + document.body.addEventListener('keydown', function(event) { + for (const settings of shortcutDefinitions) { + if (!settings.disabled) { + const target = document.getElementById(settings.target) + + if ( + event.key === settings.shortcutKey && + (!settings.ctrlKey || event.getModifierState('Control')) && + (!settings.focusOnly || document.activeElement === target) + ) { + document.getElementById('list').innerHTML += '
  • ' + target.value + '
    • ' + target.value = '' + event.preventDefault() + } + } + } + }) } function registerShortcut(params = {}) { - shortcutDefinitions.push({...defaultParams, ...params}) + shortcutDefinitions.push({ ...defaultParams, ...params }) } function changeShortcutParameter(id, param, value) { - shortcutDefinitions.find(shortcut => shortcut.id === id)[param] = value; + shortcutDefinitions.find(shortcut => shortcut.id === id)[param] = value } function toggleDisabled(id, value) { - changeShortcutParameter(id, "disabled", value) + changeShortcutParameter(id, 'disabled', value) } function toggleModifier(id, value) { - changeShortcutParameter(id, "ctrlKey", value) + changeShortcutParameter(id, 'ctrlKey', value) } function openModal() { - document.getElementById('overlay').style.display = 'block' + document.getElementById('overlay').style.display = 'block' } function closeModal() { - document.getElementById('overlay').style.display = 'none' + document.getElementById('overlay').style.display = 'none' } diff --git a/test-assets/ffbc54/styles.css b/test-assets/ffbc54/styles.css index 269aa8776e6..894ce90bd5d 100644 --- a/test-assets/ffbc54/styles.css +++ b/test-assets/ffbc54/styles.css @@ -1,10 +1,10 @@ #overlay { - display: none; - position: fixed; - top: 2em; - left: 10em; - background-color: #505050; - color: white; - padding: 1em; - padding-top: 0em; + display: none; + position: fixed; + top: 2em; + left: 10em; + background-color: #505050; + color: white; + padding: 1em; + padding-top: 0em; }