Update checked-in dependencies

This commit is contained in:
github-actions[bot] 2025-02-03 17:20:53 +00:00
parent 3e913ef09d
commit 9660df3fcc
990 changed files with 74805 additions and 60149 deletions

View file

@ -4,7 +4,7 @@
<!-- end auto-generated rule header -->
Emoji have become a common way of communicating content to the end user. To a person using a screenreader, however, they may not be aware that this content is there at all. By wrapping the emoji in a `<span>`, giving it the `role="img"`, and providing a useful description in `aria-label`, the screenreader will treat the emoji as an image in the accessibility tree with an accessible name for the end user.
Emoji have become a common way of communicating content to the end user. To a person using a screen reader, however, they may not be aware that this content is there at all. By wrapping the emoji in a `<span>`, giving it the `role="img"`, and providing a useful description in `aria-label`, the screen reader will treat the emoji as an image in the accessibility tree with an accessible name for the end user.
## Rule details

View file

@ -4,7 +4,7 @@
<!-- end auto-generated rule header -->
Enforces `<a>` values are not exact matches for the phrases "click here", "here", "link", "a link", or "learn more". Screenreaders announce tags as links/interactive, but rely on values for context. Ambiguous anchor descriptions do not provide sufficient context for users.
Enforces `<a>` values are not exact matches for the phrases "click here", "here", "link", "a link", or "learn more". Screen readers announce tags as links/interactive, but rely on values for context. Ambiguous anchor descriptions do not provide sufficient context for users.
## Rule options

View file

@ -6,6 +6,8 @@
Enforce that anchors have content and that the content is accessible to screen readers. Accessible means that it is not hidden using the `aria-hidden` prop. Refer to the references to learn about why this is important.
Alternatively, you may use the `title` prop or the `aria-label` prop.
## Rule options
This rule takes one optional object argument of type object:
@ -45,6 +47,8 @@ return (
<a>Anchor Content!</a>
<a><TextWrapper /></a>
<a dangerouslySetInnerHTML={{ __html: 'foo' }} />
<a title='foo' />
<a aria-label='foo' />
```
### Fail

View file

@ -15,8 +15,7 @@ element will be applied as the value of `aria-activedescendant` on the input
element.
Because an element with `aria-activedescendant` must be tabbable, it must either
have an inherent `tabIndex` of zero or declare a `tabIndex` of zero with the `tabIndex`
attribute.
have an inherent `tabIndex` of zero or declare a `tabIndex` attribute.
## Rule details
@ -34,16 +33,16 @@ This rule takes no arguments.
<div aria-activedescendant={someID} tabIndex={0} />
<div aria-activedescendant={someID} tabIndex="0" />
<div aria-activedescendant={someID} tabIndex={1} />
<div aria-activedescendant={someID} tabIndex={-1} />
<div aria-activedescendant={someID} tabIndex="-1" />
<input aria-activedescendant={someID} />
<input aria-activedescendant={someID} tabIndex={0} />
<input aria-activedescendant={someID} tabIndex={-1} />
```
### Fail
```jsx
<div aria-activedescendant={someID} />
<div aria-activedescendant={someID} tabIndex={-1} />
<div aria-activedescendant={someID} tabIndex="-1" />
<input aria-activedescendant={someID} tabIndex={-1} />
```
## Accessibility guidelines

View file

@ -4,7 +4,7 @@
<!-- end auto-generated rule header -->
Enforce `onClick` is accompanied by at least one of the following: `onKeyUp`, `onKeyDown`, `onKeyPress`. Coding for the keyboard is important for users with physical disabilities who cannot use a mouse, AT compatibility, and screenreader users. This does not apply for interactive or hidden elements.
Enforce `onClick` is accompanied by at least one of the following: `onKeyUp`, `onKeyDown`, `onKeyPress`. Coding for the keyboard is important for users with physical disabilities who cannot use a mouse, AT compatibility, and screen reader users. This does not apply for interactive or hidden elements.
## Rule details

View file

@ -4,7 +4,7 @@
<!-- end auto-generated rule header -->
Enforce img alt attribute does not contain the word image, picture, or photo. Screenreaders already announce `img` elements as an image. There is no need to use words such as *image*, *photo*, and/or *picture*.
Enforce img alt attribute does not contain the word image, picture, or photo. Screen readers already announce `img` elements as an image. There is no need to use words such as *image*, *photo*, and/or *picture*.
## Rule options

View file

@ -104,9 +104,13 @@ This rule takes one optional object argument of type object:
```
`labelComponents` is a list of custom React Component names that should be checked for an associated control.
`labelAttributes` is a list of attributes to check on the label component and its children for a label. Use this if you have a custom component that uses a string passed on a prop to render an HTML `label`, for example.
`controlComponents` is a list of custom React Components names that will output an input element. [Glob format](https://linuxhint.com/bash_globbing_tutorial/) is also supported for specifying names (e.g., `Label*` matches `LabelComponent` but not `CustomLabel`, `????Label` matches `LinkLabel` but not `CustomLabel`).
`assert` asserts that the label has htmlFor, a nested label, both or either. Available options: `'htmlFor', 'nesting', 'both', 'either'`.
`depth` (default 2, max 25) is an integer that determines how deep within a `JSXElement` label the rule should look for text content or an element with a label to determine if the `label` element will have an accessible label.
### Fail

View file

@ -13,7 +13,7 @@ Enforce label tags have associated control.
There are two supported ways to associate a label with a control:
- nesting: by wrapping a control in a label tag
- id: by using the prop `htmlFor` as in `htmlFor=[ID of control]`
- id: by using the prop `htmlFor` (or any configured attribute) as in `htmlFor=[ID of control]`
To fully cover 100% of assistive devices, you're encouraged to validate for both nesting and id.

View file

@ -4,11 +4,37 @@
<!-- end auto-generated rule header -->
Enforce onmouseover/onmouseout are accompanied by onfocus/onblur. Coding for the keyboard is important for users with physical disabilities who cannot use a mouse, AT compatibility, and screenreader users.
Enforce onmouseover/onmouseout are accompanied by onfocus/onblur. Coding for the keyboard is important for users with physical disabilities who cannot use a mouse, AT compatibility, and screen reader users.
## Rule details
## Rule options
This rule takes no arguments.
By default, this rule checks that `onmouseover` is paired with `onfocus` and that `onmouseout` is paired with `onblur`. This rule takes an optional argument to specify other handlers to check for "hover in" and/or "hover out" events:
```json
{
"rules": {
"jsx-a11y/mouse-events-have-key-events": [
"error",
{
"hoverInHandlers": [
"onMouseOver",
"onMouseEnter",
"onPointerOver",
"onPointerEnter"
],
"hoverOutHandlers": [
"onMouseOut",
"onMouseLeave",
"onPointerOut",
"onPointerLeave"
]
}
]
}
}
```
Note that while `onmouseover` and `onmouseout` are checked by default if no arguments are passed in, those are *not* included by default if you *do* provide an argument, so remember to explicitly include them if you want to check them.
### Succeed
```jsx

View file

@ -4,7 +4,7 @@
<!-- end auto-generated rule header -->
Enforce no accessKey prop on element. Access keys are HTML attributes that allow web developers to assign keyboard shortcuts to elements. Inconsistencies between keyboard shortcuts and keyboard commands used by screenreaders and keyboard-only users create accessibility complications so to avoid complications, access keys should not be used.
Enforce no accessKey prop on element. Access keys are HTML attributes that allow web developers to assign keyboard shortcuts to elements. Inconsistencies between keyboard shortcuts and keyboard commands used by screen readers and keyboard-only users create accessibility complications so to avoid complications, access keys should not be used.
### References
1. [WebAIM](https://webaim.org/techniques/keyboard/accesskey#spec)

View file

@ -122,7 +122,7 @@ Adjust the list of handler prop names in the handlers array to increase or decre
<div onClick={() => void 0} role="presentation" />
<input type="text" onClick={() => void 0} /> // Interactive element does not require role.
<button onClick={() => void 0} className="foo" /> // button is interactive.
<div onClick={() => void 0} role="button" aria-hidden /> // This is hidden from screenreader.
<div onClick={() => void 0} role="button" aria-hidden /> // This is hidden from screen reader.
<Input onClick={() => void 0} type="hidden" /> // This is a higher-level DOM component
```

View file

@ -43,3 +43,4 @@ General best practice (reference resources)
### Resources
- [ARIA Spec, ARIA Adds Nothing to Default Semantics of Most HTML Elements](https://www.w3.org/TR/using-aria/#aria-does-nothing)
- [Identifying SVG as an image](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#identifying_svg_as_an_image)

View file

@ -21,7 +21,7 @@ Indicate the element's role with the `role` attribute:
onClick={onClickHandler}
onKeyPress={onKeyPressHandler}
role="button"
tabIndex="0">
tabindex="0">
Save
</div>
```