From 92464d051aa49207774d9033f5c29c6a94e6b71f Mon Sep 17 00:00:00 2001 From: Nick Schonning Date: Sun, 15 May 2022 14:41:22 -0400 Subject: [PATCH] fix: Markdownlint spacing (#16075) --- files/en-us/glossary/primitive/index.md | 5 +- .../glossary/serializable_object/index.md | 1 - .../api/action/isenabled/index.md | 2 +- .../api/action/openpopup/index.md | 2 +- .../scripting/contentscriptfilter/index.md | 2 +- .../api/scripting/executescript/index.md | 7 +- .../getregisteredcontentscripts/index.md | 5 +- .../webextensions/api/scripting/index.md | 3 +- .../api/scripting/injectiontarget/index.md | 10 +-- .../api/scripting/insertcss/index.md | 16 ++--- .../scripting/registercontentscripts/index.md | 9 ++- .../registeredcontentscript/index.md | 2 +- .../api/scripting/removecss/index.md | 10 +-- .../unregistercontentscripts/index.md | 4 +- .../scripting/updatecontentscripts/index.md | 2 +- .../webextensions/content_scripts/index.md | 4 +- .../chrome_settings_overrides/index.md | 4 +- .../content_security_policy/index.md | 1 - .../optional_permissions/index.md | 1 + .../web_accessible_resources/index.md | 2 - .../firefox/experimental_features/index.md | 2 - .../mozilla/firefox/releases/101/index.md | 2 - .../aria/roles/combobox_role/index.md | 17 +++-- .../aria/roles/menu_role/index.md | 55 ++++++++------- .../aria/roles/menubar_role/index.md | 32 ++++----- .../aria/roles/menuitem_role/index.md | 17 +++-- .../aria/roles/timer_role/index.md | 5 +- .../drawwindow/index.md | 1 + files/en-us/web/api/css/index.md | 1 - .../en-us/web/api/datatransfer/types/index.md | 2 +- .../web/api/document/execcommand/index.md | 4 +- .../api/htmlinputelement/showpicker/index.md | 8 +-- .../mediatrackconstraints/facingmode/index.md | 1 + .../api/readablestream/pipethrough/index.md | 1 - files/en-us/web/api/rtcstatstype/index.md | 2 + .../enqueue/index.md | 2 - files/en-us/web/api/url/port/index.md | 2 +- .../urlsearchparams/urlsearchparams/index.md | 6 +- files/en-us/web/css/@layer/index.md | 1 + files/en-us/web/css/cascade/index.md | 68 ++++++++----------- files/en-us/web/css/position/index.md | 2 +- files/en-us/web/css/zoom/index.md | 1 + .../global_objects/atomics/waitasync/index.md | 4 +- .../string/codepointat/index.md | 2 +- 44 files changed, 153 insertions(+), 177 deletions(-) diff --git a/files/en-us/glossary/primitive/index.md b/files/en-us/glossary/primitive/index.md index 3c91ebc46a30201..600523d1610a003 100644 --- a/files/en-us/glossary/primitive/index.md +++ b/files/en-us/glossary/primitive/index.md @@ -12,7 +12,6 @@ Most of the time, a primitive value is represented directly at the lowest level All primitives are **immutable**, i.e., they cannot be altered. It is important not to confuse a primitive itself with a variable assigned a primitive value. The variable may be reassigned a new value, but the existing value can not be changed in the ways that objects, arrays, and functions can be altered. - ## Example ### Autoboxing: primitive wrapper objects in JavaScript @@ -29,7 +28,7 @@ console.log(mystring.length) // 17 ``` -What actually happens is that a wrapper object associated with the primitive is automatically accessed instead. +What actually happens is that a wrapper object associated with the primitive is automatically accessed instead. Except for `null` and `undefined`, all primitive values have object equivalents that wrap around the primitive values: - {{jsxref("String")}} for the string primitive. @@ -40,7 +39,6 @@ Except for `null` and `undefined`, all primitive values have object equivalents The wrapper's [`valueOf()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/valueOf) method returns the primitive value. - ### Primitives are immutable This example will help you understand that primitive values are **immutable**. @@ -64,7 +62,6 @@ foo.push("plugh"); console.log(foo); // ["plugh"] ``` - ## See also - [JavaScript data types](/en-US/docs/Web/JavaScript/Data_structures) diff --git a/files/en-us/glossary/serializable_object/index.md b/files/en-us/glossary/serializable_object/index.md index 4641201c4eb6422..d8546f2a858f3e8 100644 --- a/files/en-us/glossary/serializable_object/index.md +++ b/files/en-us/glossary/serializable_object/index.md @@ -19,7 +19,6 @@ The new deserialized object will however be a {{glossary("deep copy")}}, so any In some cases when serializing and deserializing an object, it makes sense to transfer some resources rather than creating a copy. Objects that can be transferred are called {{Glossary("Transferable objects")}}. - ## Supported objects All primitive values are serializable. diff --git a/files/en-us/mozilla/add-ons/webextensions/api/action/isenabled/index.md b/files/en-us/mozilla/add-ons/webextensions/api/action/isenabled/index.md index 0dbadeadcfb6e2d..9b83ce1095b3e04 100644 --- a/files/en-us/mozilla/add-ons/webextensions/api/action/isenabled/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/api/action/isenabled/index.md @@ -77,4 +77,4 @@ async function enabledInActiveTab() { ## Browser compatibility -{{Compat}} \ No newline at end of file +{{Compat}} diff --git a/files/en-us/mozilla/add-ons/webextensions/api/action/openpopup/index.md b/files/en-us/mozilla/add-ons/webextensions/api/action/openpopup/index.md index 0d838ac724ab066..8940a1e08d5b518 100644 --- a/files/en-us/mozilla/add-ons/webextensions/api/action/openpopup/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/api/action/openpopup/index.md @@ -55,4 +55,4 @@ browser.menus.onClicked.addListener(() => { ## Browser compatibility -{{Compat}} \ No newline at end of file +{{Compat}} diff --git a/files/en-us/mozilla/add-ons/webextensions/api/scripting/contentscriptfilter/index.md b/files/en-us/mozilla/add-ons/webextensions/api/scripting/contentscriptfilter/index.md index 978575d1f7aa5e9..d50187372478c33 100644 --- a/files/en-us/mozilla/add-ons/webextensions/api/scripting/contentscriptfilter/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/api/scripting/contentscriptfilter/index.md @@ -31,4 +31,4 @@ Values of this type are objects. They contain these properties: > **Note:** This API is based on Chromium's [`chrome.scripting`](https://developer.chrome.com/extensions/scripting#type-ContentScriptFilter) API. > -> Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License. \ No newline at end of file +> Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License. diff --git a/files/en-us/mozilla/add-ons/webextensions/api/scripting/executescript/index.md b/files/en-us/mozilla/add-ons/webextensions/api/scripting/executescript/index.md index 8a93dfc7d68b28c..86eafd423a6b940 100644 --- a/files/en-us/mozilla/add-ons/webextensions/api/scripting/executescript/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/api/scripting/executescript/index.md @@ -21,7 +21,7 @@ Injects a script into a target context. The script is run at `document_idle` by To use this API you must have the `"scripting"` [permission](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions) and permission for the target'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). In Firefox and Safari, partial lack of host permissions can result in a successful execution (with the partial results in the resolved promise). In Chrome, any missing permission prevents any execution from happening, see ([crbug 1325114](https://crbug.com/1325114))). - + The scripts you inject are called [content scripts](/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts). This is an asynchronous function that returns a [`Promise`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise). @@ -49,7 +49,7 @@ let results = await browser.scripting.executeScript( - `injectImmediately`{{optional_inline}} - : `boolean`. Whether the injection into the target is triggered as soon as possible, but not necessarily prior to page load. - `target` - - : {{WebExtAPIRef("scripting.InjectionTarget")}}. Details specifying the target to inject the script into. + - : {{WebExtAPIRef("scripting.InjectionTarget")}}. Details specifying the target to inject the script into. ### Return value @@ -117,11 +117,10 @@ browser.action.onClicked.addListener(async tab => { }); ``` - {{WebExtExamples}} ## Browser compatibility {{Compat}} -> **Note:** This API is based on Chromium's [`chrome.scripting`](https://developer.chrome.com/extensions/scripting#method-executeScript) API. \ No newline at end of file +> **Note:** This API is based on Chromium's [`chrome.scripting`](https://developer.chrome.com/extensions/scripting#method-executeScript) API. diff --git a/files/en-us/mozilla/add-ons/webextensions/api/scripting/getregisteredcontentscripts/index.md b/files/en-us/mozilla/add-ons/webextensions/api/scripting/getregisteredcontentscripts/index.md index 02888350fe878e0..d9fc9e385b11e7b 100644 --- a/files/en-us/mozilla/add-ons/webextensions/api/scripting/getregisteredcontentscripts/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/api/scripting/getregisteredcontentscripts/index.md @@ -19,7 +19,7 @@ Returns all the content scripts registered with {{WebExtAPIRef("scripting.regist > **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). ## Syntax @@ -32,7 +32,6 @@ let scripts = await browser.scripting.getRegisteredContentScripts( ### Parameters - - `filter` {{optional_inline}} - : {{WebExtAPIRef("scripting.ContentScriptFilter")}}. A filter for the registered script details to return. @@ -78,4 +77,4 @@ console.log(scripts.map(script => script.id)); // ["script-2"] > **Note:** This API is based on Chromium's [`chrome.scripting`](https://developer.chrome.com/extensions/scripting/#method-getRegisteredContentScripts) API. > -> Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License. \ No newline at end of file +> Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License. diff --git a/files/en-us/mozilla/add-ons/webextensions/api/scripting/index.md b/files/en-us/mozilla/add-ons/webextensions/api/scripting/index.md index 9b4a16c5d0a230e..9385b78f1eaee03 100644 --- a/files/en-us/mozilla/add-ons/webextensions/api/scripting/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/api/scripting/index.md @@ -14,6 +14,7 @@ browser-compat: webextensions.api.scripting {{AddonSidebar}} Inserts JavaScript and CSS into websites. This API offers two approaches to inserting content: + - {{WebExtAPIRef("scripting.executeScript()")}}, {{WebExtAPIRef("scripting.insertCSS()")}}, and {{WebExtAPIRef("scripting.removeCSS()")}} that provide for one-off injections. - {{WebExtAPIRef("scripting.registerContentScripts()")}} that registers content scripts dynamically, which can then be retrieved with {{WebExtAPIRef("scripting.getRegisteredContentScripts()")}} and unregistered with {{WebExtAPIRef("scripting.unregisterContentScripts()")}}). @@ -31,7 +32,7 @@ Alternatively, you can get permission temporarily in the active tab and only in - : Details of an injection target. - {{WebExtAPIRef("scripting.RegisteredContentScript")}} - : Details of a content script to be registered or that is registered. - + ## Functions - {{WebExtAPIRef("scripting.executeScript()")}} diff --git a/files/en-us/mozilla/add-ons/webextensions/api/scripting/injectiontarget/index.md b/files/en-us/mozilla/add-ons/webextensions/api/scripting/injectiontarget/index.md index 2394d3dda88103f..bc8b1297d5c24a9 100644 --- a/files/en-us/mozilla/add-ons/webextensions/api/scripting/injectiontarget/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/api/scripting/injectiontarget/index.md @@ -20,12 +20,12 @@ This object contains details specifying the injection target for CSS and JavaScr Values of this type are objects. They contain these properties: -- `allFrames`{{optional_inline}} +- `allFrames`{{optional_inline}} - : `boolean`. Whether the script or CSS is injected into all frames within the tab. Defaults to `false`. Cannot be `true` if `frameIds` is specified. -- `frameIds`{{optional_inline}} - - : `array` of `string`. Array of the IDs of the frames to inject into. +- `frameIds`{{optional_inline}} + - : `array` of `string`. Array of the IDs of the frames to inject into. - `tabId` - - : `number`. The ID of the tab to inject into. + - : `number`. The ID of the tab to inject into. ## Browser compatibility @@ -35,4 +35,4 @@ Values of this type are objects. They contain these properties: > **Note:** This API is based on Chromium's [`chrome.scripting`](https://developer.chrome.com/extensions/scripting#type-InjectionTarget) API. > -> Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License. \ No newline at end of file +> Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License. diff --git a/files/en-us/mozilla/add-ons/webextensions/api/scripting/insertcss/index.md b/files/en-us/mozilla/add-ons/webextensions/api/scripting/insertcss/index.md index dc376a66f3cf8a7..53837489463b76a 100644 --- a/files/en-us/mozilla/add-ons/webextensions/api/scripting/insertcss/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/api/scripting/insertcss/index.md @@ -42,14 +42,14 @@ await browser.scripting.insertCSS( - : An object describing the CSS to insert and where to insert it. It contains the following properties: - - `css`{{optional_inline}} - - : `string`. A string containing the CSS to inject. Either `css` or `files` must be specified. + - `css`{{optional_inline}} + - : `string`. A string containing the CSS to inject. Either `css` or `files` must be specified. - `files`{{optional_inline}} - - : `array` of `string`. The path of a CSS files to inject, relative to the extension's root directory. Either `files` or `css` must be specified. - - `origin`{{optional_inline}} - - : `string`. The style origin for the injection, either `USER` or `AUTHOR`. Defaults to `AUTHOR`. - - `target` - - : {{WebExtAPIRef("scripting.InjectionTarget")}}. Details specifying the target to inject the CSS into. + - : `array` of `string`. The path of a CSS files to inject, relative to the extension's root directory. Either `files` or `css` must be specified. + - `origin`{{optional_inline}} + - : `string`. The style origin for the injection, either `USER` or `AUTHOR`. Defaults to `AUTHOR`. + - `target` + - : {{WebExtAPIRef("scripting.InjectionTarget")}}. Details specifying the target to inject the CSS into. ### Return value @@ -99,4 +99,4 @@ browser.action.onClicked.addListener(async tab => { > **Note:** This API is based on Chromium's [`chrome.scripting`](https://developer.chrome.com/docs/extensions/reference/scripting/#method-insertCSS) API. > -> Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License. \ No newline at end of file +> Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License. diff --git a/files/en-us/mozilla/add-ons/webextensions/api/scripting/registercontentscripts/index.md b/files/en-us/mozilla/add-ons/webextensions/api/scripting/registercontentscripts/index.md index 12740b844df7e45..8b25e84ede262aa 100644 --- a/files/en-us/mozilla/add-ons/webextensions/api/scripting/registercontentscripts/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/api/scripting/registercontentscripts/index.md @@ -14,12 +14,12 @@ browser-compat: webextensions.api.scripting.registerContentScripts --- {{AddonSidebar()}} -Registers one or more content scripts. +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). ## Syntax @@ -33,13 +33,12 @@ await browser.scripting.registerContentScripts( ### Parameters - `scripts` - - : `array` of {{WebExtAPIRef("scripting.RegisteredContentScript")}}. A list of scripts to register. + - : `array` of {{WebExtAPIRef("scripting.RegisteredContentScript")}}. A list of scripts to register. ### Return value A [`Promise`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) that fulfills with an array of {{WebExtAPIRef("scripting.RegisteredContentScript")}}. If there are errors during script parsing and file validation, or if the IDs specified do not exist, no scripts are registered and the promise is rejected. - ## Examples This example registers a content script that injects the file `"script.js"`: @@ -66,4 +65,4 @@ try { > **Note:** This API is based on Chromium's [`chrome.scripting`](https://developer.chrome.com/extensions/scripting#method-registerContentScripts) API. > -> Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License. \ No newline at end of file +> Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License. diff --git a/files/en-us/mozilla/add-ons/webextensions/api/scripting/registeredcontentscript/index.md b/files/en-us/mozilla/add-ons/webextensions/api/scripting/registeredcontentscript/index.md index ecb425fe0c3a612..cccbaa0e636e00b 100644 --- a/files/en-us/mozilla/add-ons/webextensions/api/scripting/registeredcontentscript/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/api/scripting/registeredcontentscript/index.md @@ -45,4 +45,4 @@ Values of this type are objects. They contain these properties: > **Note:** This API is based on Chromium's [`chrome.scripting`](https://developer.chrome.com/extensions/scripting#type-RegisteredContentScript) API. > -> Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License. \ No newline at end of file +> Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License. diff --git a/files/en-us/mozilla/add-ons/webextensions/api/scripting/removecss/index.md b/files/en-us/mozilla/add-ons/webextensions/api/scripting/removecss/index.md index ef415cf3fa46266..acdb3057113cce6 100644 --- a/files/en-us/mozilla/add-ons/webextensions/api/scripting/removecss/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/api/scripting/removecss/index.md @@ -36,14 +36,14 @@ await browser.scripting.removeCSS( - : An object describing the CSS to remove and where to remove it from. It contains the following properties: - - `css`{{optional_inline}} + - `css`{{optional_inline}} - : `string`. A string containing the CSS to inject. Either `css` or `files` must be specified and must match the stylesheet inserted through {{WebExtAPIRef("scripting.insertCSS()")}}. - `files`{{optional_inline}} - : `array` of `string`. The path of a CSS files to inject, relative to the extension's root directory. Either `files` or `css` must be specified and must match the stylesheet inserted through {{WebExtAPIRef("scripting.insertCSS()")}}. - - `origin`{{optional_inline}} + - `origin`{{optional_inline}} - : `string`. The style origin for the injection, either `USER` or `AUTHOR`. Defaults to `AUTHOR`. Must match the origin of the stylesheet inserted through {{WebExtAPIRef("scripting.insertCSS()")}}. - - `target` - - : {{WebExtAPIRef("scripting.InjectionTarget")}}. Details specifying the target to remove the CSS from. + - `target` + - : {{WebExtAPIRef("scripting.InjectionTarget")}}. Details specifying the target to remove the CSS from. ### Return value @@ -86,4 +86,4 @@ browser.action.onClicked.addListener(async tab => { > **Note:** This API is based on Chromium's [`chrome.scripting`](https://developer.chrome.com/docs/extensions/reference/scripting/#method-removeCSS) API. > -> Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License. \ No newline at end of file +> Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License. diff --git a/files/en-us/mozilla/add-ons/webextensions/api/scripting/unregistercontentscripts/index.md b/files/en-us/mozilla/add-ons/webextensions/api/scripting/unregistercontentscripts/index.md index 62db6c3ff33fd4f..b9d8c382b857da7 100644 --- a/files/en-us/mozilla/add-ons/webextensions/api/scripting/unregistercontentscripts/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/api/scripting/unregistercontentscripts/index.md @@ -32,7 +32,7 @@ await browser.scripting.unregisterContentScripts( ### Parameters -- `scripts`{{optional_inline}} +- `scripts`{{optional_inline}} - : {{WebExtAPIRef("scripting.ContentScriptFilter")}}. A filter to identify the dynamic content scripts to unregistered. If not specified, all dynamic content scripts are unregistered. ### Return value @@ -61,4 +61,4 @@ try { > **Note:** This API is based on Chromium's [`chrome.scripting`](https://developer.chrome.com/extensions/scripting#method-unregisterContentScripts) API. > -> Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License. \ No newline at end of file +> Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License. diff --git a/files/en-us/mozilla/add-ons/webextensions/api/scripting/updatecontentscripts/index.md b/files/en-us/mozilla/add-ons/webextensions/api/scripting/updatecontentscripts/index.md index ebc06d433506f06..bd16c903f51a87e 100644 --- a/files/en-us/mozilla/add-ons/webextensions/api/scripting/updatecontentscripts/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/api/scripting/updatecontentscripts/index.md @@ -74,4 +74,4 @@ try { > **Note:** This API is based on Chromium's [`chrome.scripting`](https://developer.chrome.com/extensions/scripting/#method-updateContentScripts) API. > -> Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License. \ No newline at end of file +> Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License. diff --git a/files/en-us/mozilla/add-ons/webextensions/content_scripts/index.md b/files/en-us/mozilla/add-ons/webextensions/content_scripts/index.md index 033627291e4136a..63e55a108fe9818 100644 --- a/files/en-us/mozilla/add-ons/webextensions/content_scripts/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/content_scripts/index.md @@ -44,7 +44,7 @@ You can load a content script into a web page in one of three ways: 2. - At runtime, into pages that match URL patterns. - : Using the {{WebExtAPIRef("contentScripts")}} API, you can ask the browser to load a content script whenever the browser loads a page whose URL [matches a given pattern](/en-US/docs/Mozilla/Add-ons/WebExtensions/Match_patterns). (This is similar to method 1, _except_ that you can add and remove content scripts at runtime.) 3. - At runtime, into specific tabs. - - : In Manifest V2, using [`tabs.executeScript()`](/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/executeScript), or Manifest V3, using {{WebExtAPIRef("scripting.executeScript()")}}, you can load a content script into a specific tab whenever you want. (For example, in response to the user clicking on a [browser action](/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_action).) + - : In Manifest V2, using [`tabs.executeScript()`](/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/executeScript), or Manifest V3, using {{WebExtAPIRef("scripting.executeScript()")}}, you can load a content script into a specific tab whenever you want. (For example, in response to the user clicking on a [browser action](/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_action).) There is only one global scope _per frame, per extension_. This means that variables from one content script can directly be accessed by another content script, regardless of how the content script was loaded. @@ -185,7 +185,7 @@ Content scripts get the same cross-domain privileges as the rest of the extensio This is accomplished by exposing more privileged XHR and fetch instances in the content script, which has the side-effect of not setting the [`Origin`](/en-US/docs/Web/HTTP/Headers/Origin) and [`Referer`](/en-US/docs/Web/HTTP/Headers/Referer) headers like a request from the page itself would; this is often preferable to prevent the request from revealing its cross-origin nature. -> **Note:** In Firefox in Manifest V2, extensions that need to perform requests that behave as if they were sent by the content itself can use `content.XMLHttpRequest` and `content.fetch()` instead. +> **Note:** In Firefox in Manifest V2, extensions that need to perform requests that behave as if they were sent by the content itself can use `content.XMLHttpRequest` and `content.fetch()` instead. > > For cross-browser extensions, the presence of these methods must be feature-detected. > diff --git a/files/en-us/mozilla/add-ons/webextensions/manifest.json/chrome_settings_overrides/index.md b/files/en-us/mozilla/add-ons/webextensions/manifest.json/chrome_settings_overrides/index.md index b0f757dc0181eb7..f851fc56f0ee1e8 100644 --- a/files/en-us/mozilla/add-ons/webextensions/manifest.json/chrome_settings_overrides/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/manifest.json/chrome_settings_overrides/index.md @@ -145,8 +145,8 @@ The `chrome_settings_overrides` key is an object that may have the following pro
favicon_url {{optional_inline}}
String: URL pointing to an icon for the search engine. In Manifest V2, - this must be an absolute HTTP or HTTPS URL. In Manifest V3, this must - reference an icon provided in the extension as a path relative to the + this must be an absolute HTTP or HTTPS URL. In Manifest V3, this must + reference an icon provided in the extension as a path relative to the extension's root.
image_url {{optional_inline}}
diff --git a/files/en-us/mozilla/add-ons/webextensions/manifest.json/content_security_policy/index.md b/files/en-us/mozilla/add-ons/webextensions/manifest.json/content_security_policy/index.md index 15689d1c36b9b4b..ffe75f3ef7ed287 100644 --- a/files/en-us/mozilla/add-ons/webextensions/manifest.json/content_security_policy/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/manifest.json/content_security_policy/index.md @@ -106,7 +106,6 @@ In Manifest V3, the `content_security_policy` key is an object that may have any Require that all types of content should be packaged with the extension: - **Manifest V2** ```json diff --git a/files/en-us/mozilla/add-ons/webextensions/manifest.json/optional_permissions/index.md b/files/en-us/mozilla/add-ons/webextensions/manifest.json/optional_permissions/index.md index 0ae0c52b836891c..b16ed1044b4057b 100644 --- a/files/en-us/mozilla/add-ons/webextensions/manifest.json/optional_permissions/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/manifest.json/optional_permissions/index.md @@ -52,6 +52,7 @@ The key can contain two kinds of permissions: host permissions and API permissio These are the same as the host permissions you can specify in the [`permissions`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions#host_permissions) key. > **Note:** When using Manifest V3 or higher: +> > - in Chrome, host permissions must be specified in the [`host_permission`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/host_permissions) manifest key. > - in Firefox, during the Manifest V3 developer preview, hosts can be in either `host_permissions` or `optional_permissions`. Subject to completion of [bug 1766026](https://bugzilla.mozilla.org/show_bug.cgi?id=1766026), hosts will be specified in either `host_permissions` or `optional_host_permissions`. diff --git a/files/en-us/mozilla/add-ons/webextensions/manifest.json/web_accessible_resources/index.md b/files/en-us/mozilla/add-ons/webextensions/manifest.json/web_accessible_resources/index.md index 2fe448172970d1b..d67827a5ad7da73 100644 --- a/files/en-us/mozilla/add-ons/webextensions/manifest.json/web_accessible_resources/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/manifest.json/web_accessible_resources/index.md @@ -123,8 +123,6 @@ Each object must include a `"resources"` property and either a `"matches"` or `" - - ### Using web_accessible_resources Suppose your extension includes an image file at `images/my-image.png`, like this: diff --git a/files/en-us/mozilla/firefox/experimental_features/index.md b/files/en-us/mozilla/firefox/experimental_features/index.md index 03c84405095f3fa..45331de1f299b2a 100644 --- a/files/en-us/mozilla/firefox/experimental_features/index.md +++ b/files/en-us/mozilla/firefox/experimental_features/index.md @@ -942,7 +942,6 @@ With this feature enabled, Firefox supports [JPEG XL](https://jpeg.org/jpegxl/) - #### Streams API: TransformStreams Support for [transform streams](/en-US/docs/Web/API/Streams_API#transform_streams), including the classes [`TransformStream`](/en-US/docs/Web/API/TransformStream) and [`TransformStreamDefaultController`](/en-US/docs/Web/API/TransformStreamDefaultController), and the method [`ReadableStream.pipeThrough()`](/en-US/docs/Web/API/ReadableStream/pipeThrough). @@ -983,7 +982,6 @@ Support for [transform streams](/en-US/docs/Web/API/Streams_API#transform_stream - ### Service Workers #### Preloading of service worker resources on navigation diff --git a/files/en-us/mozilla/firefox/releases/101/index.md b/files/en-us/mozilla/firefox/releases/101/index.md index 6e2c0b13630c7ba..929a3944ab0a852 100644 --- a/files/en-us/mozilla/firefox/releases/101/index.md +++ b/files/en-us/mozilla/firefox/releases/101/index.md @@ -47,12 +47,10 @@ This article provides information about the changes in Firefox 101 that will aff - [`DOMException`](/en-US/docs/Web/API/DOMException) is now a {{Glossary("serializable object")}}, so it can be cloned with {{domxref("structuredClone()")}} or copied between [workers](/en-US/docs/Web/API/Worker) using {{domxref("Worker.postMessage()", "postMessage()")}} ({{bug(1561357)}}). - - [`RTCRtpEncodingParameters.maxFramerate`](/en-US/docs/Web/API/RTCRtpEncodingParameters/maxFramerate) is now supported for setting the maximum framerate that can be used to send an encoding (in {{domxref("RTCPeerConnection.addTransceiver()")}} and {{domxref("RTCRtpSender.setParameters()")}}). Note that zero if a valid frame rate value, but is interpreted by Firefox as "no frame rate limit". For more information see {{bug(1611957)}}. - #### Media, WebRTC, and Web Audio #### Removals diff --git a/files/en-us/web/accessibility/aria/roles/combobox_role/index.md b/files/en-us/web/accessibility/aria/roles/combobox_role/index.md index ed88ae7c15e44b6..11404a5953d4fdb 100644 --- a/files/en-us/web/accessibility/aria/roles/combobox_role/index.md +++ b/files/en-us/web/accessibility/aria/roles/combobox_role/index.md @@ -18,11 +18,11 @@ The `combobox` role identifies an element as an `input` that controls another el ## Description -A `combobox` is a composite widget that combines a named input field with a popup providing possible values for that input field. The purpose of a this widget is to improve user experience by helping the user select a value without having to type in the complete value and, optionally depending whether supported values are limited, preventing the user from entering invalid or otherwise unsupported values. +A `combobox` is a composite widget that combines a named input field with a popup providing possible values for that input field. The purpose of a this widget is to improve user experience by helping the user select a value without having to type in the complete value and, optionally depending whether supported values are limited, preventing the user from entering invalid or otherwise unsupported values. -The `combobox` role is set on input that controls another element, such as a listbox or grid, that can dynamically pop up to help the user set the value of the input. +The `combobox` role is set on input that controls another element, such as a listbox or grid, that can dynamically pop up to help the user set the value of the input. -The `combobox` input field can either be a single-line text field that supports editing and typing, similar to a HTML {{HTMLElement('input')}} with a {{HTMLElement('datalist')}}, or an element that only displays the current value of the combobox. +The `combobox` input field can either be a single-line text field that supports editing and typing, similar to a HTML {{HTMLElement('input')}} with a {{HTMLElement('datalist')}}, or an element that only displays the current value of the combobox. A WAI-ARIA combobox only has one attribute that is required that authors specify: [`aria-expanded`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded). However, it also has several other attributes which will be necessary to specify, depending on the combobox's implementation. These include [`aria-haspopup`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup), [`aria-controls`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls), [`aria-activedescendant`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-activedescendant), and [`aria-autocomplete`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-autocomplete). @@ -30,15 +30,15 @@ Typically, the initial state of a combobox is collapsed, with `aria-expanded="fa The combobox is in the expanded state when both the combobox element showing its current value and its associated popup element are visible. When expanded, `aria-expanded="true"` must be set. -The popup element associated with a `combobox` can be either a [`listbox`](/en-US/docs/Web/Accessibility/ARIA/Roles/listbox_role), [`tree`](/en-US/docs/Web/Accessibility/ARIA/Roles/tree_role), [`grid`](/en-US/docs/Web/Accessibility/ARIA/Roles/grid_role), or [`dialog`](/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role) element. +The popup element associated with a `combobox` can be either a [`listbox`](/en-US/docs/Web/Accessibility/ARIA/Roles/listbox_role), [`tree`](/en-US/docs/Web/Accessibility/ARIA/Roles/tree_role), [`grid`](/en-US/docs/Web/Accessibility/ARIA/Roles/grid_role), or [`dialog`](/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role) element. -Comboboxes have an implicit [`aria-haspopup`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup) value of `listbox`, so including this attribute is optional if the popup is a `listbox`. If the combobox popup element is a `tree`, `grid`, or `dialog` (anything other than a `listbox`), the `aria-haspopup` attribute is required. The value of `aria-haspopup` must be either the `tree`, `grid`, `dialog`, or `listbox` role. Note that for this property, `true` means `menu`, so make sure that the value corresponds to the role of the popup, not a Boolean value. +Comboboxes have an implicit [`aria-haspopup`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup) value of `listbox`, so including this attribute is optional if the popup is a `listbox`. If the combobox popup element is a `tree`, `grid`, or `dialog` (anything other than a `listbox`), the `aria-haspopup` attribute is required. The value of `aria-haspopup` must be either the `tree`, `grid`, `dialog`, or `listbox` role. Note that for this property, `true` means `menu`, so make sure that the value corresponds to the role of the popup, not a Boolean value. When a combobox's popup is displayed, ensure the [`aria-controls`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls) attribute on the combobox element is set to the {{HTMLattrXRef('id')}} of the popup `listbox`, `tree`, `grid`, or `dialog` element. This is how the relationship between the element with the `combobox` role and the popup it controls is indicated. (Note: In older ARIA specs, this was `aria-owns` rather than `aria-controls`, so you may see `aria-owns` in older combobox implementations. The `aria-owns` in the code should be updated to `aria-controls`!) -If the combobox UI includes a visible control, such as an icon, that allows the visibility of the popup to be controlled via pointer and touch events, that control should be a {{HTMLElement('button')}}, {{HTMLElement('input')}} of type `button`, or a [`button`](/en-US/docs/Web/Accessibility/ARIA/Roles/button_role) role element with a {{HTMLattrXRef('tabindex')}} of `-1`. Doing so will allow the button to be focusable but not included in keyboard tab sequence. It must not be a descendant of the element with role `combobox`. +If the combobox UI includes a visible control, such as an icon, that allows the visibility of the popup to be controlled via pointer and touch events, that control should be a {{HTMLElement('button')}}, {{HTMLElement('input')}} of type `button`, or a [`button`](/en-US/docs/Web/Accessibility/ARIA/Roles/button_role) role element with a {{HTMLattrXRef('tabindex')}} of `-1`. Doing so will allow the button to be focusable but not included in keyboard tab sequence. It must not be a descendant of the element with role `combobox`. -To be keyboard accessible, keyboard support for moving focus between the `combobox` input field element and elements contained in the popup `listbox`, `tree`, `grid`, or `dialog`, must be programmed in. One common convention is that Down Arrow moves focus from the input to the first focusable descendant of the popup element. +To be keyboard accessible, keyboard support for moving focus between the `combobox` input field element and elements contained in the popup `listbox`, `tree`, `grid`, or `dialog`, must be programmed in. One common convention is that Down Arrow moves focus from the input to the first focusable descendant of the popup element. The [`aria-activedescendant`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-activedescendant) property can be used to identify the currently active element of the combobox popup, for instance an `option` within a popup `listbox`, for implementations where DOM focus remains on the combobox. If DOM focus does not remain on the combobox when its popup is invoked, but rather DOM focus moves into the popup, such as a dialog, then `aria-activedescendant` may not be necessary. @@ -53,7 +53,7 @@ Every `combobox` must have an accessible name. If using an {{HTMLElement('input' - [`aria-expanded`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) - : Required. Identifies whether the combobox is open (`true`) or closed (`false`). - [`aria-haspopup`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-) - - : Implied. If omitted, defaults to `listbox`. Also supports `tree`, `grid`, or `dialog`. Identifies the combobox has having a popout, and indicates the type. + - : Implied. If omitted, defaults to `listbox`. Also supports `tree`, `grid`, or `dialog`. Identifies the combobox has having a popout, and indicates the type. ### Keyboard interactions @@ -72,7 +72,6 @@ Every `combobox` must have an accessible name. If using an {{HTMLElement('input' - Enter - : If the combobox is editable and an autocomplete suggestion is selected in the popup, accepts the suggestion either by placing the input cursor at the end of the accepted value in the combobox or by performing a default action on the value. For example, in a messaging application, the default action may be to add the accepted value to a list of message recipients and then clear the combobox so the user can add another recipient. - ## Examples ```html diff --git a/files/en-us/web/accessibility/aria/roles/menu_role/index.md b/files/en-us/web/accessibility/aria/roles/menu_role/index.md index 35b574b9598718e..03d45a875b6e458 100644 --- a/files/en-us/web/accessibility/aria/roles/menu_role/index.md +++ b/files/en-us/web/accessibility/aria/roles/menu_role/index.md @@ -18,43 +18,42 @@ The `menu` role is a type of composite widget that offers a list of choices to t ## Description -A `menu` generally represents a grouping of common actions or functions that the user can invoke. The `menu` role is appropriate when a list of menu items is presented in a manner similar to a menu on a desktop application. Submenus, also known as pop-up menus, also have the role `menu`. +A `menu` generally represents a grouping of common actions or functions that the user can invoke. The `menu` role is appropriate when a list of menu items is presented in a manner similar to a menu on a desktop application. Submenus, also known as pop-up menus, also have the role `menu`. While the term "menu" is generically used a term used to describe site navigation, the `menu` role is for a list of action or functions that require complex functionality, such as composite widget focus management and first-character navigation -A menu can be a permanently visible list of controls or a widget that can be made to open and close. A closed `menu` widget is usually opened, or made visible, by activating a menu button, choosing an item in a menu that opens a submenu, or by invoking a command, such as Shift + F10 in Windows which opens a context specific menu. +A menu can be a permanently visible list of controls or a widget that can be made to open and close. A closed `menu` widget is usually opened, or made visible, by activating a menu button, choosing an item in a menu that opens a submenu, or by invoking a command, such as Shift + F10 in Windows which opens a context specific menu. -When a user activates a choice in a menu that has been opened, the menu usually closes. If the menu choice action invokes a submenu, the menu will remain open and the submenu is displayed. +When a user activates a choice in a menu that has been opened, the menu usually closes. If the menu choice action invokes a submenu, the menu will remain open and the submenu is displayed. -When a menu opens, keyboard focus is placed on the first menu item. To be keyboard accessible, you need to [manage focus](https://usability.yale.edu/web-accessibility/articles/focus-keyboard-operability) for all descendants: all menu items within the `menu` are focusable. The menu button which opens the menu and the menu items, rather than the menu itself, are the focusable elements. +When a menu opens, keyboard focus is placed on the first menu item. To be keyboard accessible, you need to [manage focus](https://usability.yale.edu/web-accessibility/articles/focus-keyboard-operability) for all descendants: all menu items within the `menu` are focusable. The menu button which opens the menu and the menu items, rather than the menu itself, are the focusable elements. -Menu items include [`menuitem`](/en-US/docs/Web/Accessibility/ARIA/Roles/menuitem_role), [`menuitemcheckbox`](/en-US/docs/Web/Accessibility/ARIA/Roles/menuitemcheckbox_role), and [`menuitemradio`](/en-US/docs/Web/Accessibility/ARIA/Roles/menuitemradio_role). [Disabled](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-disabled) menu items are focusable but cannot be activated. +Menu items include [`menuitem`](/en-US/docs/Web/Accessibility/ARIA/Roles/menuitem_role), [`menuitemcheckbox`](/en-US/docs/Web/Accessibility/ARIA/Roles/menuitemcheckbox_role), and [`menuitemradio`](/en-US/docs/Web/Accessibility/ARIA/Roles/menuitemradio_role). [Disabled](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-disabled) menu items are focusable but cannot be activated. -Menu items can be grouped in elements with the [`group`](/en-US/docs/Web/Accessibility/ARIA/Roles/group_role) role, and separated by elements with role [`separator`](/en-US/docs/Web/Accessibility/ARIA/Roles/separator_role). Neither `group` nor `separator` receive focus or are interactive. +Menu items can be grouped in elements with the [`group`](/en-US/docs/Web/Accessibility/ARIA/Roles/group_role) role, and separated by elements with role [`separator`](/en-US/docs/Web/Accessibility/ARIA/Roles/separator_role). Neither `group` nor `separator` receive focus or are interactive. > **Note:** The `menu` role is similar to the HTML {{HTMLElement('menu')}} element. Using `` may seem redundant, but as most browsers expose the `` as a [`list`](../list_role/), when using the native ``, including the `menu` role and providing keyboard navigation are necessary.. -If a `menu` is opened as a result of a context action, Escape or Enter may return focus to the invoking context. If focus was on the menu button, Enter opens the menu, giving focus to the first menu item. If focus is on the menu itself, Escape closes the menu and returns focus to the menu button or parent menubar item (or the context action that opened the menu). +If a `menu` is opened as a result of a context action, Escape or Enter may return focus to the invoking context. If focus was on the menu button, Enter opens the menu, giving focus to the first menu item. If focus is on the menu itself, Escape closes the menu and returns focus to the menu button or parent menubar item (or the context action that opened the menu). Elements with the role `menu` have an implicit [`aria-orientation`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-orientation) value of `vertical`. Include `aria-orientation="horizontal"`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-orientation). -If the menu is visually persistent, consider the [`menubar`](/en-US/docs/Web/Accessibility/ARIA/Roles/menubar_role) role instead. +If the menu is visually persistent, consider the [`menubar`](/en-US/docs/Web/Accessibility/ARIA/Roles/menubar_role) role instead. ### Associated WAI-ARIA roles, states, and properties - [`menuitem`](/en-US/docs/Web/Accessibility/ARIA/Roles/menuitem_role), [`menuitemcheckbox`](/en-US/docs/Web/Accessibility/ARIA/Roles/menuitemcheckbox_role), and [`menuitemradio`](/en-US/docs/Web/Accessibility/ARIA/Roles/menuitemradio_role) roles - : Roles of items contained in a containing `menu` or `menubar`, known collectively as "menu items". These must be able to receive focus. - [`group`](/en-US/docs/Web/Accessibility/ARIA/Roles/group_role) role - - : Menu items can be nested in a [`group`](/en-US/docs/Web/Accessibility/ARIA/Roles/group_role) + - : Menu items can be nested in a [`group`](/en-US/docs/Web/Accessibility/ARIA/Roles/group_role) - [`separator`](/en-US/docs/Web/Accessibility/ARIA/Roles/separator_role) role - - : A divider that separates and distinguishes sections of content or groups of menu items within the menu + - : A divider that separates and distinguishes sections of content or groups of menu items within the menu - - {{HTMLAttrXref('tabindex')}} attribute - : The `menu` container has `tabindex` set to `-1` or `0` and each item in the menu has `tabindex` set to `-1`. -- [`aria-activedescendant`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-activedescendant) - - : Set to the ID of the focused item, if there is one. -- [`aria-orientation`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-orientation) +- [`aria-activedescendant`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-activedescendant) + - : Set to the ID of the focused item, if there is one. +- [`aria-orientation`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-orientation) - : indicates whether the menu orientation is horizontal or vertical; defaults to `vertical` if omitted. - [`aria-label`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) or [`aria-labelledby`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby) - : The `menu` is required to have an accessible name. Use `aria-labelledby` if a visible label is present, otherwise use `aria-label`. Either include the `aria-labelledby` set to a the `id` to the `menuitem` or `button` that controls its display or use `aria-label` to define the label. @@ -63,28 +62,28 @@ If the menu is visually persistent, consider the [`menubar`](/en-US/docs/Web/Acc ### Keyboard interactions -- Space / Enter +- Space / Enter - : If the item is a parent menu item, opens submenu and moves focus to first item in the submenu. Otherwise, activates the menu item, which loads new content and places focus on the heading that titles the content. -- Escape +- Escape - : When in a submenu, closes the submenu and moves focus to parent menu or menubar item. -- Right Arrow +- Right Arrow - : In a menubar, moves focus to the next item in the menubar. If focus is on the last item, moves focus to the first item. If in a submenu, if focus is on an item that does not have a submenu, closes the submenu and moves focus to next item in the menubar. Otherwise, opens submenu of newly focused menubar item, keeping focus on that parent menubar item. If not in a menubar or submenu and not on a menuitem with a submenu, if focus is not the last focusable element in the menu, optionally moves focus to the next focusable element. -- Left Arrow +- Left Arrow - : Moves focus to the previous item in the menubar. If focus is on the first item, moves focus to the last item. If in a submenu, closes submenu and moves focus to parent menu item. If not in a menubar or submenu, if focus is not the first focusable element in the menu, optionally moves focus to the last focusable element. -- Down Arrow +- Down Arrow - : Opens submenu and moves focus to first item in the submenu. -- Up Arrow +- Up Arrow - : Opens submenu and moves focus to last item in the submenu. -- Home +- Home - : Moves focus to first item in the menubar. -- End +- End - : Moves focus to last item in the menubar. -- Any character key +- Any character key - : Moves focus to next item in the menubar having a name that starts with the typed character. If none of the items have a name starting with the typed character, focus does not move. ## Examples -Below are two example menu implementations. +Below are two example menu implementations. ### Example 1: navigation menu @@ -128,7 +127,7 @@ Below are two example menu implementations. ``` -To progressively enhance this navigation widget that is by default accessible, the class to hide the `menu` and the inclusion of `tabindex="-1"` on the interactive menuitem content should be added with JavaScript on load. +To progressively enhance this navigation widget that is by default accessible, the class to hide the `menu` and the inclusion of `tabindex="-1"` on the interactive menuitem content should be added with JavaScript on load. When including a "menu" for site navigation, do not use the `menu` role. Rather, for the main site navigation use the native HTML {{HTMLElement('nav')}} element or simply a list of links. The `menu` role should be reserved for composite widgets requiring focus management. See [ARIA practices for disclosure navigation](https://www.w3.org/TR/wai-aria-practices-1.2/examples/disclosure/disclosure-navigation.html) for an explanation and additional examples. @@ -154,11 +153,11 @@ The button that opens the menu has [`aria-haspopup="menu"`](/en-US/docs/Web/Acce For a menu to open, the user generally interacts with a menu button as the opener. The menu button must be focusable and respond to both click and keyboard events. When focused, selecting Enter, Space, Down Arrow, or the Up Arrow should open the menu and place focus on a menu item. -The opening and closing of the menu toggles the [`aria-expanded="true"`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) attribute on the button. It is added when the menu is open. Removed or set to `false` when the menu is closed. The `true` value indicates that the menu is displayed and that activating the menu button closes the menu. +The opening and closing of the menu toggles the [`aria-expanded="true"`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) attribute on the button. It is added when the menu is open. Removed or set to `false` when the menu is closed. The `true` value indicates that the menu is displayed and that activating the menu button closes the menu. -When the menu is open, the button itself generally does not received focus as users arrow thru the menuitems. Rather, Escape and optionally Shift + Tab closes the menu and returns focus to the menu button. +When the menu is open, the button itself generally does not received focus as users arrow thru the menuitems. Rather, Escape and optionally Shift + Tab closes the menu and returns focus to the menu button. -The `menu` role was set on the {{HTMLElement('ul')}}, identifying the `
    ` element as a menu. +The `menu` role was set on the {{HTMLElement('ul')}}, identifying the `
      ` element as a menu. The showing and hiding of the menu can be done with CSS. For example, in these code examples we can use the attribute and adjacent sibling selectors to toggle the visibility of the menu: diff --git a/files/en-us/web/accessibility/aria/roles/menubar_role/index.md b/files/en-us/web/accessibility/aria/roles/menubar_role/index.md index 8fe81096212f603..28d933f703da6c4 100644 --- a/files/en-us/web/accessibility/aria/roles/menubar_role/index.md +++ b/files/en-us/web/accessibility/aria/roles/menubar_role/index.md @@ -15,23 +15,22 @@ spec-urls: - https://w3c.github.io/aria-practices/#menu --- -A `menubar` is a presentation of `menu` that usually remains visible and is usually presented horizontally. +A `menubar` is a presentation of `menu` that usually remains visible and is usually presented horizontally. ## Description -A menu is a widget that offers a list of choices to the user, such as a set of actions or functions. The menubar type of menu is usually presented as a persistently visible horizontal bar of commands. Menubars behave like native operating system menubars, such as the menubars containing pull down menus, commonly found at the top of many desktop application windows. +A menu is a widget that offers a list of choices to the user, such as a set of actions or functions. The menubar type of menu is usually presented as a persistently visible horizontal bar of commands. Menubars behave like native operating system menubars, such as the menubars containing pull down menus, commonly found at the top of many desktop application windows. -The `menubar` role is used to create a menu bar similar to those found near the top of the window in many desktop applications, visually persistent, typically horizontal, bar of menu items offering the user quick access to a consistent set of commands. +The `menubar` role is used to create a menu bar similar to those found near the top of the window in many desktop applications, visually persistent, typically horizontal, bar of menu items offering the user quick access to a consistent set of commands. A `menubar` contains three types of menu items, including [`menuitem`](/en-US/docs/Web/Accessibility/ARIA/Roles/menuitem_role), [`menuitemradio`](/en-US/docs/Web/Accessibility/ARIA/Roles/menuitemradio_role) and [`menuitemcheckbox`](/en-US/docs/Web/Accessibility/ARIA/Roles/menuitemcheckbox_role). These menu items may optionally be nested in one or more [`group`](/en-US/docs/Web/Accessibility/ARIA/Roles/group_role) containers. Groups or items may optionally by separated with [`separator`](/en-US/docs/Web/Accessibility/ARIA/Roles/separator_role) elements. While every menu item must be able to receive focus, even if disabled, the `group` and `separator` elements are not focusable. -An example of a native menubar is the bar which may be present at the top of the screen if you are reading this in a desktop browser. An example of a web-based menubar is the horizontal menu bar that reads "File Edit View Insert Format", etc., which is usually visible under the document name in a Google doc. +An example of a native menubar is the bar which may be present at the top of the screen if you are reading this in a desktop browser. An example of a web-based menubar is the horizontal menu bar that reads "File Edit View Insert Format", etc., which is usually visible under the document name in a Google doc. -Menubar interactions should be similar to the typical menu bar interaction in a desktop graphical user interface. In Google Docs, each of those menu items is a `menuitem` with a popup submenu, so each has an `aria-haspopup` attribute set to `true`. The `menubar` element does not. +Menubar interactions should be similar to the typical menu bar interaction in a desktop graphical user interface. In Google Docs, each of those menu items is a `menuitem` with a popup submenu, so each has an `aria-haspopup` attribute set to `true`. The `menubar` element does not. The menubar and all the menu items are focusable and have a {{htmlattrdef('tabindex')}} attribute set. When the menubar receives focus thru tabbing, keyboard focus is placed on the first menuitem. Each item in the menu has `tabindex` set to `-1`, except the first item has which has it's `tabindex` set to `0`. - If a menubar receives focus as a result of a context action, such as a shortcut key, Escape or Enter may return focus to the invoking context. That said, make sure not to create shortcut keys that interfere with user agent, operating system, or assistive technology shortcuts - any UA, OS, or AT. Every menu item, no matter how deeply nested, is able to receive focus, even if disabled. @@ -57,13 +56,13 @@ A `menuitem` element in the `menubar` can contain a child submenu of menu items. When focus is in a `menubar` it is always on a menu item within the menu bar. When focus is on a top level `menuitem` in a menu bar, the following keyboard interactions must be supported: -- Down Arrow +- Down Arrow - : If the currently focused `menuitem` has a submenu, opens the submenu and places focus on the first item in the submenu. -- Up Arrow +- Up Arrow - : (Optional) If the currently focused `menuitem` has a submenu, opens the submenu and places focus on the *last* item in the submenu. -- Right Arrow +- Right Arrow - : Moves focus to the next item, optionally wrapping from the last to the first. -- Left Arrow +- Left Arrow - : Moves focus to the previous item, optionally wrapping from the first to the last. - Home - : If arrow key wrapping is not supported, moves focus to the first item in the `menubar`. @@ -77,19 +76,20 @@ When focus is in a `menubar` it is always on a menu item within the menu bar. Wh See [`menuitem` keyboard interactions](/en-US/docs/Web/Accessibility/ARIA/Roles/menuitem_role#keyboard_interactions), [`menuitemradio` keyboard interactions](/en-US/docs/Web/Accessibility/ARIA/Roles/menuitemradio_role#keyboard_interactions), and [`menuitemcheckbox` keyboard interactions](/en-US/docs/Web/Accessibility/ARIA/Roles/menuitemcheckbox_role#keyboard_interactions) for more information on keyboard interactions when focus is on a menuitem in a menubar (which it always is). Note: The above interactions assumed the `menubar` is horizontal. If the `menubar` is vertical, include `aria-orientation="vertical"` and change the following keyboard keys accordingly: -- Down Arrow - - : Performs like the Right Arrow as described above. + +- Down Arrow + - : Performs like the Right Arrow as described above. - Up Arrow - : Performs like the Left Arrow as described above -- Right Arrow - - : Performs like the Down Arrow as described above. +- Right Arrow + - : Performs like the Down Arrow as described above. - Left Arrow - : Performs as the Up Arrow as described above ## Examples - - [W3C WAI-ARIA practices: navigation `menubar` example](https://www.w3.org/TR/2019/WD-wai-aria-practices-1.2-20191218/examples/menubar/menubar-1/menubar-1.html) - - [W3C WAI-ARIA practices: editor `menubar` example](https://www.w3.org/TR/2019/WD-wai-aria-practices-1.2-20191218/examples/menubar/menubar-2/menubar-2.html) +- [W3C WAI-ARIA practices: navigation `menubar` example](https://www.w3.org/TR/2019/WD-wai-aria-practices-1.2-20191218/examples/menubar/menubar-1/menubar-1.html) +- [W3C WAI-ARIA practices: editor `menubar` example](https://www.w3.org/TR/2019/WD-wai-aria-practices-1.2-20191218/examples/menubar/menubar-2/menubar-2.html) ## Specifications diff --git a/files/en-us/web/accessibility/aria/roles/menuitem_role/index.md b/files/en-us/web/accessibility/aria/roles/menuitem_role/index.md index 9d22ef18eb6d6c6..9a2553e4ab4ba03 100644 --- a/files/en-us/web/accessibility/aria/roles/menuitem_role/index.md +++ b/files/en-us/web/accessibility/aria/roles/menuitem_role/index.md @@ -17,11 +17,11 @@ The `menuitem` role indicates the element is an option in a set of choices conta ## Description -A `menuitem` is one of the three types of options in a set of choices contained by a [`menu`](/en-US/docs/Web/Accessibility/ARIA/Roles/menu_role) or [`menubar`](/en-US/docs/Web/Accessibility/ARIA/Roles/menubar_role); the other two being [`menuitemcheckbox`](/en-US/docs/Web/Accessibility/ARIA/Roles/menuitemcheckbox_role) and [`menuitemradio`](/en-US/docs/Web/Accessibility/ARIA/Roles/menuitemradio_role). The `menuitem` is only found as a descendant of, or owned by, elements with role `menu` or `menubar`, optionally nested within an with role [`group`](/en-US/docs/Web/Accessibility/ARIA/Roles/group_role) that is contained in, or owned by, a menu. +A `menuitem` is one of the three types of options in a set of choices contained by a [`menu`](/en-US/docs/Web/Accessibility/ARIA/Roles/menu_role) or [`menubar`](/en-US/docs/Web/Accessibility/ARIA/Roles/menubar_role); the other two being [`menuitemcheckbox`](/en-US/docs/Web/Accessibility/ARIA/Roles/menuitemcheckbox_role) and [`menuitemradio`](/en-US/docs/Web/Accessibility/ARIA/Roles/menuitemradio_role). The `menuitem` is only found as a descendant of, or owned by, elements with role `menu` or `menubar`, optionally nested within an with role [`group`](/en-US/docs/Web/Accessibility/ARIA/Roles/group_role) that is contained in, or owned by, a menu. If the `menuitem` is not a descendant of a menu in the DOM, include the [`aria-owns`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-owns) attribute on menu to indicate the relationship. If `aria-owns` is set on the menu container to include elements that are not DOM children of the container, those elements will appear in the reading order in the sequence they are referenced and after any items that are DOM children in supporting technologies. Ensure the visual focus order matches the assistive technology reading order. -Every `menuitem` in a menu is focusable, whether or not it is disabled. Indicate a `menuitem` is disabled by setting [`aria-disabled="true"`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-disabled) on the element with the role. +Every `menuitem` in a menu is focusable, whether or not it is disabled. Indicate a `menuitem` is disabled by setting [`aria-disabled="true"`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-disabled) on the element with the role. If a `menuitem` has a submenu, program it to display a new sub-level menu when the menu item is activated and include [`aria-haspopup="menu"`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup) or with the `true` value to indicate to assistive technologies that the menu item is used to open a submenu. @@ -51,7 +51,7 @@ Every `menuitem` must have an accessible name. This name comes from the element' - Up Arrow - : Moves focus to the previous item, optionally wrapping from the first to the last. Optionally, if the `menuitem` is in a menubar and has a submenu, opens the submenu and places focus on the last item in the submenu. - Right Arrow - - : If in a `menu` opened with a menubutton and not in a `menubar`, if the menuitem does not have a submenu, does nothing. When focus is in a `menubar`, moves focus to the next item, optionally wrapping from the last to the first. When focus is in a `menu` and on a `menuitem` that has a submenu, opens the submenu and places focus on its first item.When focus is in a `menu` and on an item that does not have a submenu, closes the submenu and any parent menus, moves focus to the next item in the `menubar`, and, if focus is now on a `menuitem` with a submenu, either opens the submenu of that `menuitem` without moving focus into the submenu, or opens the submenu of that `menuitem` and places focus on the first item in the submenu. + - : If in a `menu` opened with a menubutton and not in a `menubar`, if the menuitem does not have a submenu, does nothing. When focus is in a `menubar`, moves focus to the next item, optionally wrapping from the last to the first. When focus is in a `menu` and on a `menuitem` that has a submenu, opens the submenu and places focus on its first item.When focus is in a `menu` and on an item that does not have a submenu, closes the submenu and any parent menus, moves focus to the next item in the `menubar`, and, if focus is now on a `menuitem` with a submenu, either opens the submenu of that `menuitem` without moving focus into the submenu, or opens the submenu of that `menuitem` and places focus on the first item in the submenu. - Left Arrow - : When focus is in a `menubar`, moves focus to the previous item, optionally wrapping from the first to the last. When focus is in a submenu of an item in a menu, closes the submenu and returns focus to the parent `menuitem`. When focus is in a submenu of an item in a `menubar`, closes the submenu, moves focus to the previous item in the `menubar`, and, if focus is now on a `menuitem` with a submenu, either opens the submenu of that `menuitem` without moving focus into the submenu, or opens the submenu of that `menuitem` and places focus on the first item in the submenu. - Home @@ -67,8 +67,7 @@ Every `menuitem` must have an accessible name. This name comes from the element' - Shift + Tab - : Moves focus to the previous element in the tab sequence, and if the item that had focus is not in a menubar, closes its menu and all open parent menu containers. - -If a menu is opened or a menu bar receives focus as a result of a context action, Escape or Enter may return focus to the invoking context. +If a menu is opened or a menu bar receives focus as a result of a context action, Escape or Enter may return focus to the invoking context. Some implementations of navigation menubars may have menuitem elements that both perform a function and open a submenu. In such implementations, Enter and Space perform a navigation function while Down Arrow, in a horizontal menubar, opens the submenu associated with that same menuitem. @@ -122,10 +121,10 @@ When items in a `menubar` are arranged vertically and items in menu containers a ## See Also -- [`menuitemcheckbox` role](/en-US/docs/Web/Accessibility/ARIA/Roles/menuitemcheckbox_role) -- [`menuitemradio` role](/en-US/docs/Web/Accessibility/ARIA/Roles/menuitemradio_role) -- [`listitem` role](/en-US/docs/Web/Accessibility/ARIA/Roles/listitem_role) -- [`option` role](/en-US/docs/Web/Accessibility/ARIA/Roles/option_role) +- [`menuitemcheckbox` role](/en-US/docs/Web/Accessibility/ARIA/Roles/menuitemcheckbox_role) +- [`menuitemradio` role](/en-US/docs/Web/Accessibility/ARIA/Roles/menuitemradio_role) +- [`listitem` role](/en-US/docs/Web/Accessibility/ARIA/Roles/listitem_role) +- [`option` role](/en-US/docs/Web/Accessibility/ARIA/Roles/option_role)