chore: add VisuallyHidden

sikka-software · Aug 13, 2024 · 57de517 · 57de517
1 parent ace146e
commit 57de517
Show file tree

Hide file tree

Showing 7 changed files with 73 additions and 3 deletions.
diff --git a/apps/docs/CHANGELOG.md b/apps/docs/CHANGELOG.md
@@ -1,5 +1,12 @@
 # hawa-docs
 
+## 0.0.108
+
+### Patch Changes
+
+- Updated dependencies
+ - @sikka/hawa@0.46.0
+
 ## 0.0.107
 
 ### Patch Changes

diff --git a/apps/docs/package.json b/apps/docs/package.json
@@ -1,6 +1,6 @@
 {
  "name": "hawa-docs",
- "version": "0.0.107",
+ "version": "0.0.108",
  "private": true,
  "scripts": {
  "dev": "next dev -p 3001",

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @sikka/hawa
 
+## 0.46.0
+
+### Minor Changes
+
+- Adds `VisuallyHidden` to be used for better accessibility
+
 ## 0.45.1
 
 ### Patch Changes

diff --git a/packages/components/elements/visuallyHidden/VisuallyHidden.tsx b/packages/components/elements/visuallyHidden/VisuallyHidden.tsx
@@ -0,0 +1,50 @@
+import * as React from "react";
+
+/* -------------------------------------------------------------------------------------------------
+ * VisuallyHidden
+ * -----------------------------------------------------------------------------------------------*/
+
+const NAME = "VisuallyHidden";
+
+type VisuallyHiddenElement = React.ElementRef<"span">;
+type PrimitiveSpanProps = React.ComponentPropsWithoutRef<"span">;
+interface VisuallyHiddenProps extends PrimitiveSpanProps {}
+
+const VisuallyHidden = React.forwardRef<
+ VisuallyHiddenElement,
+ VisuallyHiddenProps
+>((props, forwardedRef) => {
+ return (
+ <span
+ {...props}
+ ref={forwardedRef}
+ style={{
+ // See: https://github.com/twbs/bootstrap/blob/master/scss/mixins/_screen-reader.scss
+ position: "absolute",
+ border: 0,
+ width: 1,
+ height: 1,
+ padding: 0,
+ margin: -1,
+ overflow: "hidden",
+ clip: "rect(0, 0, 0, 0)",
+ whiteSpace: "nowrap",
+ wordWrap: "normal",
+ ...props.style,
+ }}
+ />
+ );
+});
+
+VisuallyHidden.displayName = NAME;
+
+/* -----------------------------------------------------------------------------------------------*/
+
+const Root = VisuallyHidden;
+
+export {
+ VisuallyHidden,
+ //
+ Root,
+};
+export type { VisuallyHiddenProps };
diff --git a/packages/components/package.json b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@sikka/hawa",
- "version": "0.45.1",
+ "version": "0.46.0",
  "description": "Modern UI Kit made with Tailwind",
  "author": {
  "name": "Sikka Software",

diff --git a/packages/storybook/CHANGELOG.md b/packages/storybook/CHANGELOG.md
@@ -1,5 +1,12 @@
 # hawa-storybook
 
+## 0.26.130
+
+### Patch Changes
+
+- Updated dependencies
+ - @sikka/hawa@0.46.0
+
 ## 0.26.129
 
 ### Patch Changes

diff --git a/packages/storybook/package.json b/packages/storybook/package.json
@@ -1,6 +1,6 @@
 {
  "name": "hawa-storybook",
- "version": "0.26.129",
+ "version": "0.26.130",
  "description": "Modern UI Kit made with Tailwind",
  "author": {
  "name": "Sikka Software",