Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .github/workflows/pr-reviewdog.yml
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ permissions:

jobs:
reviewdog:
if: github.repository_owner == 'mdn'
runs-on: ubuntu-latest
env:
STATUS_PATH: repos/${{ github.repository }}/statuses/${{ github.event.workflow_run.head_sha }}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -162,7 +162,7 @@ In Firefox:
In Safari:

- The `"clipboardWrite"` permission is only supported in extension contexts (not content scripts).
- The `"clipboardRead"` permission isn't support.
- The `"clipboardRead"` permission isn't supported.

## Browser compatibility

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ A tooltip typically becomes visible, after a short delay of generally one to fiv

Because the tooltip itself never receives focus and is not in the tabbing order, a tooltip cannot contain interactive elements like links, inputs, or buttons.

The tooltip is not the appropriate role for the more information "i" icon, ⓘ. A tooltip is directly associated with the owning element. The ⓘ isn't 'described by' detailed information; the tool or control is.
The `tooltip` is not the appropriate role for the more information "i" icon, ⓘ. A tooltip is directly associated with the owning element. The `role="tooltip"` is included on the element containing the tip content, not on the icon or control that triggers it. To show a tooltip when the ⓘ is hovered or focused, give the trigger an accessible name and reference the tooltip with `aria-describedby`, so the tip content is announced when the trigger receives focus. Because the detailed information describes the related control rather than the ⓘ itself, also put `aria-describedby` on that control, as shown in the [more information icon example](#using_a_more_information_icon).

The use of the ARIA `tooltip` role is a supplement to the normal browser tooltip behavior. An example of a native browser tooltip is the way some browsers display an element's [`title` attribute](/en-US/docs/Web/HTML/Reference/Global_attributes/title) on long mouse hover. One cannot activate this feature through either keyboard focus or through touch interaction, making this feature inaccessible. If the information is important enough to include as a tooltip or title, consider including it in visible text.

Expand Down Expand Up @@ -57,6 +57,8 @@ The tooltip should appear on focus or when the element is hovered on, without ad

## Examples

### Using a tooltip

```html
<label for="password">Password:</label>
<input aria-describedby="passwordrules" id="password" type="password" />
Expand Down Expand Up @@ -101,10 +103,77 @@ The tooltip can be instantiated with CSS. Change the class name with JavaScript
}
```

{{EmbedLiveSample("examples", "", 300)}}
{{EmbedLiveSample("using_a_tooltip", "", 300)}}

The above hides the tooltip with CSS in the default state or if the `hide-tooltip` class has been added with JavaScript (when the user hit <kbd>Escape</kbd>), with high specificity to ensure the tooltip doesn't show. When the owning element receives focus, it gets positioned relatively and the tooltip becomes visible. We keep the tooltip visible when hovering over the tooltip, consistent with [WCAG 1.4.13](#accessibility_concerns). Here, we allow the cursor to move from the input to the tooltip without the latter disappearing by waiting 0.5s in between; there are other ways to achieve this, such as filling the gap with a transparent element that also keeps the tooltip visible when hovered over.

### Using a more information icon

This example shows a tooltip when the ⓘ button is hovered over or receives keyboard focus. The button has an {{glossary("accessible name")}} and references the tooltip with [`aria-describedby`](/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-describedby), so the tooltip content is announced when the button receives focus. The input also references the tooltip with `aria-describedby`, because the information describes that control, even when the tooltip is hidden.

```html
<label for="username">Username:</label>
<input id="username" aria-describedby="username-help" />
<div class="info">
<button
type="button"
aria-label="More information about usernames"
aria-describedby="username-help">
<span aria-hidden="true">ⓘ</span>
</button>
<div role="tooltip" id="username-help">
<p>Your username is displayed publicly alongside your comments.</p>
</div>
</div>
```

The tooltip is positioned below the icon. Padding above the text bubble bridges the gap to the button so the pointer can move onto the tooltip without closing it.

```css
.info {
display: inline-block;
position: relative;
}

[role="tooltip"] {
visibility: hidden;
position: absolute;
top: 100%;
right: 0;
width: 15rem;
padding-top: 0.5rem;
z-index: 1;
}

.info:hover [role="tooltip"],
.info:focus-within [role="tooltip"] {
visibility: visible;
}

[role="tooltip"] p {
margin: 0;
padding: 0.75rem;
border-radius: 0.25rem;
background: #222;
color: white;
box-shadow: 0 2px 6px #0004;
}

[role="tooltip"]::before {
content: "";
position: absolute;
top: 0;
right: 0.5rem;
border-right: 0.5rem solid transparent;
border-bottom: 0.5rem solid #222;
border-left: 0.5rem solid transparent;
}
```

The tooltip stays visible while the button has focus or the pointer is over the button or tooltip. It is hidden when neither condition applies.

{{EmbedLiveSample("using_a_more_information_icon", "", 200)}}

## Accessibility concerns

If the information is important enough for a tooltip, isn't it important enough to always be visible?
Expand Down
4 changes: 2 additions & 2 deletions files/en-us/web/api/idbfactory/deletedatabase/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ deleteDatabase(name, options)

An {{DOMxRef("IDBOpenDBRequest")}} on which subsequent events related to this request are fired.

If the operation is successful, the value of the request's {{domxref("IDBRequest.result", "result")}} property is `null`.
If the operation is successful, the value of the request's {{domxref("IDBRequest.result", "result")}} property is `undefined`.

## Description

Expand Down Expand Up @@ -71,7 +71,7 @@ dbDeleteRequest.onerror = (event) => {
dbDeleteRequest.onsuccess = (event) => {
console.log("Database deleted successfully");

console.log(event.result); // should be undefined
console.log(dbDeleteRequest.result); // undefined
};
```

Expand Down
5 changes: 0 additions & 5 deletions files/en-us/web/api/imagedecoder/imagedecoder/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,11 +24,6 @@ new ImageDecoder(init)
- : A string containing the [MIME type](/en-US/docs/Web/HTTP/Guides/MIME_types) of the image file to be decoded.
- `data`
- : An {{jsxref("ArrayBuffer")}}, a {{jsxref("TypedArray")}}, a {{jsxref("DataView")}}, or a {{domxref("ReadableStream")}} of bytes representing an encoded image type as described by `type`.
- `premultiplyAlpha` {{optional_inline}}
- : Specifies whether the decoded image's color channels should be premultiplied by the alpha channel. If not provided set as `"default"`:
- `"none"`
- `"premultiply"`
- `"default"`
- `colorSpaceConversion` {{optional_inline}}
- : Specifies whether the image should be decoded using color space conversion. If not provided set as `"default"`. The value `"default"` indicates that implementation-specific behavior is used:
- `"none"`
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -160,7 +160,7 @@ lbl: console.log(1); // Label
In JavaScript, identifiers are commonly made of alphanumeric characters, underscores (`_`), and dollar signs (`$`). Identifiers are not allowed to start with numbers. However, JavaScript identifiers are not only limited to {{Glossary("ASCII")}} — many Unicode code points are allowed as well. Namely:

- Start characters can be any character in the [ID_Start](https://util.unicode.org/UnicodeJsps/list-unicodeset.jsp?a=%5Cp%7BID_Start%7D) category plus `_` and `$`.
- After the first character, you can use any character in the [ID_Continue](https://util.unicode.org/UnicodeJsps/list-unicodeset.jsp?a=%5Cp%7BID_Continue%7D) category plus U+200C (ZWNJ) and U+200D (ZWJ).
- After the first character, you can use any character in the [ID_Continue](https://util.unicode.org/UnicodeJsps/list-unicodeset.jsp?a=%5Cp%7BID_Continue%7D) category, which contains U+200C (ZWNJ) and U+200D (ZWJ).

> [!NOTE]
> If, for some reason, you need to parse some JavaScript source yourself, do not assume all identifiers follow the pattern `/[A-Za-z_$][\w$]*/` (i.e., ASCII-only)! The range of identifiers can be described by the regex `/[$_\p{ID_Start}][$\p{ID_Continue}]*/u` (excluding unicode escape sequences).
Expand Down
Loading
Loading