From b7a7c441fa025458f2bf67d714c3303085e8258a Mon Sep 17 00:00:00 2001 From: Joshua Chen Date: Fri, 1 Nov 2024 12:16:16 -0400 Subject: [PATCH] Remove all extraneous empty lines around kbd-in-list (#36616) * Remove all extraneous empty lines around kbd-in-list * Collapse --- .../what_are_browser_developer_tools/index.md | 5 +- .../css/styling_text/styling_links/index.md | 7 +-- .../index.md | 6 +- .../learn/forms/ui_pseudo-classes/index.md | 10 +--- .../responsive_images/index.md | 10 +--- .../what_is_web_performance/index.md | 11 +--- .../manifest.json/commands/index.md | 41 +------------ .../aria/roles/listbox_role/index.md | 44 +++----------- .../web/api/keyboardevent/charcode/index.md | 6 +- files/en-us/web/api/keyboardevent/index.md | 22 +------ .../en-us/web/api/keyboardevent/key/index.md | 33 +--------- .../movement_and_motion/index.md | 48 +++------------ files/en-us/web/html/element/select/index.md | 60 ++----------------- 13 files changed, 34 insertions(+), 269 deletions(-) diff --git a/files/en-us/learn/common_questions/tools_and_setup/what_are_browser_developer_tools/index.md b/files/en-us/learn/common_questions/tools_and_setup/what_are_browser_developer_tools/index.md index cf6123656d0f54b..9e5024aa8047193 100644 --- a/files/en-us/learn/common_questions/tools_and_setup/what_are_browser_developer_tools/index.md +++ b/files/en-us/learn/common_questions/tools_and_setup/what_are_browser_developer_tools/index.md @@ -21,9 +21,8 @@ How do you pull it up? Three ways: - **_Keyboard:_** - - **Windows:** _Ctrl + Shift + I_ or F12 - - - **macOS:** _⌘ + ⌥ + I_ + - **Windows:** Ctrl + Shift + I or F12 + - **macOS:** ⌘ + ⌥ + I - **_Menu bar:_** diff --git a/files/en-us/learn/css/styling_text/styling_links/index.md b/files/en-us/learn/css/styling_text/styling_links/index.md index 3d547274a057969..93ce1fecff9f3bf 100644 --- a/files/en-us/learn/css/styling_text/styling_links/index.md +++ b/files/en-us/learn/css/styling_text/styling_links/index.md @@ -44,12 +44,7 @@ The first thing to understand is the concept of link states — different states - **Link**: A link that has a destination (i.e., not just a named anchor), styled using the {{cssxref(":link")}} pseudo class. - **Visited**: A link that has already been visited (exists in the browser's history), styled using the {{cssxref(":visited")}} pseudo class. - **Hover**: A link that is hovered over by a user's mouse pointer, styled using the {{cssxref(":hover")}} pseudo class. -- **Focus**: A link that is focused (e.g., moved to by a keyboard user using the - - Tab - - key or something similar, or programmatically focused using {{domxref("HTMLElement.focus()")}}) — this is styled using the {{cssxref(":focus")}} pseudo class. - +- **Focus**: A link that is focused (e.g., moved to by a keyboard user using the Tab key or something similar, or programmatically focused using {{domxref("HTMLElement.focus()")}}) — this is styled using the {{cssxref(":focus")}} pseudo class. - **Active**: A link that is activated (e.g., clicked on), styled using the {{cssxref(":active")}} pseudo class. ### Default styles diff --git a/files/en-us/learn/forms/how_to_build_custom_form_controls/index.md b/files/en-us/learn/forms/how_to_build_custom_form_controls/index.md index d360125bbbb22aa..80a7d6ff97e4517 100644 --- a/files/en-us/learn/forms/how_to_build_custom_form_controls/index.md +++ b/files/en-us/learn/forms/how_to_build_custom_form_controls/index.md @@ -29,11 +29,7 @@ In terms of behavior, we are recreating a native HTML element. Therefore it shou - the page loads. - the control was active and the user clicks anywhere outside it. -- the control was active and the user moves the focus to another control using the keyboard (e.g. the - - Tab - - key). +- the control was active and the user moves the focus to another control using the keyboard (e.g. the Tab key). **The control is in its active state when:** diff --git a/files/en-us/learn/forms/ui_pseudo-classes/index.md b/files/en-us/learn/forms/ui_pseudo-classes/index.md index 7668e4107761429..f7339858f5c0f99 100644 --- a/files/en-us/learn/forms/ui_pseudo-classes/index.md +++ b/files/en-us/learn/forms/ui_pseudo-classes/index.md @@ -39,15 +39,7 @@ The original pseudo-classes (from [CSS 2.1](https://www.w3.org/TR/CSS21/selector - {{cssxref(":hover")}}: Selects an element only when it is being hovered over by a mouse pointer. - {{cssxref(":focus")}}: Selects an element only when it is focused (i.e. by being tabbed to via the keyboard). -- {{cssxref(":active")}}: selects an element only when it is being activated (i.e. while it is being clicked on, or when the - - Return - - / - - Enter - - key is being pressed down in the case of a keyboard activation). +- {{cssxref(":active")}}: selects an element only when it is being activated (i.e. while it is being clicked on, or when the Return / Enter key is being pressed down in the case of a keyboard activation). These basic pseudo-classes should be familiar to you now. [CSS selectors](/en-US/docs/Web/CSS/CSS_selectors) provide several other pseudo-classes related to HTML forms. These provide several useful targeting conditions that you can take advantage of. We'll discuss these in more detail in the sections below, but briefly, the main ones we'll be looking at are: diff --git a/files/en-us/learn/html/multimedia_and_embedding/responsive_images/index.md b/files/en-us/learn/html/multimedia_and_embedding/responsive_images/index.md index dd8a4e0898fbd18..ee8e5dd55e19c5c 100644 --- a/files/en-us/learn/html/multimedia_and_embedding/responsive_images/index.md +++ b/files/en-us/learn/html/multimedia_and_embedding/responsive_images/index.md @@ -91,15 +91,7 @@ The `srcset` and `sizes` attributes look complicated, but they're not too hard t 1. An **image filename** (`elva-fairy-480w.jpg`) 2. A space -3. The image's **intrinsic width in pixels** (`480w`) — note that this uses the `w` unit, not `px` as you might expect. An image's [intrinsic size](/en-US/docs/Glossary/Intrinsic_Size) is its real size, which can be found by inspecting the image file on your computer (for example, on a Mac you can select the image in Finder and press - - Cmd - - \+ - - I - - to bring up the info screen). +3. The image's **intrinsic width in pixels** (`480w`) — note that this uses the `w` unit, not `px` as you might expect. An image's [intrinsic size](/en-US/docs/Glossary/Intrinsic_Size) is its real size, which can be found by inspecting the image file on your computer (for example, on a Mac you can select the image in Finder and press Cmd + I to bring up the info screen). **`sizes`** defines a set of media conditions (e.g. screen widths) and indicates what image size would be best to choose, when certain media conditions are true — these are the hints we talked about earlier. In this case, before each comma we write: diff --git a/files/en-us/learn/performance/what_is_web_performance/index.md b/files/en-us/learn/performance/what_is_web_performance/index.md index af5cea6eb96b8f2..35ac6ec5f3a8dc0 100644 --- a/files/en-us/learn/performance/what_is_web_performance/index.md +++ b/files/en-us/learn/performance/what_is_web_performance/index.md @@ -52,16 +52,7 @@ To summarize, many features impact performance including latency, application si To effectively understand web performance, the issues behind it, and the major topic areas we mentioned above, you really should understand some specifics about how browsers work. This includes: -- **How the browser works**. When you request a URL and hit - - Enter - - / - - Return - - , the browser finds out where the server is that holds that website's files, establishes a connection to it, and requests the files. See [Populating the page: how the browser works](/en-US/docs/Web/Performance/How_browsers_work) for a detailed overview. - +- **How the browser works**. When you request a URL and hit Enter / Return, the browser finds out where the server is that holds that website's files, establishes a connection to it, and requests the files. See [Populating the page: how the browser works](/en-US/docs/Web/Performance/How_browsers_work) for a detailed overview. - **Source order**. Your HTML index file's source order can significantly affect performance. The download of additional assets linked to from the index file is generally sequential, based on source order, but this can be manipulated and should definitely be optimized, realizing that some resources block additional downloads until their content is parsed and executed. - **The critical path**. This is the process that the browser uses to construct the web document once the files have been downloaded from the server. The browser follows a well-defined set of steps, and optimizing the critical rendering path to prioritize the display of content that relates to the current user action will lead to significant improvements in content rendering time. See [Critical rendering path](/en-US/docs/Web/Performance/Critical_rendering_path) for more information. - The **document object model**. The document object model, or DOM, is a tree structure that represents the content and elements of your HTML as a tree of nodes. This includes all the HTML attributes and the relationships between the nodes. Extensive DOM manipulation after the pages has loaded (e.g., adding, deleting, or moving of nodes) can affect performance, so it is worth understanding how the DOM works, and how such issues can be mitigated. Find out more at [Document Object Model](/en-US/docs/Web/API/Document_Object_Model). diff --git a/files/en-us/mozilla/add-ons/webextensions/manifest.json/commands/index.md b/files/en-us/mozilla/add-ons/webextensions/manifest.json/commands/index.md index f882910c95a3edc..d032f2f07dfff0a 100644 --- a/files/en-us/mozilla/add-ons/webextensions/manifest.json/commands/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/manifest.json/commands/index.md @@ -86,45 +86,8 @@ For example: This JSON defines 2 shortcuts: -1. `"toggle-feature"`, accessed with - - Ctrl - - \+ - - Shift - - \+ - - U - - on Linux, and - - Alt - - \+ - - Shift - - \+ - - U - - on all other platforms. - -2. `"do-another-thing"`, accessed with - - Ctrl - - \+ - - Shift - - \+ - - Y - - on all platforms. +1. `"toggle-feature"`, accessed with Ctrl + Shift + U on Linux, and Alt + Shift + U on all other platforms. +2. `"do-another-thing"`, accessed with Ctrl + Shift + Y on all platforms. You could then listen for the `"toggle-feature"` command with code like this: diff --git a/files/en-us/web/accessibility/aria/roles/listbox_role/index.md b/files/en-us/web/accessibility/aria/roles/listbox_role/index.md index fb6d7bf48d8c4be..c16891cc0cfad4c 100644 --- a/files/en-us/web/accessibility/aria/roles/listbox_role/index.md +++ b/files/en-us/web/accessibility/aria/roles/listbox_role/index.md @@ -96,45 +96,17 @@ When the listbox role is added to an element, or such an element becomes visible - Type a character: focus moves to the next item with a name that starts with the typed character. - Type multiple characters in rapid succession: focus moves to the next item with a name that starts with the string of characters typed. -- **Multiple Selection**: Authors may implement either of two interaction models to support multiple selection: a recommended model that does not require the user to hold a modifier key, such as - - Shift - - or - - Control - - , while navigating the list or an alternative model that does require modifier keys to be held while navigating in order to avoid losing selection states. +- **Multiple Selection**: Authors may implement either of two interaction models to support multiple selection: a recommended model that does not require the user to hold a modifier key, such as Shift or Control, while navigating the list or an alternative model that does require modifier keys to be held while navigating in order to avoid losing selection states. - Recommended selection model — holding modifier keys is not necessary: - - Space - - : changes the selection state of the focused option. - - - Shift + Down Arrow - - (Optional): Moves focus to and toggles the selected state of the next option. - - - Shift + Up Arrow - - (Optional): Moves focus to and toggles the selected state of the previous option. - - - Shift + Space - - (Optional): Selects contiguous items from the most recently selected item to the focused item. - - - Control + Shift + Home - - (Optional): Selects the focused option and all options up to the first option. Optionally, moves focus to the first option. - - - Control + Shift + End - - (Optional): Selects the focused option and all options down to the last option. Optionally, moves focus to the last option. - - - Control + A - - (Optional): Selects all options in the list. Optionally, if all options are selected, it may also unselect all options. + - Space: changes the selection state of the focused option. + - Shift + Down Arrow (Optional): Moves focus to and toggles the selected state of the next option. + - Shift + Up Arrow (Optional): Moves focus to and toggles the selected state of the previous option. + - Shift + Space (Optional): Selects contiguous items from the most recently selected item to the focused item. + - Control + Shift + Home (Optional): Selects the focused option and all options up to the first option. Optionally, moves focus to the first option. + - Control + Shift + End (Optional): Selects the focused option and all options down to the last option. Optionally, moves focus to the last option. + - Control + A (Optional): Selects all options in the list. Optionally, if all options are selected, it may also unselect all options. ### Required JavaScript features diff --git a/files/en-us/web/api/keyboardevent/charcode/index.md b/files/en-us/web/api/keyboardevent/charcode/index.md index 19ce9c4aed75deb..b2d8fb708fc460a 100644 --- a/files/en-us/web/api/keyboardevent/charcode/index.md +++ b/files/en-us/web/api/keyboardevent/charcode/index.md @@ -57,11 +57,7 @@ input.addEventListener("keypress", (e) => { property, but never both. If the key pressed generates a character (e.g., 'a'), `charCode` is set to the code of that character; `charCode` respects the letter case (in other words, `charCode` takes into account - whether the - - shift - - key is held down). Otherwise, the code of the pressed key + whether the shift key is held down). Otherwise, the code of the pressed key is stored in `keyCode`. - When one or more modifier keys are pressed, there are some complex rules for diff --git a/files/en-us/web/api/keyboardevent/index.md b/files/en-us/web/api/keyboardevent/index.md index 62793edeb8415c9..ec718deabff21a8 100644 --- a/files/en-us/web/api/keyboardevent/index.md +++ b/files/en-us/web/api/keyboardevent/index.md @@ -276,27 +276,7 @@ The `KeyboardEvent` interface specification went through numerous draft versions ### Compatibility notes -- As of Firefox 65, the `keypress` event is no longer fired for [non-printable keys](/en-US/docs/Web/API/KeyboardEvent/keyCode#non-printable_keys_function_keys) ([Firefox bug 968056](https://bugzil.la/968056)), except for the - - Enter - - key, and the - - Shift - - \+ - - Enter - - and - - Ctrl - - \+ - - Enter - - key combinations (these were kept for cross-browser compatibility purposes). +- As of Firefox 65, the `keypress` event is no longer fired for [non-printable keys](/en-US/docs/Web/API/KeyboardEvent/keyCode#non-printable_keys_function_keys) ([Firefox bug 968056](https://bugzil.la/968056)), except for the Enter key, and the Shift + Enter and Ctrl + Enter key combinations (these were kept for cross-browser compatibility purposes). ## See also diff --git a/files/en-us/web/api/keyboardevent/key/index.md b/files/en-us/web/api/keyboardevent/key/index.md index a37d0f4e781c44c..31935f0c7d5e111 100644 --- a/files/en-us/web/api/keyboardevent/key/index.md +++ b/files/en-us/web/api/keyboardevent/key/index.md @@ -42,37 +42,8 @@ Consider the event sequence generated when we interact with the Shift Try experimenting using the following two test cases: -1. Press and hold the - - Shift - - key, then press - - 2 - - and release it. Next, release the - - Shift - - key. - -2. Press and hold the - - Shift - - key, then press and hold - - 2 - - . Release the - - Shift - - key. Finally, release - - 2 - - . +1. Press and hold the Shift key, then press 2 and release it. Next, release the Shift key. +2. Press and hold the Shift key, then press and hold 2. Release the Shift key. Finally, release 2. ### HTML diff --git a/files/en-us/web/api/webxr_device_api/movement_and_motion/index.md b/files/en-us/web/api/webxr_device_api/movement_and_motion/index.md index 5ba1c6f06d462ed..f518f34f860c6bf 100644 --- a/files/en-us/web/api/webxr_device_api/movement_and_motion/index.md +++ b/files/en-us/web/api/webxr_device_api/movement_and_motion/index.md @@ -357,47 +357,13 @@ function handleKeyDown(event) { The keys and their effects are: -- The - - W - - key moves the viewer upward by `MOVE_DISTANCE`. - -- The - - S - - key moves the viewer downward by `MOVE_DISTANCE`. - -- The - - A - - key slides the viewer to the left by `MOVE_DISTANCE`. - -- The - - D - - key slides the viewer to the right by `MOVE_DISTANCE`. - -- The up arrow key, - - ↑ - - , slides the viewer forward by `MOVE_DISTANCE`. - -- The down arrow key, - - ↓ - - , slides the viewer backward by `MOVE_DISTANCE`. - -- The - - R - - key resets the viewer to their starting position and orientation by resetting the input offsets all to 0. +- The W key moves the viewer upward by `MOVE_DISTANCE`. +- The S key moves the viewer downward by `MOVE_DISTANCE`. +- The A key slides the viewer to the left by `MOVE_DISTANCE`. +- The D key slides the viewer to the right by `MOVE_DISTANCE`. +- The up arrow key, ↑, slides the viewer forward by `MOVE_DISTANCE`. +- The down arrow key, ↓, slides the viewer backward by `MOVE_DISTANCE`. +- The R key resets the viewer to their starting position and orientation by resetting the input offsets all to 0. These offsets will be applied by the renderer starting with the next frame drawn. diff --git a/files/en-us/web/html/element/select/index.md b/files/en-us/web/html/element/select/index.md index d524b6a7c13f130..391ad24dbbec810 100644 --- a/files/en-us/web/html/element/select/index.md +++ b/files/en-us/web/html/element/select/index.md @@ -67,63 +67,15 @@ Mouse users can hold the Ctrl, Command, or Shift` element (e.g. using - - Tab - - ). - -- Selecting an item at the top or bottom of the range they want to select using the - - Up - - and - - Down - - cursor keys to go up and down the options. - -- Holding down the - - Shift - - key and then using the - - Up - - and - - Down - - cursor keys to increase or decrease the range of items selected. +- Focusing on the `` element (e.g. using - - Tab - - ). - -- Holding down the - - Ctrl - - key then using the - - Up - - and - - Down - - cursor keys to change the "focused" select option, i.e. the one that will be selected if you choose to do so. The "focused" select option is highlighted with a dotted outline, in the same way as a keyboard-focused link. - -- Pressing - - Space - - to select/deselect "focused" select options. +- Focusing on the `