From ca4a66c2ae0a995fe837ebd0d67dbc2b1fd5e9dc Mon Sep 17 00:00:00 2001 From: estelle Date: Fri, 17 Oct 2025 13:38:01 +0200 Subject: [PATCH 1/5] SVG autofocus attribute: missing but widely available --- .../reference/attribute/autofocus/index.md | 55 +++++++++++++++++++ .../web/svg/reference/attribute/index.md | 2 + 2 files changed, 57 insertions(+) create mode 100644 files/en-us/web/svg/reference/attribute/autofocus/index.md diff --git a/files/en-us/web/svg/reference/attribute/autofocus/index.md b/files/en-us/web/svg/reference/attribute/autofocus/index.md new file mode 100644 index 000000000000000..01a1ded6d0a92c1 --- /dev/null +++ b/files/en-us/web/svg/reference/attribute/autofocus/index.md @@ -0,0 +1,55 @@ +--- +title: autofocus +slug: Web/SVG/Reference/Attribute/autofocus +page-type: svg-attribute +browser-compat: svg.global_attributes.autofocus +sidebar: svgref +--- + +The **`autofocus`** global SVG attribute defines a focusable element to be focused after it's connected to a document. The attribute has no effect if the element is not already focusable. + +> [!NOTE] +> The `autofocus` attribute has an HTML counterpart: [`autofocus`](/en-US/docs/Web/HTML/Reference/Global_attributes/autofocus) + +## Usage notes + + + + + + + + + + + + + + + + +
Value + [boolean attribute](/en-US/docs/Glossary/Boolean/HTML) +
Default value(none)
AnimatableNo
+ +For a description of the values, please refer to the [HTML `autofocus`](/en-US/docs/Web/HTML/Reference/Global_attributes/autofocus) attribute. + +## Accessibility concerns + +Automatically focusing an SVG can confuse visually-impaired people using screen-reading technology and people with cognitive impairments. When autofocus is assigned, screen-readers "teleport" their user to the focusable element without warning them beforehand. + +Use careful consideration for accessibility when applying the `autofocus` attribute. Automatically focusing on an element can cause the page to scroll on load. The focus can also cause dynamic keyboards to display on some touch devices. While a screen reader will announce the {{glossary("accessible name")}} of the element receiving focus, the screen reader will not announce anything before the element that may provide more context, and the sighted user on a small device will equally miss the context created by the preceding content. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- SVG {{SVGAttr("tabindex")}} attribute +- HTML [`autofocus`](/en-US/docs/Web/HTML/Reference/Global_attributes/autofocus) property +- {{domxref("SVGElement/autofocus")}} property diff --git a/files/en-us/web/svg/reference/attribute/index.md b/files/en-us/web/svg/reference/attribute/index.md index f17036d2a0c5c98..4b201bd4fcd37d4 100644 --- a/files/en-us/web/svg/reference/attribute/index.md +++ b/files/en-us/web/svg/reference/attribute/index.md @@ -20,6 +20,7 @@ Below is a list of all of the attributes available in SVG along with links to re - {{SVGAttr("amplitude")}} - {{SVGAttr("attributeName")}} - {{SVGAttr("attributeType")}} +- {{SVGAttr("autofocus")}} - {{SVGAttr("azimuth")}} ### B @@ -298,6 +299,7 @@ Below is a list of all of the attributes available in SVG along with links to re - {{SVGAttr("style")}} - {{SVGAttr("lang")}} - {{SVGAttr("tabindex")}} + - {{SVGAttr("autofocus")}} - {{SVGAttr("xml:lang")}} - {{SVGAttr("xml:space")}} From 405d4fc91b457579721fb4898ac1c1d5a0020d31 Mon Sep 17 00:00:00 2001 From: estelle Date: Fri, 17 Oct 2025 14:42:13 +0200 Subject: [PATCH 2/5] SVG autofocus attribute: missing but widely available --- files/en-us/web/svg/reference/attribute/autofocus/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/svg/reference/attribute/autofocus/index.md b/files/en-us/web/svg/reference/attribute/autofocus/index.md index 01a1ded6d0a92c1..fbca72b878a1aa2 100644 --- a/files/en-us/web/svg/reference/attribute/autofocus/index.md +++ b/files/en-us/web/svg/reference/attribute/autofocus/index.md @@ -18,7 +18,7 @@ The **`autofocus`** global SVG attribute defines a focusable element to be focus Value - [boolean attribute](/en-US/docs/Glossary/Boolean/HTML) + boolean attribute From 33b3b1ba01f9a13621b8ebbe50f86d73d6c7ca98 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Mon, 20 Oct 2025 11:26:21 +0200 Subject: [PATCH 3/5] Apply suggestions from code review Co-authored-by: Joshua Chen --- files/en-us/web/svg/reference/attribute/autofocus/index.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/files/en-us/web/svg/reference/attribute/autofocus/index.md b/files/en-us/web/svg/reference/attribute/autofocus/index.md index fbca72b878a1aa2..f1168e01c6b956e 100644 --- a/files/en-us/web/svg/reference/attribute/autofocus/index.md +++ b/files/en-us/web/svg/reference/attribute/autofocus/index.md @@ -9,7 +9,7 @@ sidebar: svgref The **`autofocus`** global SVG attribute defines a focusable element to be focused after it's connected to a document. The attribute has no effect if the element is not already focusable. > [!NOTE] -> The `autofocus` attribute has an HTML counterpart: [`autofocus`](/en-US/docs/Web/HTML/Reference/Global_attributes/autofocus) +> The `autofocus` attribute has an HTML counterpart: [`autofocus`](/en-US/docs/Web/HTML/Reference/Global_attributes/autofocus). ## Usage notes @@ -51,5 +51,5 @@ Use careful consideration for accessibility when applying the `autofocus` attrib ## See also - SVG {{SVGAttr("tabindex")}} attribute -- HTML [`autofocus`](/en-US/docs/Web/HTML/Reference/Global_attributes/autofocus) property -- {{domxref("SVGElement/autofocus")}} property +- HTML [`autofocus`](/en-US/docs/Web/HTML/Reference/Global_attributes/autofocus) attribute +- {{domxref("SVGElement.autofocus")}} From fd4fae33628de58e41ba9d3ea34d7c2fa7f2c18b Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Mon, 20 Oct 2025 11:27:39 +0200 Subject: [PATCH 4/5] Update files/en-us/web/svg/reference/attribute/autofocus/index.md --- files/en-us/web/svg/reference/attribute/autofocus/index.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/files/en-us/web/svg/reference/attribute/autofocus/index.md b/files/en-us/web/svg/reference/attribute/autofocus/index.md index f1168e01c6b956e..dd32dc920864e6a 100644 --- a/files/en-us/web/svg/reference/attribute/autofocus/index.md +++ b/files/en-us/web/svg/reference/attribute/autofocus/index.md @@ -8,8 +8,7 @@ sidebar: svgref The **`autofocus`** global SVG attribute defines a focusable element to be focused after it's connected to a document. The attribute has no effect if the element is not already focusable. -> [!NOTE] -> The `autofocus` attribute has an HTML counterpart: [`autofocus`](/en-US/docs/Web/HTML/Reference/Global_attributes/autofocus). +The `autofocus` attribute has an HTML counterpart: [`autofocus`](/en-US/docs/Web/HTML/Reference/Global_attributes/autofocus). ## Usage notes From a2c5ceeea8d17115c766c32ee3736afa1be37b91 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Mon, 20 Oct 2025 11:29:55 +0200 Subject: [PATCH 5/5] Update files/en-us/web/svg/reference/attribute/autofocus/index.md --- files/en-us/web/svg/reference/attribute/autofocus/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/svg/reference/attribute/autofocus/index.md b/files/en-us/web/svg/reference/attribute/autofocus/index.md index dd32dc920864e6a..970b8ddc3721daf 100644 --- a/files/en-us/web/svg/reference/attribute/autofocus/index.md +++ b/files/en-us/web/svg/reference/attribute/autofocus/index.md @@ -8,7 +8,7 @@ sidebar: svgref The **`autofocus`** global SVG attribute defines a focusable element to be focused after it's connected to a document. The attribute has no effect if the element is not already focusable. -The `autofocus` attribute has an HTML counterpart: [`autofocus`](/en-US/docs/Web/HTML/Reference/Global_attributes/autofocus). +The `autofocus` attribute has an HTML counterpart: [`autofocus`](/en-US/docs/Web/HTML/Reference/Global_attributes/autofocus). No more than one element in the document may have the `autofocus` attribute. If applied to multiple elements, the first one will receive focus. ## Usage notes