@atlaskit/visually-hidden 0.1.2 → 1.0.2

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/visually-hidden
 
+## 1.0.2
+
+### Patch Changes
+
+- [`8d4228767b0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8d4228767b0) - Upgrade Typescript from `4.2.4` to `4.3.5`.
+
+## 1.0.1
+
+### Patch Changes
+
+- [`cb2392f6d33`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cb2392f6d33) - Upgrade to TypeScript 4.2.4
+
+## 1.0.0
+
+### Major Changes
+
+- [`08ce7935675`](https://bitbucket.org/atlassian/atlassian-frontend/commits/08ce7935675) - Update `@atlaskit/visually-hidden` to v1. No breaking changes from previous version.
+
+  `@atlaskit/visually-hidden` now exposes an additional `id` prop. This prop is exposed to allow consumers to pair the component with the
+  `aria-describedby` HTML attribute.
+
 ## 0.1.2
 
 ### Patch Changes

package/README.md

@@ -1,7 +1,22 @@
-# VisuallyHidden
+# Visually hidden
 
 A composable element that hides elements from the screen while keeping them accessible.
 
+## Installation
+
+```sh
+yarn add @atlaskit/visually-hidden
+```
+
 ## Usage
 
-`import VisuallyHidden from '@atlaskit/visually-hidden';`
+```jsx
+import VisuallyHidden from '@atlaskit/visually-hidden';
+
+export default () => (
+  <div style={{ border: '1px solid black' }}>
+    There is text hidden between the brackets [
+    <VisuallyHidden>Can't see me!</VisuallyHidden>]
+  </div>
+);
+```

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/visually-hidden",
-	"version": "0.1.2",
+	"version": "1.0.2",
 	"sideEffects": false
 }

package/dist/cjs/visually-hidden.js

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _core = require("@emotion/core");
 
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/design-system/use-visually-hidden
 var visuallyHiddenStyles = (0, _core.css)({
   width: '1px',
   height: '1px',
@@ -39,10 +40,14 @@ var visuallyHiddenStyles = (0, _core.css)({
 
 var VisuallyHidden = function VisuallyHidden(_ref) {
   var children = _ref.children,
-      testId = _ref.testId;
+      testId = _ref.testId,
+      role = _ref.role,
+      id = _ref.id;
   return (0, _core.jsx)("span", {
+    id: id,
     "data-testid": testId,
-    css: visuallyHiddenStyles
+    css: visuallyHiddenStyles,
+    role: role
   }, children);
 };
 

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/visually-hidden",
-	"version": "0.1.2",
+	"version": "1.0.2",
 	"sideEffects": false
 }

package/dist/es2019/visually-hidden.js

@@ -1,5 +1,6 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
+// eslint-disable-next-line @atlaskit/design-system/use-visually-hidden
 const visuallyHiddenStyles = css({
   width: '1px',
   height: '1px',
@@ -31,11 +32,15 @@ const visuallyHiddenStyles = css({
 
 const VisuallyHidden = ({
   children,
-  testId
+  testId,
+  role,
+  id
 }) => {
   return jsx("span", {
+    id: id,
     "data-testid": testId,
-    css: visuallyHiddenStyles
+    css: visuallyHiddenStyles,
+    role: role
   }, children);
 };
 

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/visually-hidden",
-	"version": "0.1.2",
+	"version": "1.0.2",
 	"sideEffects": false
 }

package/dist/esm/visually-hidden.js

@@ -1,5 +1,6 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
+// eslint-disable-next-line @atlaskit/design-system/use-visually-hidden
 var visuallyHiddenStyles = css({
   width: '1px',
   height: '1px',
@@ -31,10 +32,14 @@ var visuallyHiddenStyles = css({
 
 var VisuallyHidden = function VisuallyHidden(_ref) {
   var children = _ref.children,
-      testId = _ref.testId;
+      testId = _ref.testId,
+      role = _ref.role,
+      id = _ref.id;
   return jsx("span", {
+    id: id,
     "data-testid": testId,
-    css: visuallyHiddenStyles
+    css: visuallyHiddenStyles,
+    role: role
   }, children);
 };
 

package/dist/types/types.d.ts

@@ -10,4 +10,13 @@ export declare type VisuallyHiddenProps = {
      * The element or elements that should be hidden.
      */
     children: ReactNode;
+    /**
+     * Role attribute is passed on to the span to aid screen readers.
+     */
+    role?: string;
+    /**
+     * An id may be appropriate for this component if used in conjunction with `aria-describedby`
+     * on a paired element.
+     */
+    id?: string;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/visually-hidden",
-  "version": "0.1.2",
+  "version": "1.0.2",
   "description": "A composable element that hides elements from the screen while keeping them accessible.",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -9,13 +9,14 @@
   },
   "atlassian": {
     "team": "Design System Team",
-    "inPublicMirror": false,
-    "releaseModel": "continuous",
+    "inPublicMirror": true,
+    "releaseModel": "scheduled",
     "website": {
-      "name": "VisuallyHidden"
+      "name": "Visually hidden",
+      "category": "Components"
     }
   },
-  "repository": "https://bitbucket.org/atlassian/atlassian-frontend",
+  "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "module:es2019": "dist/es2019/index.js",
@@ -33,15 +34,14 @@
     "react": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/build-utils": "*",
     "@atlaskit/docs": "*",
     "@atlaskit/ssr": "*",
-    "@atlaskit/visual-regression": "^0.7.0",
+    "@atlaskit/visual-regression": "^0.8.0",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0",
     "@testing-library/react": "^8.0.1",
     "react-dom": "^16.8.0",
-    "typescript": "3.9.6",
+    "typescript": "4.3.5",
     "wait-for-expect": "^1.2.0"
   },
   "techstack": {
@@ -50,13 +50,18 @@
       "circular-dependencies": "file-and-folder-level"
     },
     "@repo/internal": {
+      "dom-events": "use-bind-event-listener",
       "design-system": "v1",
-      "styling": "emotion",
+      "styling": [
+        "static",
+        "emotion"
+      ],
       "ui-components": "lite-mode",
       "analytics": "analytics-next",
       "theming": "tokens",
       "deprecation": "no-deprecated-imports"
     }
   },
+  "homepage": "https://atlaskit.atlassian.com/packages/design-system/visually-hidden",
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.0"
 }

package/report.api.md

@@ -0,0 +1,53 @@
+## API Report File for "@atlaskit/visually-hidden"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+````ts
+import { FC } from 'react';
+import { ReactNode } from 'react';
+
+/**
+ * __Visually hidden__
+ *
+ * A composable element to apply a visually hidden effect to children.
+ * Useful for accessibility compliance.
+ *
+ * @example
+ * ```jsx
+ * import VisuallyHidden from '@atlaskit/visually-hidden';
+ *
+ * export default () => (
+ *   <div style={{ border: '1px solid black' }}>
+ *      There is text hidden between the brackets [
+ *      <VisuallyHidden>Can't see me!</VisuallyHidden>]
+ *   </div>
+ * );
+ * ```
+ */
+declare const VisuallyHidden: FC<VisuallyHiddenProps>;
+export default VisuallyHidden;
+
+export declare type VisuallyHiddenProps = {
+  /**
+   * A `testId` prop is provided for specified elements, which is a unique
+   * string that appears as a data attribute `data-testid` in the rendered code,
+   * serving as a hook for automated tests
+   */
+  testId?: string;
+  /**
+   * The element or elements that should be hidden.
+   */
+  children: ReactNode;
+  /**
+   * Role attribute is passed on to the span to aid screen readers.
+   */
+  role?: string;
+  /**
+   * An id may be appropriate for this component if used in conjunction with `aria-describedby`
+   * on a paired element.
+   */
+  id?: string;
+};
+
+export {};
+````