@atlaskit/visually-hidden 0.1.2 → 1.0.0

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.
Files changed (10) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/README.md +16 -1
  3. package/dist/cjs/version.json +1 -1
  4. package/dist/cjs/visually-hidden.js +7 -2
  5. package/dist/es2019/version.json +1 -1
  6. package/dist/es2019/visually-hidden.js +7 -2
  7. package/dist/esm/version.json +1 -1
  8. package/dist/esm/visually-hidden.js +7 -2
  9. package/dist/types/types.d.ts +9 -0
  10. package/package.json +8 -6
package/CHANGELOG.md CHANGED
@@ -1,5 +1,14 @@
1
1
  # @atlaskit/visually-hidden
2
2
 
3
+ ## 1.0.0
4
+
5
+ ### Major Changes
6
+
7
+ - [`08ce7935675`](https://bitbucket.org/atlassian/atlassian-frontend/commits/08ce7935675) - Update `@atlaskit/visually-hidden` to v1. No breaking changes from previous version.
8
+
9
+ `@atlaskit/visually-hidden` now exposes an additional `id` prop. This prop is exposed to allow consumers to pair the component with the
10
+ `aria-describedby` HTML attribute.
11
+
3
12
  ## 0.1.2
4
13
 
5
14
  ### Patch Changes
package/README.md CHANGED
@@ -2,6 +2,21 @@
2
2
 
3
3
  A composable element that hides elements from the screen while keeping them accessible.
4
4
 
5
+ ## Installation
6
+
7
+ ```sh
8
+ yarn add @atlaskit/visually-hidden
9
+ ```
10
+
5
11
  ## Usage
6
12
 
7
- `import VisuallyHidden from '@atlaskit/visually-hidden';`
13
+ ```jsx
14
+ import VisuallyHidden from '@atlaskit/visually-hidden';
15
+
16
+ export default () => (
17
+ <div style={{ border: '1px solid black' }}>
18
+ There is text hidden between the brackets [
19
+ <VisuallyHidden>Can't see me!</VisuallyHidden>]
20
+ </div>
21
+ );
22
+ ```
package/dist/cjs/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/visually-hidden",
3
- "version": "0.1.2",
3
+ "version": "1.0.0",
4
4
  "sideEffects": false
5
5
  }
package/dist/cjs/visually-hidden.js CHANGED
@@ -8,6 +8,7 @@ exports.default = void 0;
8
8
  var _core = require("@emotion/core");
9
9
 
10
10
  /** @jsx jsx */
11
+ // eslint-disable-next-line @atlaskit/design-system/use-visually-hidden
11
12
  var visuallyHiddenStyles = (0, _core.css)({
12
13
  width: '1px',
13
14
  height: '1px',
@@ -39,10 +40,14 @@ var visuallyHiddenStyles = (0, _core.css)({
39
40
 
40
41
  var VisuallyHidden = function VisuallyHidden(_ref) {
41
42
  var children = _ref.children,
42
- testId = _ref.testId;
43
+ testId = _ref.testId,
44
+ role = _ref.role,
45
+ id = _ref.id;
43
46
  return (0, _core.jsx)("span", {
47
+ id: id,
44
48
  "data-testid": testId,
45
- css: visuallyHiddenStyles
49
+ css: visuallyHiddenStyles,
50
+ role: role
46
51
  }, children);
47
52
  };
48
53
 
package/dist/es2019/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/visually-hidden",
3
- "version": "0.1.2",
3
+ "version": "1.0.0",
4
4
  "sideEffects": false
5
5
  }
package/dist/es2019/visually-hidden.js CHANGED
@@ -1,5 +1,6 @@
1
1
  /** @jsx jsx */
2
2
  import { css, jsx } from '@emotion/core';
3
+ // eslint-disable-next-line @atlaskit/design-system/use-visually-hidden
3
4
  const visuallyHiddenStyles = css({
4
5
  width: '1px',
5
6
  height: '1px',
@@ -31,11 +32,15 @@ const visuallyHiddenStyles = css({
31
32
 
32
33
  const VisuallyHidden = ({
33
34
  children,
34
- testId
35
+ testId,
36
+ role,
37
+ id
35
38
  }) => {
36
39
  return jsx("span", {
40
+ id: id,
37
41
  "data-testid": testId,
38
- css: visuallyHiddenStyles
42
+ css: visuallyHiddenStyles,
43
+ role: role
39
44
  }, children);
40
45
  };
41
46
 
package/dist/esm/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/visually-hidden",
3
- "version": "0.1.2",
3
+ "version": "1.0.0",
4
4
  "sideEffects": false
5
5
  }
package/dist/esm/visually-hidden.js CHANGED
@@ -1,5 +1,6 @@
1
1
  /** @jsx jsx */
2
2
  import { css, jsx } from '@emotion/core';
3
+ // eslint-disable-next-line @atlaskit/design-system/use-visually-hidden
3
4
  var visuallyHiddenStyles = css({
4
5
  width: '1px',
5
6
  height: '1px',
@@ -31,10 +32,14 @@ var visuallyHiddenStyles = css({
31
32
 
32
33
  var VisuallyHidden = function VisuallyHidden(_ref) {
33
34
  var children = _ref.children,
34
- testId = _ref.testId;
35
+ testId = _ref.testId,
36
+ role = _ref.role,
37
+ id = _ref.id;
35
38
  return jsx("span", {
39
+ id: id,
36
40
  "data-testid": testId,
37
- css: visuallyHiddenStyles
41
+ css: visuallyHiddenStyles,
42
+ role: role
38
43
  }, children);
39
44
  };
40
45
 
package/dist/types/types.d.ts CHANGED
@@ -10,4 +10,13 @@ export declare type VisuallyHiddenProps = {
10
10
  * The element or elements that should be hidden.
11
11
  */
12
12
  children: ReactNode;
13
+ /**
14
+ * Role attribute is passed on to the span to aid screen readers.
15
+ */
16
+ role?: string;
17
+ /**
18
+ * An id may be appropriate for this component if used in conjunction with `aria-describedby`
19
+ * on a paired element.
20
+ */
21
+ id?: string;
13
22
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/visually-hidden",
3
- "version": "0.1.2",
3
+ "version": "1.0.0",
4
4
  "description": "A composable element that hides elements from the screen while keeping them accessible.",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -9,10 +9,10 @@
9
9
  },
10
10
  "atlassian": {
11
11
  "team": "Design System Team",
12
- "inPublicMirror": false,
13
- "releaseModel": "continuous",
12
+ "inPublicMirror": true,
13
+ "releaseModel": "scheduled",
14
14
  "website": {
15
- "name": "VisuallyHidden"
15
+ "name": "Visually hidden"
16
16
  }
17
17
  },
18
18
  "repository": "https://bitbucket.org/atlassian/atlassian-frontend",
@@ -33,7 +33,6 @@
33
33
  "react": "^16.8.0"
34
34
  },
35
35
  "devDependencies": {
36
- "@atlaskit/build-utils": "*",
37
36
  "@atlaskit/docs": "*",
38
37
  "@atlaskit/ssr": "*",
39
38
  "@atlaskit/visual-regression": "^0.7.0",
@@ -51,7 +50,10 @@
51
50
  },
52
51
  "@repo/internal": {
53
52
  "design-system": "v1",
54
- "styling": "emotion",
53
+ "styling": [
54
+ "static",
55
+ "emotion"
56
+ ],
55
57
  "ui-components": "lite-mode",
56
58
  "analytics": "analytics-next",
57
59
  "theming": "tokens",