Subedit and cross link

mdn · Dec 8, 2023 · c1fec39 · c1fec39
1 parent 45874cd
commit c1fec39
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 9 deletions.
diff --git a/files/en-us/web/api/htmlinputelement/showpicker/index.md b/files/en-us/web/api/htmlinputelement/showpicker/index.md
@@ -171,5 +171,6 @@ button.addEventListener("click", () => {
 
 - {{ HTMLElement("input") }}
 - {{ domxref("HTMLInputElement") }}
+- {{ domxref("HTMLSelectElement.showPicker()") }}
 - {{htmlelement("datalist")}}
 - [`autocomplete`](/en-US/docs/Web/HTML/Attributes/autocomplete)
diff --git a/files/en-us/web/api/htmlselectelement/showpicker/index.md b/files/en-us/web/api/htmlselectelement/showpicker/index.md
@@ -39,7 +39,7 @@ None ({{jsxref("undefined")}}).
 - `SecurityError` {{domxref("DOMException")}}
   - : Thrown if called in a cross-origin iframe.
 
-## Security Considerations
+## Security considerations
 
 [Transient user activation](/en-US/docs/Web/Security/User_activation) is required.
 The user has to interact with the page or a UI element in order for this feature to work.
@@ -48,7 +48,7 @@ The method is only allowed to be called in same-origin iframes; an exception is
 
 ## Examples
 
-### Feature Detection
+### Feature detection
 
 The code below shows how to check if `showPicker()` is supported:
 
@@ -58,11 +58,9 @@ if ("showPicker" in HTMLSelectElement.prototype) {
 }
 ```
 
-### Usage
+### Launching the picker
 
-This example shows how this feature can be used.
-
-> **Note:** A live example cannot be shown here because they run in a cross-origin frame, and would cause a [`SecurityError`](#securityerror)
+This example shows how to use a button to launch the picker for a `<select>` element with two options.
 
 #### HTML
 
@@ -78,7 +76,8 @@ This example shows how this feature can be used.
 
 #### JavaScript
 
-The code simply gets the previous element of the selected button and calls showPicker() on it.
+The code gets the `<button>` and adds a listener for its `click` event.
+The event handler gets the `<select>` element and calls `showPicker()` on it.
 
 ```js
 const button = document.querySelector("button");
@@ -92,6 +91,8 @@ button.addEventListener("click", (event) => {
 });
 ```
 
+<!-- A live example cannot be shown here because they run in a cross-origin frame, and would cause a SecurityError -->
+
 ## Specifications
 
 {{Specifications}}
@@ -104,3 +105,4 @@ button.addEventListener("click", (event) => {
 
 - {{ HTMLElement("select") }}
 - {{ domxref("HTMLSelectElement") }}
+- {{ domxref("HTMLInputElement.showPicker()") }}
diff --git a/files/en-us/web/security/user_activation/index.md b/files/en-us/web/security/user_activation/index.md
@@ -38,6 +38,7 @@ APIs that require transient activation (list is not exhaustive):
 - {{domxref("GPUAdapter.requestAdapterInfo()")}}
 - {{domxref("HID.requestDevice()")}}
 - {{domxref("HTMLInputElement.showPicker()")}}
+- {{domxref("HTMLSelectElement.showPicker()")}}
 - {{domxref("HTMLVideoElement.requestPictureInPicture()")}}
 - {{domxref("IdleDetector/requestPermission_static", "IdleDetector.requestPermission()")}}
 - {{domxref("MediaDevices.selectAudioOutput()")}}
@@ -50,12 +51,12 @@ APIs that require transient activation (list is not exhaustive):
 - {{domxref("RemotePlayback.prompt()")}}
 - {{domxref("USB.requestDevice()")}}
 - {{domxref("Keyboard.lock()")}}
+- {{domxref("Window.getScreenDetails()")}}
 - {{domxref("Window.open()")}}
+- {{domxref("Window.queryLocalFonts()")}}
 - {{domxref("Window.showOpenFilePicker()")}}
 - {{domxref("Window.showSaveFilePicker()")}}
 - {{domxref("Window.showDirectoryPicker()")}}
-- `Window.getScreenDetails()`
-- {{domxref("Window.queryLocalFonts()")}}
 - {{domxref("XRSystem.requestSession()")}}
 
 ## Sticky activation