> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# مخفي بصريًا

> أبقِ النص الداعم متاحًا للتقنيات المساعدة دون عرضه بصريًا.

## نظرة عامة

يعرض `VisuallyHidden` عنصر `span` مخفيًا بصريًا. يبقى محتواه في شجرة إمكانية الوصول ويمكنه توفير اسم يمكن الوصول إليه. يقبل خصائص span الأصلية ومرجع span وتركيب `render` الخاص بـ Base UI. استورد `VisuallyHiddenProps` من نقطة الإدخال نفسها.

**Light**

[مثال على الإخفاء البصري (light)](https://storybook.twenty.com/iframe.html?id=ui-accessibility-visuallyhidden--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[مثال على الإخفاء البصري (dark)](https://storybook.twenty.com/iframe.html?id=ui-accessibility-visuallyhidden--display\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-accessibility-visuallyhidden--display)

## استخدام

```tsx theme={null}
import { Button } from 'twenty-ui/primitives/input';
import { VisuallyHidden } from 'twenty-ui/primitives/accessibility';
import { IconPlus } from 'twenty-ui/icon';

type AddRecordActionProps = { onAdd: () => void };

export const AddRecordAction = ({ onAdd }: AddRecordActionProps) => (
  <Button onClick={onAdd}>
    <IconPlus aria-hidden />
    <VisuallyHidden>Add record</VisuallyHidden>
  </Button>
);
```

استخدم تسمية مرئية عندما تسمح المساحة بذلك. بالنسبة إلى عناصر التحكم التي تقبل `aria-label` بالفعل، تُعد تلك السمة طريقة أخرى لتوفير اسم يمكن الوصول إليه.

## المحتوى المخفي

ضع النص الداعم داخل الغلاف. تجنب وضع عناصر تحكم قابلة للتركيز داخله: يظل الغلاف مخفيًا بصريًا عندما تتلقى عناصره الفرعية التركيز. لا يضيف منطقة حية، ولا يزيل المحتوى من التقنية المساعدة، ولا يخفي البيانات السرية.

استخدم `id` لربط الأوصاف المخفية بـ `aria-describedby`. تستهدف السمات الأصلية و`className` و`style` و`ref` عنصر span المخفي أو العنصر المُوفَّر عبر `render`. راجع [إمكانية الوصول](https://docs.twenty.com/ar/ui/accessibility.md) للاطلاع على أنماط التسمية والإشعار.

## الخصائص

**children** `ReactNode`

Content hidden visually while remaining available to assistive technology.

**render** `ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | ComponentRenderFn\<HTMLProps, \{\}\>`

Element or render function composed with the hidden span props and ref.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.