[pull] main from mdn:main

files/en-us/glossary/origin/index.md

@@ -9,6 +9,20 @@ Web content's **origin** is defined by the _scheme_ (protocol), _hostname_ (doma
 
 Some operations are restricted to same-origin content, and this restriction can be lifted using {{Glossary("CORS")}}.
 
+## Opaque origin
+
+An opaque origin is a special type of browser-internal value that obscures the true origin of a resource (opaque origins are always serialized as `null`). They are used by the browser to ensure resource isolation as they are never considered equal to any other origin — including other opaque origins.
+
+Opaque origins are applied in cases where the true origin of a resource is sensitive, cannot be safely used for security checks, or does not exist.
+A resource with an opaque origin will have its {{httpheader("Origin")}} HTTP header in requests set to [`null`](/en-US/docs/Web/HTTP/Reference/Headers/Origin#null).
+It will also fail same-origin checks with any other resource, and hence be restricted to only those operations available to cross-origin resources.
+
+Common cases where opaque origins are used include:
+
+- A document within an iframe that has the [sandbox](/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy/sandbox) attribute set, and does not include the `allow-same-origin` flag.
+- `file:` URLs are usually treated as opaque origins so that files on they file system cannot read each other.
+- Documents created programatically using APIs like {{domxref("DOMImplementation.createDocument()")}}.
+
 ## Examples
 
 These are same origin because they have the same scheme (`http`) and hostname (`example.com`), and the different file path does not matter:

files/en-us/learn_web_development/core/accessibility/wai-aria_basics/index.md

@@ -365,7 +365,7 @@ If you go to VoiceOver's landmarks menu (accessed using VoiceOver key + U and th
 
 However, we could do better here. The search form is a really important landmark that people will want to find, but it is not listed in the landmarks menu or treated like a notable landmark beyond the actual input being called out as a search input (`<input type="search">`).
 
-We could improve it by the use of the ARIA `role="search"`, but using the {{htmlelement("search")}} element implicitly gives that role to the form.
+To mark the form as a landmark, you can either wrap it with the {{htmlelement("search")}} element or give it ARIA `role="search"`. As a general rule, use HTML semantics where possible and only use ARIA where there is no HTML equivalent.
 
 ```html live-sample___aria-website-roles
 <header>

files/en-us/learn_web_development/core/styling_basics/getting_started/index.md

@@ -583,8 +583,8 @@ In the example below, each declaration (and rule start/end) has its own line. Th
 ```css
 body {
   font:
-    1em/150% Helvetica,
-    Arial,
+    1em/150% "Helvetica",
+    "Arial",
     sans-serif;
   padding: 1em;
   margin: 0 auto;

files/en-us/learn_web_development/getting_started/your_first_website/adding_interactivity/index.md

@@ -92,7 +92,7 @@ Try clicking the list items a few times and note how the "done" styles are toggl
 To start you off with writing some JavaScript, we'll walk you through adding a _Hello world!_ example to your sample website. ([_Hello world!_](https://en.wikipedia.org/wiki/%22Hello,_World!%22_program) is the standard introductory programming example.)
 
 > [!WARNING]
-> If you haven't been following along with the rest of our course, [download this example code](https://codeload.github.com/mdn/beginner-html-site-styled/zip/refs/heads/gh-pages) and use it as a starting point.
+> If you haven't been following along with the rest of our course, [download this example code](https://github.com/mdn/beginner-html-site-styled/archive/refs/heads/main.zip) and use it as a starting point.
 
 1. Inside your `first-website` folder or the example folder you have just downloaded, create a new folder named `scripts`.
 2. Within the `scripts` folder, create a new text document called `main.js`, and save it.

files/en-us/learn_web_development/getting_started/your_first_website/styling_the_content/index.md

@@ -308,7 +308,7 @@ If you followed all the instructions in this article, you should have a page tha
 
 ![A Mozilla logo, centered, and a header and paragraphs. It now looks nicely styled, with a blue background for the whole page and orange background for the centered main content strip.](website-screenshot-final.png)
 
-You can [view our version here](https://mdn.github.io/beginner-html-site-styled/). If you get stuck, you can always compare your work with our [finished example code on GitHub](https://github.com/mdn/beginner-html-site-styled/blob/gh-pages/styles/style.css).
+You can [view our version here](https://mdn.github.io/beginner-html-site-styled/). If you get stuck, you can always compare your work with our [finished example code on GitHub](https://github.com/mdn/beginner-html-site-styled/blob/main/styles/style.css).
 
 In this article, we've only scratched the surface of CSS. You'll learn a lot more in our [CSS styling basics](/en-US/docs/Learn_web_development/Core/Styling_basics) Core module later in the course.
 

files/en-us/mozilla/add-ons/webextensions/api/contentscripts/register/index.md

@@ -10,7 +10,8 @@ Use this function to register one or more content scripts.
 
 It accepts one parameter, which is an object with similar properties to the objects given in the [`content_scripts`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts) manifest key (but note that `content_scripts` is an array of objects, while the argument to `register()` is one object).
 
-This is an asynchronous function that returns a [`Promise`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise).
+The extension must have the appropriate [host permissions](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions#host_permissions) for the patterns in `contentScriptOptions`, or the
+API call is rejected.
 
 ## Syntax
 

files/en-us/mozilla/add-ons/webextensions/api/scripting/registercontentscripts/index.md

@@ -11,9 +11,7 @@ Registers one or more content scripts.
 > [!NOTE]
 > This method is available in Manifest V3 or higher in Chrome and Firefox 101. In Firefox 102+, this method is also available in Manifest V2.
 
-To use this API you must have the `"scripting"` [permission](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions) and permission for the page's URL, either explicitly as a [host permission](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions#host_permissions) or using the [activeTab permission](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions#activetab_permission).
-
-This is an asynchronous function that returns a [`Promise`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise).
+To call this API, you must have the `"scripting"` [permission](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions). To run the injected script, the extension must have permission for the page's URL, either explicitly as a [host permission](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions#host_permissions) or using the [activeTab permission](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions#activetab_permission).
 
 ## Syntax
 

files/en-us/mozilla/add-ons/webextensions/api/scripting/updatecontentscripts/index.md

@@ -11,9 +11,7 @@ Updates registered content scripts. If there are errors during script parsing an
 > [!NOTE]
 > This method is available in Manifest V3 or higher in Chrome and Firefox 101. In Firefox 102+, this method is also available in Manifest V2.
 
-To use this API you must have the `"scripting"` [permission](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions) and permission for the page's URL, either explicitly as a [host permission](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions#host_permissions) or using the [activeTab permission](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions#activetab_permission).
-
-This is an asynchronous function that returns a [`Promise`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise).
+To call this API, you must have the `"scripting"` [permission](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions). To run the injected script, the extension must have permission for the page's URL, either explicitly as a [host permission](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions#host_permissions) or using the [activeTab permission](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions#activetab_permission).
 
 ## Syntax
 

files/en-us/web/accessibility/aria/reference/roles/banner_role/index.md

@@ -63,6 +63,8 @@ We could also have written the above with the HTML `header` element:
 
 ## Best practices
 
+Using the {{HTMLElement('header')}} element will automatically communicate that the element has a role of `banner`. If possible, prefer using the semantic `<header>` element instead of the `banner` role.
+
 While it is best to use the `header` element and ensure it is not a descendant of any subsection of the page, sometimes you don't have access to the underlying HTML. If this is the case, you can add the role of `banner` to the element of the page which should be exposed as a `banner` with JavaScript. Identifying the page's banner in this way will help improve the site's accessibility.
 
 ## Specifications

files/en-us/web/accessibility/aria/reference/roles/complementary_role/index.md

@@ -54,7 +54,7 @@ The `complementary` role is [a landmark](/en-US/docs/Web/Accessibility/ARIA/Guid
 
 ### Prefer HTML
 
-Using the {{HTMLElement('aside')}} element will automatically communicate a section has a role of `complementary`. If at all possible, prefer using it instead.
+Using the {{HTMLElement('aside')}} element will automatically communicate that the element has a role of `complementary`. If possible, prefer using the semantic `<aside>` element instead of the `complementary` role.
 
 ### Labeling landmarks
 

files/en-us/web/accessibility/aria/reference/roles/form_role/index.md

@@ -118,7 +118,7 @@ Screen readers will announce the type of role the landmark is. Because of this,
 
 ### Prefer HTML
 
-Using the {{HTMLElement('form')}} element will automatically communicate a section has a role of `form`. If at all possible, prefer using it instead.
+Using the {{HTMLElement('form')}} element will automatically communicate that the element has a role of `form`. If possible, prefer using the semantic `<form>` element instead of the `form` role.
 
 ## Specifications
 

files/en-us/web/accessibility/aria/reference/roles/landmark_role/index.md

@@ -18,15 +18,26 @@ A `landmark` is an abstract role for a section of content that is important enou
 
 To create a landmark role, define the purpose of the content by using a semantic element such as `<section>`, `<nav>`, or `<main>`, or adding an ARIA role that is a subclass of the `landmark` role such as [`role="banner"`](/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/banner_role), [`role="complementary"`](/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/complementary_role), or [`role="region"`](/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/region_role). Do not use `role="landmark"`.
 
+Every concrete landmark role has its corresponding HTML semantic element:
+
+| ARIA Role                                                                                | HTML Element               |
+| ---------------------------------------------------------------------------------------- | -------------------------- |
+| [`banner`](/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/banner_role)               | {{HTMLElement('header')}}  |
+| [`complementary`](/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/complementary_role) | {{HTMLElement('aside')}}   |
+| [`contentinfo`](/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/contentinfo_role)     | {{HTMLElement('footer')}}  |
+| [`form`](/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/form_role)                   | {{HTMLElement('form')}}    |
+| [`main`](/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/main_role)                   | {{HTMLElement('main')}}    |
+| [`navigation`](/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/navigation_role)       | {{HTMLElement('nav')}}     |
+| [`region`](/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/region_role)               | {{HTMLElement('section')}} |
+| [`search`](/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/search_role)               | {{HTMLElement('search')}}  |
+
 A visible label should be provided, referenced with [`aria-labelledby`](/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-labelledby). If necessary, brief, descriptive, label can be provided with [`aria-label`](/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-label).
 
 For screen reader users, adding landmark roles effectively creates 'skip links' for screen reader users, but don't replace in page navigation as the landmark roles are not otherwise surfaced.
 
 ## Best practices
 
-Do not use `role="landmark"`. Do use HTML and subclass landmark roles.
-
-Landmarks ensure content is in navigable regions. Use {{HTMLElement('main')}} for [`role="main"`](/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/main_role), {{HTMLElement('header')}} for [`role="banner"`](/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/banner_role), {{HTMLElement('nav')}} for [`role="navigation"`](/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/navigation_role), and {{HTMLElement('footer')}} for [`role="contentinfo"`](/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/contentinfo_role). It is also good practice to include the role redundantly with the associated semantic element. It is not as good practice to use non-semantic elements, such as {{HTMLElement('div')}}, adding semantics with landmark roles. But do include one or the other or both. Otherwise, your content is no longer as navigable for screen reader users.
+Do not use `role="landmark"`; rather, use subclass landmark roles as appropriate, or semantic HTML if possible. Although no longer necessary, it is considered good practice to redundantly include the subclass landmark roles with the associated semantic element for legacy browsers. This is preferable to using landmark roles on non-semantic elements, such as {{HTMLElement('div')}}, but do use at least one of `role` or semantic elements for creating landmarks. Otherwise, your content will be less navigable for screen reader users.
 
 ## Specifications
 

files/en-us/web/accessibility/aria/reference/roles/main_role/index.md

@@ -79,7 +79,7 @@ It is also helpful to include an accessible name to help orient assistive techno
 
 ### Prefer HTML
 
-Using the {{HTMLElement('main')}} element will automatically communicate a section has a role of `main`. If at all possible, prefer using it instead.
+Using the {{HTMLElement('main')}} element will automatically communicate that the element has a role of `main`. If possible, prefer using the semantic `<main>` element instead of the `main` role.
 
 ### Skip navigation
 

files/en-us/web/accessibility/aria/reference/roles/navigation_role/index.md

@@ -64,7 +64,7 @@ None.
 
 ### Prefer HTML
 
-Using the {{HTMLElement('nav')}} element will automatically communicate a section has a role of `navigation`. If at all possible, prefer using it instead.
+Using the {{HTMLElement('nav')}} element will automatically communicate that the element has a role of `navigation`. If possible, prefer using the semantic `<nav>` element instead of the `navigation` role.
 
 ### Labeling landmarks
 

files/en-us/web/accessibility/aria/reference/roles/region_role/index.md

@@ -54,7 +54,7 @@ Only use the `region` role if no other relevant [content sectioning](/en-US/docs
 
 ### Prefer HTML
 
-Using the {{HTMLElement('section')}} element will automatically communicate that a section has a role of `region` if it is given an accessible name. If at all possible, prefer using {{HTMLElement('section')}} instead.
+Using the {{HTMLElement('section')}} element will automatically communicate that the element has a role of `region`. If possible, prefer using the semantic `<section>` element instead of the `region` role.
 
 ### Labeling landmarks
 

files/en-us/web/accessibility/aria/reference/roles/search_role/index.md

@@ -41,7 +41,9 @@ When a {{HTMLElement('form')}} is a search form, use the `search` role instead o
 
 ### Prefer HTML
 
-Using the {{HTMLElement('form')}} element in conjunction with a declaration of `role="search"` will provide the largest amount of support.
+Using the {{HTMLElement('search')}} element will automatically communicate that the element has a role of `search`. If possible, prefer using the semantic `<search>` element instead of the `search` role.
+
+If your `<input>` of type `search` is already contained within a {{HTMLElement("form")}}, then wrapping the form in another `<search>` element may be unnecessary markup. In this case, using `role="search"` on the `<form>` itself is acceptable.
 
 ### Labeling landmarks
 

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

@@ -7,20 +7,27 @@ browser-compat: api.CSSStyleDeclaration
 
 {{APIRef("CSSOM")}}
 
-The **`CSSStyleDeclaration`** interface represents an object that is a CSS declaration block, and exposes style information and various style-related methods and properties.
+The **`CSSStyleDeclaration`** interface is the base class for objects that represent CSS declaration blocks with different supported sets of CSS style information:
 
-A `CSSStyleDeclaration` object can be exposed using three different APIs:
+- {{domxref("CSSStyleProperties")}} — CSS styles declared in stylesheet ({{domxref("CSSStyleRule.style")}}), inline styles for an element such as {{DOMxRef("HTMLElement/style","HTMLElement")}}, {{domxref("SVGElement/style","SVGElement")}}, and {{domxref("MathMLElement/style","MathMLElement")}}, or the computed style for an element returned by {{DOMxRef("Window.getComputedStyle()")}}.
+- {{domxref("CSSPageDescriptors")}} — Styles for CSS [at-rules](/en-US/docs/Web/CSS/CSS_syntax/At-rule).
 
-- Via {{DOMxRef("HTMLElement.style")}}, which deals with the inline styles of a single element (e.g., `<div style="…">`).
-- Via the {{DOMxRef("CSSStyleSheet")}} API. For example, `document.styleSheets[0].cssRules[0].style` returns a `CSSStyleDeclaration` object on the first CSS rule in the document's first stylesheet.
-- Via {{DOMxRef("Window.getComputedStyle()")}}, which exposes the `CSSStyleDeclaration` object as a **read-only** interface.
+The interface exposes style information and various style-related methods and properties.
+For example, it provides {{DOMxRef("CSSStyleDeclaration/getPropertyValue","getPropertyValue()" )}} for getting the value of a dash-named CSS property, such as `border-top`, which can't be directly accessed using dot notation because of the hyphens in its name.
+
+> [!NOTE]
+> Earlier versions of the specification used `CSSStyleDeclaration` to represent all CSS declaration blocks, and some browsers and browser versions may still do so (check the browser compatibility tables for the above APIs).
+> Generally the same website code will be functional in both old and new versions, but some properties returned in a `CSSStyleDeclaration` may not be relevant in a particular context.
 
 ## Attributes
 
 - {{DOMxRef("CSSStyleDeclaration.cssText")}}
-  - : Textual representation of the declaration block, if and only if it is exposed via {{DOMxRef("HTMLElement.style")}}. Setting this attribute changes the inline style. If you want a text representation of a computed declaration block, you can get it with `JSON.stringify()`.
+  - : Textual representation of the declaration block, if and only if it is exposed via {{DOMxRef("HTMLElement.style")}}.
+    Setting this attribute changes the inline style.
+    If you want a text representation of a computed declaration block, you can get it with `JSON.stringify()`.
 - {{DOMxRef("CSSStyleDeclaration.length")}} {{ReadOnlyInline}}
-  - : The number of properties. See the {{DOMxRef("CSSStyleDeclaration.item()", 'item()')}} method below.
+  - : The number of properties.
+    See the {{DOMxRef("CSSStyleDeclaration.item()", 'item()')}} method below.
 - {{DOMxRef("CSSStyleDeclaration.parentRule")}} {{ReadOnlyInline}}
   - : The containing {{DOMxRef("CSSRule")}}.