Focus and Blur Pages for SVGElement (#37365)

files/en-us/web/api/svgelement/blur/index.md

@@ -0,0 +1,70 @@
+---
+title: "SVGElement: blur() method"
+short-title: blur()
+slug: Web/API/SVGElement/blur
+page-type: web-api-instance-method
+browser-compat: api.SVGElement.blur
+---
+
+{{APIRef("SVG")}}
+
+The **`SVGElement.blur()`** method removes keyboard focus from the current SVG element.
+
+## Syntax
+
+```js-nolint
+blur()
+```
+
+### Parameters
+
+None.
+
+### Return value
+
+None ({{jsxref("undefined")}}).
+
+## Examples
+
+### Remove focus from an SVG circle element
+
+#### HTML
+
+```html
+<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
+  <circle id="myCircle" cx="100" cy="100" r="50" tabindex="0" fill="blue" />
+  <button id="focusButton">Focus the circle</button>
+  <button id="blurButton">Blur the circle</button>
+</svg>
+```
+
+#### JavaScript
+
+```js
+const circle = document.getElementById("myCircle");
+const focusButton = document.getElementById("focusButton");
+const blurButton = document.getElementById("blurButton");
+
+// Focus the circle when the "Focus" button is clicked
+focusButton.addEventListener("click", () => {
+  circle.focus();
+});
+
+// Blur the circle when the "Blur" button is clicked
+blurButton.addEventListener("click", () => {
+  circle.blur();
+});
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGElement.focus")}} makes the element the current keyboard focus.
+- {{domxref("HTMLElement.blur")}} a similar method for HTML elements.

files/en-us/web/api/svgelement/focus/index.md

@@ -0,0 +1,79 @@
+---
+title: "SVGElement: focus() method"
+short-title: focus()
+slug: Web/API/SVGElement/focus
+page-type: web-api-instance-method
+browser-compat: api.SVGElement.focus
+---
+
+{{APIRef("SVG")}}
+
+The **`SVGElement.focus()`** method sets focus on the specified SVG element, if it can be focused.
+The focused element is the element that will receive keyboard and similar events by default.
+
+By default the browser will scroll the element into view after focusing it, and it may also provide visible indication of the focused element (typically by displaying a "focus ring" around the element).
+Parameter options are provided to disable the default scrolling and force visible indication on elements.
+
+## Syntax
+
+```js-nolint
+focus()
+focus(options)
+```
+
+### Parameters
+
+- `options` {{optional_inline}}
+
+  - : An optional object for controlling aspects of the focusing process.
+    This object may contain the following properties:
+
+    - `preventScroll` {{optional_inline}}
+      - : A boolean value indicating whether or not the browser should scroll the document to bring the newly-focused element into view.
+        A value of `false` for `preventScroll` (the default) means that the browser will scroll the element into view after focusing it.
+        If `preventScroll` is set to `true`, no scrolling will occur.
+
+### Return value
+
+None ({{jsxref("undefined")}}).
+
+## Examples
+
+### Focusing an SVG element
+
+This example uses a button to set the focus on an SVG circle element.
+
+#### HTML
+
+```html
+<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
+  <circle id="myCircle" cx="100" cy="100" r="50" tabindex="0" fill="blue" />
+  <button id="focusButton">Focus the circle</button>
+</svg>
+```
+
+#### JavaScript
+
+```js
+document.getElementById("focusButton").addEventListener("click", () => {
+  const circle = document.getElementById("myCircle");
+  circle.focus();
+});
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Notes
+
+- If you call `SVGElement.focus()` from a mousedown event handler, you must call `event.preventDefault()` to keep the focus from leaving the `SVGElement`
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGElement.blur")}} to remove the focus from an element.
+- {{domxref("HTMLElement.focus")}} a similar method for HTML elements.

files/en-us/web/api/svgelement/index.md

@@ -21,6 +21,10 @@ _Also inherits properties from the {{DOMxRef("Element")}} interface._
   - : A {{DOMxRef("DOMStringMap")}} object which provides a list of key/value pairs of named data attributes which correspond to [custom data attributes](/en-US/docs/Learn_web_development/Howto/Solve_HTML_problems/Use_data_attributes) attached to the element. These can also be defined in SVG using attributes of the form {{SVGAttr("data-*")}}, where `*` is the key name for the pair. This works just like HTML's {{DOMxRef("HTMLElement.dataset")}} property and HTML's [`data-*`](/en-US/docs/Web/HTML/Global_attributes/data-*) global attribute.
 - {{DOMxRef("SVGElement.className")}} {{Deprecated_Inline}} {{ReadOnlyInline}}
   - : An {{DOMxRef("SVGAnimatedString")}} that reflects the value of the {{SVGAttr("class")}} attribute on the given element, or the empty string if `class` is not present. This attribute is deprecated and may be removed in a future version of this specification. Authors are advised to use {{DOMxRef("Element.classList")}} instead.
+- {{DOMxRef("SVGElement.blur")}}
+  - : Removes keyboard focus from the currently focused element.
+- {{DOMxRef("SVGElement.focus")}}
+  - : Makes the element the current keyboard focus.
 - {{DOMxRef("SVGElement.nonce")}}
   - : Returns the cryptographic number used once that is used by Content Security Policy to determine whether a given fetch will be allowed to proceed.
 - {{DOMxRef("SVGElement.ownerSVGElement")}} {{ReadOnlyInline}}