Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@atlaskit/visually-hidden

Package Overview
Dependencies
Maintainers
1
Versions
19
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@atlaskit/visually-hidden - npm Package Compare versions

Comparing version 1.1.2 to 1.2.0

6

CHANGELOG.md
# @atlaskit/visually-hidden
## 1.2.0
### Minor Changes
- [`56507598609`](https://bitbucket.org/atlassian/atlassian-frontend/commits/56507598609) - Skip minor dependency bump
## 1.1.2

@@ -4,0 +10,0 @@

2

dist/cjs/index.js
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {

@@ -14,3 +13,2 @@ value: true

});
var _visuallyHidden = _interopRequireDefault(require("./visually-hidden"));
{
"name": "@atlaskit/visually-hidden",
"version": "1.1.2",
"version": "1.2.0",
"sideEffects": false
}

@@ -7,6 +7,5 @@ "use strict";

exports.default = void 0;
var _react = require("@emotion/react");
/** @jsx jsx */
/** @jsx jsx */
// eslint-disable-next-line @atlaskit/design-system/use-visually-hidden

@@ -23,2 +22,3 @@ var visuallyHiddenStyles = (0, _react.css)({

});
/**

@@ -42,8 +42,7 @@ * __Visually hidden__

*/
var VisuallyHidden = function VisuallyHidden(_ref) {
var children = _ref.children,
testId = _ref.testId,
role = _ref.role,
id = _ref.id;
testId = _ref.testId,
role = _ref.role,
id = _ref.id;
return (0, _react.jsx)("span", {

@@ -56,4 +55,3 @@ id: id,

};
var _default = VisuallyHidden;
exports.default = _default;
{
"name": "@atlaskit/visually-hidden",
"version": "1.1.2",
"version": "1.2.0",
"sideEffects": false
}
/** @jsx jsx */
import { css, jsx } from '@emotion/react';

@@ -14,2 +15,3 @@ // eslint-disable-next-line @atlaskit/design-system/use-visually-hidden

});
/**

@@ -33,3 +35,2 @@ * __Visually hidden__

*/
const VisuallyHidden = ({

@@ -48,3 +49,2 @@ children,

};
export default VisuallyHidden;
{
"name": "@atlaskit/visually-hidden",
"version": "1.1.2",
"version": "1.2.0",
"sideEffects": false
}
/** @jsx jsx */
import { css, jsx } from '@emotion/react';

@@ -14,2 +15,3 @@ // eslint-disable-next-line @atlaskit/design-system/use-visually-hidden

});
/**

@@ -33,8 +35,7 @@ * __Visually hidden__

*/
var VisuallyHidden = function VisuallyHidden(_ref) {
var children = _ref.children,
testId = _ref.testId,
role = _ref.role,
id = _ref.id;
testId = _ref.testId,
role = _ref.role,
id = _ref.id;
return jsx("span", {

@@ -47,3 +48,2 @@ id: id,

};
export default VisuallyHidden;
import { ReactNode } from 'react';
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.

@@ -14,3 +8,3 @@ */

/**
* Role attribute is passed on to the span to aid screen readers.
* An ARIA role attribute to aid screen readers.
*/

@@ -23,2 +17,8 @@ role?: string;

id?: string;
/**
* 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;
};
{
"name": "@atlaskit/visually-hidden",
"version": "1.1.2",
"description": "A composable element that hides elements from the screen while keeping them accessible.",
"version": "1.2.0",
"description": "A utility that hides content from the screen while retaining readability by screen readers for accessibility.",
"author": "Atlassian Pty Ltd",

@@ -11,3 +11,2 @@ "license": "Apache-2.0",

"atlassian": {
"disableProductCI": true,
"team": "Design System Team",

@@ -26,10 +25,2 @@ "inPublicMirror": true,

"types": "dist/types/index.d.ts",
"typesVersions": {
">=4.0 <4.5": {
"*": [
"dist/types-ts4.0/*",
"dist/types-ts4.0/index.d.ts"
]
}
},
"sideEffects": false,

@@ -48,5 +39,9 @@ "atlaskit:src": "src/index.tsx",

"devDependencies": {
"@atlaskit/button": "^16.7.0",
"@atlaskit/docs": "*",
"@atlaskit/ds-lib": "^2.0.1",
"@atlaskit/ds-lib": "^2.2.0",
"@atlaskit/section-message": "^6.4.0",
"@atlaskit/ssr": "*",
"@atlaskit/toggle": "^12.6.0",
"@atlaskit/tokens": "^1.3.0",
"@atlaskit/visual-regression": "^0.8.0",

@@ -74,8 +69,10 @@ "@atlaskit/webdriver-runner": "*",

"analytics": "analytics-next",
"theming": "tokens",
"design-tokens": [
"color"
],
"deprecation": "no-deprecated-imports"
}
},
"homepage": "https://atlaskit.atlassian.com/packages/design-system/visually-hidden",
"homepage": "https://atlassian.design/components/visually-hidden/",
"prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.0"
}
# Visually hidden
A composable element that hides elements from the screen while keeping them accessible.
A utility that hides content from the screen while retaining readability by screen readers for accessibility.

@@ -13,11 +13,2 @@ ## Installation

```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>
);
```
[View documentation](https://atlassian.design/components/visually-hidden/).

@@ -1,55 +0,35 @@

## API Report File for "@atlaskit/visually-hidden".
<!-- API Report Version: 2.3 -->
> Do not edit this file. This report is auto-generated by [API Extractor](https://api-extractor.com/).
## API Report File for "@atlaskit/visually-hidden"
[Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
> Do not edit this file. This report is auto-generated using [API Extractor](https://api-extractor.com/).
> [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
````ts
### Table of contents
- [Main Entry Types](#main-entry-types)
### Main Entry Types
<!--SECTION START: Main Entry Types-->
```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>;
// @public
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
*/
// @public (undocumented)
export type VisuallyHiddenProps = {
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 {};
````
// (No @packageDocumentation comment for this package)
```
<!--SECTION END: Main Entry Types-->
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc