Remove all extraneous empty lines around kbd-in-list (#36616)

* Remove all extraneous empty lines around kbd-in-list * Collapse
mdn · Nov 1, 2024 · b7a7c44 · b7a7c44
1 parent a9d8c91
commit b7a7c44
Show file tree

Hide file tree

Showing 13 changed files with 34 additions and 269 deletions.
diff --git a/...earn/common_questions/tools_and_setup/what_are_browser_developer_tools/index.md b/...earn/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:** _<kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd>_ or <kbd>F12</kbd>
-
-  - **macOS:** _<kbd>⌘</kbd> + <kbd>⌥</kbd> + <kbd>I</kbd>_
+  - **Windows:** <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> or <kbd>F12</kbd>
+  - **macOS:** <kbd>⌘</kbd> + <kbd>⌥</kbd> + <kbd>I</kbd>
 
 - **_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
@@ -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
-
-  <kbd>Tab</kbd>
-
-  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 <kbd>Tab</kbd> 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
@@ -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
-
-  <kbd>Tab</kbd>
-
-  key).
+- the control was active and the user moves the focus to another control using the keyboard (e.g. the <kbd>Tab</kbd> 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
@@ -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
-
-  <kbd>Return</kbd>
-
-  /
-
-  <kbd>Enter</kbd>
-
-  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 <kbd>Return</kbd> / <kbd>Enter</kbd> 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
@@ -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
-
-   <kbd>Cmd</kbd>
-
-   \+
-
-   <kbd>I</kbd>
-
-   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 <kbd>Cmd</kbd> + <kbd>I</kbd> 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
@@ -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
-
-  <kbd>Enter</kbd>
-
-  /
-
-  <kbd>Return</kbd>
-
-  , 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 <kbd>Enter</kbd> / <kbd>Return</kbd>, 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
@@ -86,45 +86,8 @@ For example:
 
 This JSON defines 2 shortcuts:
 
-1. `"toggle-feature"`, accessed with
-
-   <kbd>Ctrl</kbd>
-
-   \+
-
-   <kbd>Shift</kbd>
-
-   \+
-
-   <kbd>U</kbd>
-
-   on Linux, and
-
-   <kbd>Alt</kbd>
-
-   \+
-
-   <kbd>Shift</kbd>
-
-   \+
-
-   <kbd>U</kbd>
-
-   on all other platforms.
-
-2. `"do-another-thing"`, accessed with
-
-   <kbd>Ctrl</kbd>
-
-   \+
-
-   <kbd>Shift</kbd>
-
-   \+
-
-   <kbd>Y</kbd>
-
-   on all platforms.
+1. `"toggle-feature"`, accessed with <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>U</kbd> on Linux, and <kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>U</kbd> on all other platforms.
+2. `"do-another-thing"`, accessed with <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Y</kbd> 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
@@ -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
-
-  <kbd>Shift</kbd>
-
-  or
-
-  <kbd>Control</kbd>
-
-  , 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 <kbd>Shift</kbd> or <kbd>Control</kbd>, 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:
 
-    - <kbd>Space</kbd>
-
-      : changes the selection state of the focused option.
-
-    - <kbd>Shift + Down Arrow</kbd>
-
-      (Optional): Moves focus to and toggles the selected state of the next option.
-
-    - <kbd>Shift + Up Arrow</kbd>
-
-      (Optional): Moves focus to and toggles the selected state of the previous option.
-
-    - <kbd>Shift + Space</kbd>
-
-      (Optional): Selects contiguous items from the most recently selected item to the focused item.
-
-    - <kbd>Control + Shift + Home</kbd>
-
-      (Optional): Selects the focused option and all options up to the first option. Optionally, moves focus to the first option.
-
-    - <kbd>Control + Shift + End</kbd>
-
-      (Optional): Selects the focused option and all options down to the last option. Optionally, moves focus to the last option.
-
-    - <kbd>Control + A</kbd>
-
-      (Optional): Selects all options in the list. Optionally, if all options are selected, it may also unselect all options.
+    - <kbd>Space</kbd>: changes the selection state of the focused option.
+    - <kbd>Shift + Down Arrow</kbd> (Optional): Moves focus to and toggles the selected state of the next option.
+    - <kbd>Shift + Up Arrow</kbd> (Optional): Moves focus to and toggles the selected state of the previous option.
+    - <kbd>Shift + Space</kbd> (Optional): Selects contiguous items from the most recently selected item to the focused item.
+    - <kbd>Control + Shift + Home</kbd> (Optional): Selects the focused option and all options up to the first option. Optionally, moves focus to the first option.
+    - <kbd>Control + Shift + End</kbd> (Optional): Selects the focused option and all options down to the last option. Optionally, moves focus to the last option.
+    - <kbd>Control + A</kbd> (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
@@ -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
-
-  <kbd>shift</kbd>
-
-  key is held down). Otherwise, the code of the pressed key
+  whether the <kbd>shift</kbd> 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
@@ -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
-
-  <kbd>Enter</kbd>
-
-  key, and the
-
-  <kbd>Shift</kbd>
-
-  \+
-
-  <kbd>Enter</kbd>
-
-  and
-
-  <kbd>Ctrl</kbd>
-
-  \+
-
-  <kbd>Enter</kbd>
-
-  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 <kbd>Enter</kbd> key, and the <kbd>Shift</kbd> + <kbd>Enter</kbd> and <kbd>Ctrl</kbd> + <kbd>Enter</kbd> 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
@@ -42,37 +42,8 @@ Consider the event sequence generated when we interact with the <kbd>Shift</kbd>
 
 Try experimenting using the following two test cases:
 
-1. Press and hold the
-
-   <kbd>Shift</kbd>
-
-   key, then press
-
-   <kbd>2</kbd>
-
-   and release it. Next, release the
-
-   <kbd>Shift</kbd>
-
-   key.
-
-2. Press and hold the
-
-   <kbd>Shift</kbd>
-
-   key, then press and hold
-
-   <kbd>2</kbd>
-
-   . Release the
-
-   <kbd>Shift</kbd>
-
-   key. Finally, release
-
-   <kbd>2</kbd>
-
-   .
+1. Press and hold the <kbd>Shift</kbd> key, then press <kbd>2</kbd> and release it. Next, release the <kbd>Shift</kbd> key.
+2. Press and hold the <kbd>Shift</kbd> key, then press and hold <kbd>2</kbd>. Release the <kbd>Shift</kbd> key. Finally, release <kbd>2</kbd>.
 
 ### 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
@@ -357,47 +357,13 @@ function handleKeyDown(event) {
 
 The keys and their effects are:
 
-- The
-
-  <kbd>W</kbd>
-
-  key moves the viewer upward by `MOVE_DISTANCE`.
-
-- The
-
-  <kbd>S</kbd>
-
-  key moves the viewer downward by `MOVE_DISTANCE`.
-
-- The
-
-  <kbd>A</kbd>
-
-  key slides the viewer to the left by `MOVE_DISTANCE`.
-
-- The
-
-  <kbd>D</kbd>
-
-  key slides the viewer to the right by `MOVE_DISTANCE`.
-
-- The up arrow key,
-
-  <kbd>↑</kbd>
-
-  , slides the viewer forward by `MOVE_DISTANCE`.
-
-- The down arrow key,
-
-  <kbd>↓</kbd>
-
-  , slides the viewer backward by `MOVE_DISTANCE`.
-
-- The
-
-  <kbd>R</kbd>
-
-  key resets the viewer to their starting position and orientation by resetting the input offsets all to 0.
+- The <kbd>W</kbd> key moves the viewer upward by `MOVE_DISTANCE`.
+- The <kbd>S</kbd> key moves the viewer downward by `MOVE_DISTANCE`.
+- The <kbd>A</kbd> key slides the viewer to the left by `MOVE_DISTANCE`.
+- The <kbd>D</kbd> key slides the viewer to the right by `MOVE_DISTANCE`.
+- The up arrow key, <kbd>↑</kbd>, slides the viewer forward by `MOVE_DISTANCE`.
+- The down arrow key, <kbd>↓</kbd>, slides the viewer backward by `MOVE_DISTANCE`.
+- The <kbd>R</kbd> 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
@@ -67,63 +67,15 @@ Mouse users can hold the <kbd>Ctrl</kbd>, <kbd>Command</kbd>, or <kbd>Shift</kbd
 
 Keyboard users can select multiple contiguous items by:
 
-- Focusing on the `<select>` element (e.g. using
-
-  <kbd>Tab</kbd>
-
-  ).
-
-- Selecting an item at the top or bottom of the range they want to select using the
-
-  <kbd>Up</kbd>
-
-  and
-
-  <kbd>Down</kbd>
-
-  cursor keys to go up and down the options.
-
-- Holding down the
-
-  <kbd>Shift</kbd>
-
-  key and then using the
-
-  <kbd>Up</kbd>
-
-  and
-
-  <kbd>Down</kbd>
-
-  cursor keys to increase or decrease the range of items selected.
+- Focusing on the `<select>` element (e.g. using <kbd>Tab</kbd>).
+- Selecting an item at the top or bottom of the range they want to select using the <kbd>Up</kbd> and <kbd>Down</kbd> cursor keys to go up and down the options.
+- Holding down the <kbd>Shift</kbd> key and then using the <kbd>Up</kbd> and <kbd>Down</kbd> cursor keys to increase or decrease the range of items selected.
 
 Keyboard users can select multiple non-contiguous items by:
 
-- Focusing on the `<select>` element (e.g. using
-
-  <kbd>Tab</kbd>
-
-  ).
-
-- Holding down the
-
-  <kbd>Ctrl</kbd>
-
-  key then using the
-
-  <kbd>Up</kbd>
-
-  and
-
-  <kbd>Down</kbd>
-
-  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
-
-  <kbd>Space</kbd>
-
-  to select/deselect "focused" select options.
+- Focusing on the `<select>` element (e.g. using <kbd>Tab</kbd>).
+- Holding down the <kbd>Ctrl</kbd> key then using the <kbd>Up</kbd> and <kbd>Down</kbd> 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 <kbd>Space</kbd> to select/deselect "focused" select options.
 
 ## Styling with CSS