Skip to content

Commit

Permalink
style: run prettier on web/g-j (#20548)
Browse files Browse the repository at this point in the history 
* style: run prettier on web/g-j

* fix: re-escape HTML in alt

* Update files/en-us/web/javascript/reference/global_objects/asyncgeneratorfunction/index.md

Co-authored-by: Jean-Yves Perrier <[email protected]>

* Update files/en-us/web/guide/houdini/index.md

Co-authored-by: Jean-Yves Perrier <[email protected]>

* Update files/en-us/web/guide/mobile/mobile-friendliness/index.md

Co-authored-by: Jean-Yves Perrier <[email protected]>

* Update files/en-us/web/html/attributes/rel/index.md

Co-authored-by: Jean-Yves Perrier <[email protected]>

* Update files/en-us/web/html/element/marquee/index.md

Co-authored-by: Jean-Yves Perrier <[email protected]>

* Update files/en-us/web/html/element/marquee/index.md

Co-authored-by: Jean-Yves Perrier <[email protected]>

* Update files/en-us/web/html/element/thead/index.md

Co-authored-by: Jean-Yves Perrier <[email protected]>

* Update files/en-us/web/javascript/reference/global_objects/number/number/index.md

Co-authored-by: Joshua Chen <[email protected]>

* Update files/en-us/web/javascript/reference/global_objects/intl/collator/collator/index.md

* Apply suggestions from code review

Co-authored-by: Jean-Yves Perrier <[email protected]>

* fix: markdownlint issue

* Update files/en-us/web/javascript/reference/global_objects/intl/collator/collator/index.md

Co-authored-by: Jean-Yves Perrier <[email protected]>
Co-authored-by: Joshua Chen <[email protected]>
  • Loading branch information
@nschonni @teoli2003 @Josh-Cena
3 people authored Sep 12, 2022
1 parent 457f4ed commit 9b38f88
Show file tree
Hide file tree
Showing 160 changed files with 826 additions and 746 deletions.
16 changes: 8 additions & 8 deletions files/en-us/web/guide/ajax/wai_aria_live_regions_api_support/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,14 +33,14 @@ As always, we're open to questions and suggestions for changes in [community for

For any mutation event in a page, the author can get the following object attributes from the event object, if they are defined on some ancestor element (closest ancestor wins):

| Object attribute name | Possible values | Default value | ARIA markup if required | Meaning |
| --------------------- | --------------------------------------------- | -------------------| ------------------------------------|----------------- |
| `container-live` | `"off" \| "polite" \| "assertive"` | `"off"` | `aria-live` on ancestor element | Interruption |
| `container-relevant` | `'additions'` `'removals'` `'text' \| "all"` | `"additions text"` | `aria-relevant` on ancestor element | What types of mutations are possibly relevant? See [section](#events_fired_for_web_page_mutations_the_mutation_events_list) to match the type of event with this attribute's value, to determine whether the author believed the event should be presented to the user or not.|
| `container-busy` | `"true" \| "false" \| "error"` | `"false"` | `aria-busy` on ancestor element | The current changes are not yet complete. A state change event for the A11y API's BUSY state will be fired on the container object currently marked as BUSY, once it is no longer BUSY. This is especially important in atomic regions. The entire atomic region should be presented once when it is finally no longer BUSY.|
| `container-atomic` | `"true" \| "false"` | `"false"` | `aria-atomic` on ancestor element | Is this change inside a region that should always be presented at once. If yes, member-of relation will point to the root of the region (see next section)|
| `member-of` | If `container-atomic=true`, points to an ancestor accessible object (thus it is actually an accessible relation, not object attribute) | Not in atomic region if not provided | `aria-atomic` on ancestor element | Points to the root of the atomic container that this object is in. This will always be an ancestor of the current object. |
| `event-from-input` | `"true" \| "false"` (described more below) | Browser could not calculate this | Does not require author's cooperation. | Was the root cause of this event explicit user input? |
| Object attribute name | Possible values | Default value | ARIA markup if required | Meaning |
| --------------------- | -------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `container-live` | `"off" \| "polite" \| "assertive"` | `"off"` | `aria-live` on ancestor element | Interruption |
| `container-relevant` | `'additions'` `'removals'` `'text' \| "all"` | `"additions text"` | `aria-relevant` on ancestor element | What types of mutations are possibly relevant? See [section](#events_fired_for_web_page_mutations_the_mutation_events_list) to match the type of event with this attribute's value, to determine whether the author believed the event should be presented to the user or not. |
| `container-busy` | `"true" \| "false" \| "error"` | `"false"` | `aria-busy` on ancestor element | The current changes are not yet complete. A state change event for the A11y API's BUSY state will be fired on the container object currently marked as BUSY, once it is no longer BUSY. This is especially important in atomic regions. The entire atomic region should be presented once when it is finally no longer BUSY. |
| `container-atomic` | `"true" \| "false"` | `"false"` | `aria-atomic` on ancestor element | Is this change inside a region that should always be presented at once. If yes, member-of relation will point to the root of the region (see next section) |
| `member-of` | If `container-atomic=true`, points to an ancestor accessible object (thus it is actually an accessible relation, not object attribute) | Not in atomic region if not provided | `aria-atomic` on ancestor element | Points to the root of the atomic container that this object is in. This will always be an ancestor of the current object. |
| `event-from-input` | `"true" \| "false"` (described more below) | Browser could not calculate this | Does not require author's cooperation. | Was the root cause of this event explicit user input? |

The "container-" prefix is so named because the attribute describes what the final computed property of similar name is for that node. This means that the AT does not need to traverse up the parent chain to get this information. At this time, for properties where the `container-`_name_ attribute has not been set, the AT must have code to fall back on the default value as defined in the W3C spec.

Expand Down
2 changes: 1 addition & 1 deletion files/en-us/web/guide/api/webrtc/peer-to-peer_communications_with_webrtc/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ A high-level description of what happens in an `RTCPeerConnection` was shown in

## Resources

- A good tutorial on basic features in WebRTC is at [web.dev](https://web.dev/webrtc-basics/). A collection of basic test pages to support development are at [webrtc-landing](https://mozilla.github.io/webrtc-landing/).
- A good tutorial on basic features in WebRTC is at [web.dev](https://web.dev/webrtc-basics/). A collection of basic test pages to support development are at [webrtc-landing](https://mozilla.github.io/webrtc-landing/).
- You can make simple person-to-person calls using [apprtc](https://github.com/webrtc/apprtc).
- A high-level description of what happens in an `RTCPeerConnection` was shown in the [Mozilla Hacks](https://hacks.mozilla.org/category/webrtc/) blog article [Embedding WebRTC video chat](https://hacks.mozilla.org/2013/05/embedding-webrtc-video-chat-right-into-your-website/).

Expand Down
2 changes: 1 addition & 1 deletion .../web/guide/audio_and_video_delivery/live_streaming_web_audio_and_video/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ For example:

[Media Source Extensions](https://w3c.github.io/media-source/) is a W3C working draft that plans to extend {{ domxref("HTMLMediaElement") }} to allow JavaScript to generate media streams for playback. Allowing JavaScript to generate streams facilitates a variety of use cases like adaptive streaming and time shifting live streams.

For example, [you could implement MPEG-DASH using JavaScript while offloading the decoding to MSE](https://web.archive.org/web/20170504035455/https://msopentech.com/blog/2014/01/03/streaming_video_player/).
For example, [you could implement MPEG-DASH using JavaScript while offloading the decoding to MSE](https://web.archive.org/web/20170504035455/https://msopentech.com/blog/2014/01/03/streaming_video_player/).

> **Note:** Time Shifting is the process of consuming a live stream sometime after it happened.
Expand Down
2 changes: 1 addition & 1 deletion ...s/en-us/web/guide/audio_and_video_delivery/video_player_styling_basics/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -205,7 +205,7 @@ As mentioned in the [previous article](/en-US/docs/Web/Guide/Audio_and_video_del
}
```

A `.data-state` class is also used here when a {{ htmlelement("progress") }} element is being "faked"; when it's in this state the background color needs to be set. The internal {{htmlelement("span") }} element used as the actual progressing part of the faked progress bar has its width initially set to 0% (it is updated via JavaScript) and it also has its background color set.
A `.data-state` class is also used here when a {{ htmlelement("progress") }} element is being "faked"; when it's in this state the background color needs to be set. The internal {{htmlelement("span") }} element used as the actual progressing part of the faked progress bar has its width initially set to 0% (it is updated via JavaScript) and it also has its background color set.

There are some browser-specific properties that need to be set to ensure that Firefox and Chrome use the required color for the progress bar:

Expand Down
12 changes: 6 additions & 6 deletions files/en-us/web/guide/audio_and_video_manipulation/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -189,12 +189,12 @@ window.addEventListener('load', setPlaybackRate);

The Web Audio API can receive audio from a variety of sources, then process it and send it back out to an {{domxref("AudioDestinationNode")}} representing the output device to which the sound is sent after processing.

| If the audio source is… | Use this Web Audio node type |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------- |
| An audio track from an HTML {{HTMLElement("audio")}} or {{HTMLElement("video")}} element | {{domxref("MediaElementAudioSourceNode")}} |
| A plain raw audio data buffer in memory | {{domxref("AudioBufferSourceNode")}} |
| An oscillator generating a sine wave or other computed waveform | {{domxref("OscillatorNode")}} |
| An audio track from [WebRTC](/en-US/docs/Web/API/WebRTC_API) (such as the microphone input you can get using {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}}. | {{domxref("MediaStreamAudioSourceNode")}} |
| If the audio source is… | Use this Web Audio node type |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------ |
| An audio track from an HTML {{HTMLElement("audio")}} or {{HTMLElement("video")}} element | {{domxref("MediaElementAudioSourceNode")}} |
| A plain raw audio data buffer in memory | {{domxref("AudioBufferSourceNode")}} |
| An oscillator generating a sine wave or other computed waveform | {{domxref("OscillatorNode")}} |
| An audio track from [WebRTC](/en-US/docs/Web/API/WebRTC_API) (such as the microphone input you can get using {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}}. | {{domxref("MediaStreamAudioSourceNode")}} |

### Audio filters

Expand Down
1 change: 1 addition & 0 deletions files/en-us/web/guide/houdini/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ which register completely configurable worklets.
> **Note:** You can write your own worklets, or install components created by other people.
> The [Houdini.how](https://houdini.how/) website is a collection of worklets,
> with [instructions on how to use them](https://houdini.how/usage/).
The CSS `paint()` function is an additional function supported by the {{cssxref("image")}} type.
It takes parameters that include the name of the worklet,
plus additional parameters needed by the worklet.
Expand Down
8 changes: 4 additions & 4 deletions files/en-us/web/guide/html/constraint_validation/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,10 +26,10 @@ In HTML, basic constraints are declared in two ways:

The intrinsic constraints for the {{ htmlattrxref("type", "input") }} attribute are:

| Input type | Constraint description | Associated violation |
| ------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------- |
| [`<input type="URL">`](/en-US/docs/Web/HTML/Element/input/url) | The value must be an absolute [URL](/en-US/docs/Learn/Common_questions/What_is_a_URL), as defined in the [URL Living Standard](https://url.spec.whatwg.org/). | **[TypeMismatch](/en-US/docs/Web/API/ValidityState/typeMismatch)** constraint violation |
| [`<input type="email">`](/en-US/docs/Web/HTML/Element/input/email) | The value must be a syntactically valid email address, which generally has the format `[email protected]` but can also be local such as `username@hostname`. | **[TypeMismatch](/en-US/docs/Web/API/ValidityState/typeMismatch)** constraint violation |
| Input type | Constraint description | Associated violation |
| ------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------- |
| [`<input type="URL">`](/en-US/docs/Web/HTML/Element/input/url) | The value must be an absolute [URL](/en-US/docs/Learn/Common_questions/What_is_a_URL), as defined in the [URL Living Standard](https://url.spec.whatwg.org/). | **[TypeMismatch](/en-US/docs/Web/API/ValidityState/typeMismatch)** constraint violation |
| [`<input type="email">`](/en-US/docs/Web/HTML/Element/input/email) | The value must be a syntactically valid email address, which generally has the format `[email protected]` but can also be local such as `username@hostname`. | **[TypeMismatch](/en-US/docs/Web/API/ValidityState/typeMismatch)** constraint violation |

For both of these input types, if the {{ htmlattrxref("multiple", "input") }} attribute is set, several values can be set, as a comma-separated list. If any of these do not satisfy the condition described here, the **Type mismatch** constraint violation is triggered.

Expand Down
6 changes: 3 additions & 3 deletions files/en-us/web/guide/html/editable_content/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ user_pref("capability.policy.allowclipboard.Clipboard.paste", "allAccess");
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Rich Text Editor</title>
<script>
Expand All @@ -89,13 +89,13 @@ user_pref("capability.policy.allowclipboard.Clipboard.paste", "allAccess");
function initDoc() {
doc = document.getElementById("textBox");
defTxt = doc.innerHTML;
if (document.compForm.switchMode.checked) {
if (document.compForm.switchMode.checked) {
setDocMode(true);
}
}
function formatDoc(cmd, value) {
if (validateMode()) {
if (validateMode()) {
document.execCommand(cmd, false, value);
doc.focus();
}
Expand Down
2 changes: 1 addition & 1 deletion files/en-us/web/guide/mobile/a_hybrid_approach/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ One downside of mixing approaches is that it can lead to an increase in the numb

Combining server-side and client-side techniques is something that is always worth considering; there are so many options that one must just weigh the pros and cons of each individual technique employed.

In many cases, the added complexity of the hybrid approach is not even necessary. For example, you may not even need to adjust your content based on what actual device a user is using — just knowing whether a feature is present on their browser is often good enough. This is something you might be able to discern on the client-side using JavaScript feature detection from [Modernizr](https://modernizr.com/docs/#s2) or [Detect It](https://github.com/rafgraph/detect-it). It can't hurt to dig down and ask yourself which axis you are actually looking to adjust your content around.
In many cases, the added complexity of the hybrid approach is not even necessary. For example, you may not even need to adjust your content based on what actual device a user is using — just knowing whether a feature is present on their browser is often good enough. This is something you might be able to discern on the client-side using JavaScript feature detection from [Modernizr](https://modernizr.com/docs/#s2) or [Detect It](https://github.com/rafgraph/detect-it). It can't hurt to dig down and ask yourself which axis you are actually looking to adjust your content around.

We've talked about incorporating server-side techniques into a responsive design, but there are even ways to use the hybrid approach if your use cases for mobile and desktop are very different. You could, for example, increase the flexibility of your separate site designs by incorporating media queries and a flexible layout. You may even be able to make your mobile site design adaptable enough to extend comfortably to tablets as well.

Expand Down
Loading

0 comments on commit 9b38f88

Please sign in to comment.