@atlaskit/visually-hidden 3.1.0 → 4.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +31 -0
- package/package.json +9 -16
- package/types/package.json +1 -8
- package/visually-hidden/package.json +1 -8
- package/visually-hidden.docs.tsx +41 -39
- package/dist/types-ts4.5/entry-points/types.d.ts +0 -1
- package/dist/types-ts4.5/entry-points/visually-hidden.d.ts +0 -1
- package/dist/types-ts4.5/index.d.ts +0 -2
- package/dist/types-ts4.5/types.d.ts +0 -22
- package/dist/types-ts4.5/visually-hidden.d.ts +0 -26
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,36 @@
|
|
|
1
1
|
# @atlaskit/visually-hidden
|
|
2
2
|
|
|
3
|
+
## 4.0.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`ee28cf33718b0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ee28cf33718b0) -
|
|
8
|
+
Add @atlassian/react-compiler-gating as a runtime dependency to enable React Compiler platform
|
|
9
|
+
gating.
|
|
10
|
+
- Updated dependencies
|
|
11
|
+
|
|
12
|
+
## 4.0.0
|
|
13
|
+
|
|
14
|
+
### Major Changes
|
|
15
|
+
|
|
16
|
+
- [`f2dc9097319f0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f2dc9097319f0) - ###
|
|
17
|
+
Dropped support for _legacy_ Typescript 4 types. **Typescript 5 is now the new minimum**.
|
|
18
|
+
|
|
19
|
+
Removes the `typesVersions` property and `dist/types-ts4.5` directory from the dist.
|
|
20
|
+
|
|
21
|
+
Types are now exclusively via the `"types": "dist/types/index.d.ts"` property.
|
|
22
|
+
|
|
23
|
+
```diff
|
|
24
|
+
- "typesVersions": {
|
|
25
|
+
- ">=4.5 <4.9": {
|
|
26
|
+
- "*": [
|
|
27
|
+
- "dist/types-ts4.5/*",
|
|
28
|
+
- "dist/types-ts4.5/index.d.ts"
|
|
29
|
+
- ]
|
|
30
|
+
- }
|
|
31
|
+
- },
|
|
32
|
+
```
|
|
33
|
+
|
|
3
34
|
## 3.1.0
|
|
4
35
|
|
|
5
36
|
### Minor Changes
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/visually-hidden",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "4.0.1",
|
|
4
4
|
"description": "A utility that hides content from the screen while retaining readability by screen readers for accessibility.",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -31,6 +31,7 @@
|
|
|
31
31
|
}
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
|
+
"@atlassian/react-compiler-gating": "^0.2.0",
|
|
34
35
|
"@babel/runtime": "^7.0.0",
|
|
35
36
|
"@compiled/react": "^0.20.0"
|
|
36
37
|
},
|
|
@@ -41,16 +42,16 @@
|
|
|
41
42
|
"@af/accessibility-testing": "workspace:^",
|
|
42
43
|
"@af/integration-testing": "workspace:^",
|
|
43
44
|
"@af/visual-regression": "workspace:^",
|
|
44
|
-
"@atlaskit/button": "^
|
|
45
|
-
"@atlaskit/docs": "^
|
|
46
|
-
"@atlaskit/link": "^
|
|
47
|
-
"@atlaskit/section-message": "^
|
|
48
|
-
"@atlaskit/toggle": "^
|
|
49
|
-
"@atlaskit/tokens": "^
|
|
50
|
-
"@atlassian/react-compiler-gating": "workspace:^",
|
|
45
|
+
"@atlaskit/button": "^24.1.0",
|
|
46
|
+
"@atlaskit/docs": "^12.0.0",
|
|
47
|
+
"@atlaskit/link": "^4.0.0",
|
|
48
|
+
"@atlaskit/section-message": "^9.1.0",
|
|
49
|
+
"@atlaskit/toggle": "^17.0.0",
|
|
50
|
+
"@atlaskit/tokens": "^15.0.0",
|
|
51
51
|
"@atlassian/ssr-tests": "workspace:^",
|
|
52
52
|
"@atlassian/structured-docs-types": "workspace:^",
|
|
53
53
|
"@testing-library/react": "^16.3.0",
|
|
54
|
+
"react": "^18.2.0",
|
|
54
55
|
"react-dom": "^18.2.0"
|
|
55
56
|
},
|
|
56
57
|
"techstack": {
|
|
@@ -74,13 +75,5 @@
|
|
|
74
75
|
"deprecation": "no-deprecated-imports"
|
|
75
76
|
}
|
|
76
77
|
},
|
|
77
|
-
"typesVersions": {
|
|
78
|
-
">=4.5 <4.9": {
|
|
79
|
-
"*": [
|
|
80
|
-
"dist/types-ts4.5/*",
|
|
81
|
-
"dist/types-ts4.5/index.d.ts"
|
|
82
|
-
]
|
|
83
|
-
}
|
|
84
|
-
},
|
|
85
78
|
"homepage": "https://atlassian.design/components/visually-hidden/"
|
|
86
79
|
}
|
package/types/package.json
CHANGED
|
@@ -6,12 +6,5 @@
|
|
|
6
6
|
"sideEffects": [
|
|
7
7
|
"**/*.compiled.css"
|
|
8
8
|
],
|
|
9
|
-
"types": "../dist/types/entry-points/types.d.ts"
|
|
10
|
-
"typesVersions": {
|
|
11
|
-
">=4.5 <5.9": {
|
|
12
|
-
"*": [
|
|
13
|
-
"../dist/types-ts4.5/entry-points/types.d.ts"
|
|
14
|
-
]
|
|
15
|
-
}
|
|
16
|
-
}
|
|
9
|
+
"types": "../dist/types/entry-points/types.d.ts"
|
|
17
10
|
}
|
|
@@ -6,12 +6,5 @@
|
|
|
6
6
|
"sideEffects": [
|
|
7
7
|
"**/*.compiled.css"
|
|
8
8
|
],
|
|
9
|
-
"types": "../dist/types/entry-points/visually-hidden.d.ts"
|
|
10
|
-
"typesVersions": {
|
|
11
|
-
">=4.5 <5.9": {
|
|
12
|
-
"*": [
|
|
13
|
-
"../dist/types-ts4.5/entry-points/visually-hidden.d.ts"
|
|
14
|
-
]
|
|
15
|
-
}
|
|
16
|
-
}
|
|
9
|
+
"types": "../dist/types/entry-points/visually-hidden.d.ts"
|
|
17
10
|
}
|
package/visually-hidden.docs.tsx
CHANGED
|
@@ -1,46 +1,48 @@
|
|
|
1
1
|
import path from 'path';
|
|
2
2
|
|
|
3
|
-
import type {
|
|
3
|
+
import type { StructuredContentSource } from '@atlassian/structured-docs-types/types';
|
|
4
4
|
|
|
5
|
-
const documentation:
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
description:
|
|
9
|
-
'Content hidden from sight but available to screen readers. Use when meaning is clear visually but not to assistive technology.',
|
|
10
|
-
status: 'general-availability',
|
|
11
|
-
import: {
|
|
5
|
+
const documentation: StructuredContentSource = {
|
|
6
|
+
components: [
|
|
7
|
+
{
|
|
12
8
|
name: 'VisuallyHidden',
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
],
|
|
23
|
-
contentGuidelines: [
|
|
24
|
-
'Use clear, descriptive hidden content',
|
|
25
|
-
'Ensure content adds value for screen readers',
|
|
26
|
-
'Keep content concise but meaningful',
|
|
27
|
-
],
|
|
28
|
-
accessibilityGuidelines: [
|
|
29
|
-
'Use for screen reader only content when visual context is insufficient for AT',
|
|
30
|
-
'Use role prop for semantic meaning when appropriate',
|
|
31
|
-
'Balance clarity with brevity—avoid overwhelming screen reader users',
|
|
32
|
-
'Prefer over aria-label in some cases when screen readers need to translate or announce full phrasing',
|
|
33
|
-
],
|
|
34
|
-
examples: [
|
|
35
|
-
{
|
|
36
|
-
name: '00 Basic',
|
|
37
|
-
description: '00 Basic example',
|
|
38
|
-
source: path.resolve(__dirname, './examples/00-basic.tsx'),
|
|
9
|
+
description:
|
|
10
|
+
'Content hidden from sight but available to screen readers. Use when meaning is clear visually but not to assistive technology.',
|
|
11
|
+
status: 'general-availability',
|
|
12
|
+
import: {
|
|
13
|
+
name: 'VisuallyHidden',
|
|
14
|
+
package: '@atlaskit/visually-hidden',
|
|
15
|
+
type: 'default',
|
|
16
|
+
packagePath: path.resolve(__dirname),
|
|
17
|
+
packageJson: require('./package.json'),
|
|
39
18
|
},
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
]
|
|
19
|
+
usageGuidelines: [
|
|
20
|
+
'Use when meaning is clear visually but not to assistive technology',
|
|
21
|
+
'Avoid clutter—verbose screen-reader-only text can be more harmful than helpful',
|
|
22
|
+
'Use the role prop for semantic meaning when needed',
|
|
23
|
+
],
|
|
24
|
+
contentGuidelines: [
|
|
25
|
+
'Use clear, descriptive hidden content',
|
|
26
|
+
'Ensure content adds value for screen readers',
|
|
27
|
+
'Keep content concise but meaningful',
|
|
28
|
+
],
|
|
29
|
+
accessibilityGuidelines: [
|
|
30
|
+
'Use for screen reader only content when visual context is insufficient for AT',
|
|
31
|
+
'Use role prop for semantic meaning when appropriate',
|
|
32
|
+
'Balance clarity with brevity—avoid overwhelming screen reader users',
|
|
33
|
+
'Prefer over aria-label in some cases when screen readers need to translate or announce full phrasing',
|
|
34
|
+
],
|
|
35
|
+
examples: [
|
|
36
|
+
{
|
|
37
|
+
name: '00 Basic',
|
|
38
|
+
description: '00 Basic example',
|
|
39
|
+
source: path.resolve(__dirname, './examples/00-basic.tsx'),
|
|
40
|
+
},
|
|
41
|
+
],
|
|
42
|
+
keywords: ['hidden', 'accessibility', 'screen-reader', 'aria', 'utility'],
|
|
43
|
+
categories: ['utility'],
|
|
44
|
+
},
|
|
45
|
+
],
|
|
46
|
+
};
|
|
45
47
|
|
|
46
48
|
export default documentation;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export type { VisuallyHiddenProps } from '../types';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default } from '../visually-hidden';
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import { type ReactNode } from 'react';
|
|
2
|
-
export type VisuallyHiddenProps = {
|
|
3
|
-
/**
|
|
4
|
-
* The element or elements that should be hidden.
|
|
5
|
-
*/
|
|
6
|
-
children: ReactNode;
|
|
7
|
-
/**
|
|
8
|
-
* An ARIA role attribute to aid screen readers.
|
|
9
|
-
*/
|
|
10
|
-
role?: string;
|
|
11
|
-
/**
|
|
12
|
-
* An id may be appropriate for this component if used in conjunction with `aria-describedby`
|
|
13
|
-
* on a paired element.
|
|
14
|
-
*/
|
|
15
|
-
id?: string;
|
|
16
|
-
/**
|
|
17
|
-
* A `testId` prop is provided for specified elements, which is a unique
|
|
18
|
-
* string that appears as a data attribute `data-testid` in the rendered code,
|
|
19
|
-
* serving as a hook for automated tests.
|
|
20
|
-
*/
|
|
21
|
-
testId?: string;
|
|
22
|
-
};
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @jsxRuntime classic
|
|
3
|
-
* @jsx jsx
|
|
4
|
-
*/
|
|
5
|
-
import { type FC } from 'react';
|
|
6
|
-
import type { VisuallyHiddenProps } from './types';
|
|
7
|
-
/**
|
|
8
|
-
* __Visually hidden__
|
|
9
|
-
*
|
|
10
|
-
* A composable element to apply a visually hidden effect to children.
|
|
11
|
-
* Useful for accessibility compliance.
|
|
12
|
-
*
|
|
13
|
-
* @example
|
|
14
|
-
* ```jsx
|
|
15
|
-
* import VisuallyHidden from '@atlaskit/visually-hidden';
|
|
16
|
-
*
|
|
17
|
-
* export default () => (
|
|
18
|
-
* <div style={{ border: '1px solid black' }}>
|
|
19
|
-
* There is text hidden between the brackets [
|
|
20
|
-
* <VisuallyHidden>Can't see me!</VisuallyHidden>]
|
|
21
|
-
* </div>
|
|
22
|
-
* );
|
|
23
|
-
* ```
|
|
24
|
-
*/
|
|
25
|
-
declare const VisuallyHidden: FC<VisuallyHiddenProps>;
|
|
26
|
-
export default VisuallyHidden;
|