> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: A11y

## Article: A11y

## Article Link: https://dev.wix.com/docs/site-extensions/editor-react-components/editor-react-types/reference/a11y.md

## Article Content:

import { Property, PropertyList, ExpandableSection } from "@wix/docs-ui/content";

# A11y

Accessibility attributes the Wix user configures for a component, mapping to ARIA attributes and
related HTML. Use it for a field that carries a component's role, labels, states, and the
tag it renders as. At runtime it's an object whose fields you spread onto the rendered
element. Every field is optional, so read only the ones your component applies.

## Component

In your component code, import the `A11y` type from `@wix/editor-react-types`:

```ts
import type { A11y } from '@wix/editor-react-types';
```

An `A11y` object has the following properties:

<PropertyList bordered>
  <Property
    name="ariaAtomic"
    type="boolean | 'false' | 'true'"
    description="The aria-atomic attribute. Indicates whether assistive technologies should present the entire region as a whole."
  />
  <Property
    name="ariaAutocomplete"
    type="'none' | 'inline' | 'list' | 'both'"
    description="The aria-autocomplete attribute. Indicates the type of autocomplete behavior for an input."
  />
  <Property
    name="ariaBusy"
    type="boolean | 'false' | 'true'"
    description="The aria-busy attribute. Indicates the component is being modified and assistive technologies should wait."
  />
  <Property
    name="ariaControls"
    type="string"
    description="The aria-controls attribute. Identifies the element whose contents or presence are controlled by this component."
  />
  <Property
    name="ariaCurrent"
    type="boolean | 'false' | 'true' | 'page' | 'step' | 'location' | 'date' | 'time'"
    description="The aria-current attribute. Indicates the component that represents the current item within a container or set."
  />
  <Property
    name="ariaDescribedby"
    type="string"
    description="The aria-describedby attribute. Identifies the element that describes this component."
  />
  <Property
    name="ariaDisabled"
    type="boolean | 'false' | 'true'"
    description="The aria-disabled attribute. Indicates that the component is perceivable but disabled."
  />
  <Property
    name="ariaErrormessage"
    type="string"
    description="The aria-errormessage attribute. Identifies the element that provides an error message for this component."
  />
  <Property
    name="ariaExpanded"
    type="boolean | 'false' | 'true'"
    description="The aria-expanded attribute. Indicates whether a collapsible component is expanded or collapsed."
  />
  <Property
    name="ariaHaspopup"
    type="boolean | 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog'"
    description="The aria-haspopup attribute. Indicates the availability and type of an interactive popup component."
  />
  <Property
    name="ariaHidden"
    type="boolean | 'false' | 'true'"
    description="The aria-hidden attribute. Hides the component from assistive technologies."
  />
  <Property
    name="ariaInvalid"
    type="boolean | 'false' | 'true' | 'grammar' | 'spelling'"
    description="The aria-invalid attribute. Indicates the entered value does not conform to the expected format."
  />
  <Property
    name="ariaLabel"
    type="string"
    description="The aria-label attribute. Defines a string value that labels the component."
  />
  <Property
    name="ariaLabelledby"
    type="string"
    description="The aria-labelledby attribute. Identifies the element that labels this component."
  />
  <Property
    name="ariaLevel"
    type="number"
    description="The aria-level attribute. Defines the hierarchical level of a component within a structure."
  />
  <Property
    name="ariaLive"
    type="'off' | 'assertive' | 'polite'"
    description="The aria-live attribute. Indicates that the component will be updated and describes the types of updates."
  />
  <Property
    name="ariaMultiline"
    type="boolean | 'false' | 'true'"
    description="The aria-multiline attribute. Indicates whether a text box accepts multiple lines of input."
  />
  <Property
    name="ariaOwns"
    type="string"
    description="The aria-owns attribute. Identifies a component to define a visual, functional, or contextual parent/child relationship."
  />
  <Property
    name="ariaPressed"
    type="boolean | 'false' | 'mixed' | 'true'"
    description="The aria-pressed attribute. Indicates the current pressed state of a toggle button."
  />
  <Property
    name="ariaRelevant"
    type="'additions' | 'additions text' | 'all' | 'removals' | 'text'"
    description="The aria-relevant attribute. Indicates what notifications the user agent triggers when the accessibility tree is modified."
  />
  <Property
    name="ariaRoledescription"
    type="string"
    description="The aria-roledescription attribute. Defines a human-readable description for the role of the component."
  />
  <Property
    name="multiline"
    type="boolean"
    description="Whether the component supports multiline input."
  />
  <Property
    name="role"
    type="string"
    description="The role attribute. Defines the semantic role of the component."
  />
  <Property
    name="tabIndex"
    type="number"
    description="The tabindex attribute. Controls the component's position in keyboard focus order."
  />
  <Property name="tag" type="string">
    The HTML tag to render the component as, such as `'h1'` or `'button'`.
  </Property>
</PropertyList>

### Usage

Your code either consumes a value of type `A11y` or produces one:

::::tabs
:::Consumers
In a component that receives an `A11y`, spread the fields onto the rendered element:

```tsx
import type { A11y } from '@wix/editor-react-types';

function CloseButton({ a11y }: { a11y?: A11y }) {
  return (
    <button
      role={a11y?.role}
      aria-label={a11y?.ariaLabel}
      tabIndex={a11y?.tabIndex}
    />
  );
}
```
:::
:::Producers
When your code produces an `A11y`, for a context or a function return, set the fields your
consumer reads:

```ts
import type { A11y } from '@wix/editor-react-types';

const a11y: A11y = {
  role: 'button',
  ariaLabel: 'Close dialog',
  tabIndex: 0,
};
```
:::
::::

## Manifest

In your manifest, declare the field with the `a11y` dataType:

```json
{ "dataType": "a11y" }
```

### Declaration

Declare an `a11y` field in one of these ways, depending on where the value comes from:

::::tabs
:::Data-property
Declare it as a data property when the Wix user should configure the `a11y` in a panel. It
takes `dataType`, `displayName`, an optional `defaultValue`, and the required options that
follow:

```json
{
  "a11y": {
    "dataType": "a11y",
    "displayName": "Accessibility Settings",
    "defaultValue": {
      "role": "button",
      "ariaLabel": "Close dialog",
      "tabIndex": 0
    },
    "a11y": {
      "attributes": ["role", "ariaLabel", "tabIndex"]
    }
  }
}
```

#### Options

An `a11y` data property accepts the following options:

<PropertyList bordered>
  <Property
    name="attributes"
    type="string[]"
    required
    description="The attributes the Wix user may configure. An empty list allows all of them."
  >
    <ExpandableSection name="attributes values">
      <PropertyList>
        <Property name="'tabIndex'" description="The tabindex attribute." />
        <Property name="'ariaLevel'" description="The aria-level attribute." />
        <Property name="'ariaExpanded'" description="The aria-expanded attribute." />
        <Property name="'ariaDisabled'" description="The aria-disabled attribute." />
        <Property name="'ariaAtomic'" description="The aria-atomic attribute." />
        <Property name="'ariaHidden'" description="The aria-hidden attribute." />
        <Property name="'ariaBusy'" description="The aria-busy attribute." />
        <Property name="'multiline'" description="Multiline instructions added to aria-label." />
        <Property name="'ariaAutocomplete'" description="Autocomplete instructions added to aria-label." />
        <Property name="'ariaPressed'" description="The aria-pressed attribute." />
        <Property name="'ariaHaspopup'" description="The aria-haspopup attribute." />
        <Property name="'ariaRelevant'" description="The aria-relevant attribute." />
        <Property name="'role'" description="The role attribute." />
        <Property name="'ariaLive'" description="The aria-live attribute." />
        <Property name="'ariaCurrent'" description="The aria-current attribute." />
        <Property name="'ariaLabel'" description="The aria-label text." />
        <Property name="'ariaRoledescription'" description="The aria-roledescription text." />
        <Property name="'ariaDescribedby'" description="The aria-describedby attribute." />
        <Property name="'ariaLabelledby'" description="The aria-labelledby attribute." />
        <Property name="'ariaErrormessage'" description="The aria-errormessage text." />
        <Property name="'ariaOwns'" description="The aria-owns attribute." />
        <Property name="'ariaControls'" description="The aria-controls attribute." />
        <Property name="'tag'" description="The HTML tag the element renders as." />
        <Property name="'ariaMultiline'" description="The aria-multiline attribute." />
        <Property name="'ariaInvalid'" description="The aria-invalid attribute." />
      </PropertyList>
    </ExpandableSection>
  </Property>
</PropertyList>
:::
:::Context-item
Declare it as a context item when your component supplies the attributes to descendant
components. It takes just `dataType` and `displayName`:

```json
{
  "a11y": {
    "dataType": "a11y",
    "displayName": "Accessibility Settings"
  }
}
```
:::
:::Function-parameter-and-return
Declare it on a function when the function accepts or returns accessibility attributes. It
takes `dataType` and an optional `displayName`, and a parameter may also set `optional`:

```json
{
  "parameters": [
    {
      "dataType": "a11y",
      "displayName": "Accessibility Settings"
    }
  ],
  "returns": {
    "dataType": "a11y"
  }
}
```
:::
::::