npm i @accessible/disclosure

反应的无障碍和多功能披露部分

特征

• 样式不可识别 您可以使用您选择的样式库 。 这个 与CSS-in-JS,SASS,平原CSS,平原合作 style 物体,任何东西!
• 方便门户 当配置时, 披露目标将变成您选择的回放门户 这样做.
• a11y/aria达标 此组件与框外的屏幕阅读器一起工作并管理 专注给你.

快速启动

检查一下这个例子 代码框

import * as React from 'react'
import * as Disclosure from '@accessible/disclosure'

const Component = () => (
  <Disclosure.Disclosure>
    <Disclosure.Trigger>
      <button>Open me</button>
    </Disclosure.Trigger>

    <Disclosure.Target>
      <div className='my-disclosure'>
        <Disclosure.CloseButton>
          <button>Close me</button>
        </Disclosure.CloseButton>

        <div>I've been disclosed!</div>
      </div>
    </Disclosure.Target>
  </Disclosure.Disclosure>
)

API 密码

构成部分

钩子

< 解密>

此组件为您的披露目标和触发设定了上下文,并包含一些 配置选项.

道具

使用 A11Y目标( 目标, 选项 )

创建无头披露目标的反向钩 WAI-ARIA 撰写惯例。 。 。 .

参数

使用A11目标选项

export interface UseA11yTargetOptions {
  /**
   * Adds this class name to props when the disclosure is open
   */
  openClass?: string
  /**
   * Adds this class name to props when the disclosure is closed
   */
  closedClass?: string
  /**
   * Adds this style to props when the disclosure is open
   */
  openStyle?: React.CSSProperties
  /**
   * Adds this style to props when the disclosure is closed
   */
  closedStyle?: React.CSSProperties
  /**
   * Prevents the `window` from scrolling when the target is
   * focused after opening.
   */
  preventScroll?: boolean
  /**
   * When `true`, this closes the target element when the `Escape`
   * key is pressed.
   * @default true
   */
  closeOnEscape?: boolean
}

回返

interface A11yProps {
  readonly 'aria-hidden': boolean
  readonly id: string | undefined
  readonly className: string | undefined
  readonly style: {
    visibility: 'visible' | 'hidden'
  } & React.CSSProperties
}

示例

import * as React from 'react'
import {useA11yTarget} from '@accessible/disclosure'

const MyTarget = () => {
  const ref = React.useRef(null)
  const a11yProps = useA11yTarget(ref, {preventScroll: true})

  return (
    <div ref={ref} {...a11yProps}>
      I am the disclosure content
    </div>
  )
}

<目标>

此组件包装任何反应元素并将其变成披露目标.

道具

示例

<Target>
  <div className='alert'>Alert</div>
</Target>

// <div
//   class="alert"
//   aria-hidden="true"
//   id="🅰12"
//   style="visibility: hidden;"
// >
//   Alert
// </div>

使用 A11yTrigger( 目标, 选项) 吗

创建无头披露触发器的反应钩 WAI-ARIA 撰写惯例。 。 。 . 除了为您组件提供无障碍道具之外, 此钩子还会添加事件 用于实际要素与假要素之间的互操作性,例如:. 财务报告和审定财务报表

参数

使用A11yTrigger 选项

export interface UseA11yTriggerOptions {
  /**
   * Adds this class name to props when the disclosure is open
   */
  openClass?: string
  /**
   * Adds this class name to props when the disclosure is closed
   */
  closedClass?: string
  /**
   * Adds this style to props when the disclosure is open
   */
  openStyle?: React.CSSProperties
  /**
   * Adds this style to props when the disclosure is closed
   */
  closedStyle?: React.CSSProperties
  /**
   * Adds an onClick handler in addition to the default one that
   * toggles the disclosure's open state.
   */
  onClick?: (e: MouseEvent) => any
}

回返

interface A11yProps {
  readonly 'aria-controls': string | undefined
  readonly 'aria-expanded': boolean
  readonly role: 'button'
  readonly tabIndex: 0
  readonly className: string | undefined
  readonly style: React.CSSProperties | undefined
}

示例

import * as React from 'react'
import {useA11yTrigger} from '@accessible/disclosure'

const MyTrigger = () => {
  const ref = React.useRef(null)
  const a11yProps = useA11yTrigger(ref, {
    openClass: 'open',
    closedClass: 'closed',
  })

  return (
    <button ref={ref} {...a11yProps}>
      Clicking me toggles the disclosure content
    </button>
  )
}

调试器( T)

此组件将任何反应元素包起来并添加一个 onClick 切换打开状态的处理器 披露目标.

道具

<Trigger on='click'>
  <button className='my-button'>Open me!</button>
</Trigger>

// <button
//   class="my-button"
//   aria-controls="🅰12"
//   aria-expanded="false"
// >
//   Open me!
// </button>

使用 A11y 关闭按钮( 目标, 选项 )

创建无头密钥的反向钩 WAI-ARIA 撰写惯例。 。 。 . 除了为您组件提供无障碍道具之外, 此钩子还会添加事件 用于实际要素与假要素之间的互操作性,例如:. 财务报告和审定财务报表

参数

使用 A11y 关闭按钮选项

export interface UseA11yCloseButtonOptions {
  /**
   * Adds an onClick handler in addition to the default one that
   * closes the disclosure.
   */
  onClick?: (e: MouseEvent) => any
}

回返

interface A11yProps {
  readonly 'aria-controls': string | undefined
  readonly 'aria-expanded': boolean
  readonly 'aria-label': 'Close'
  readonly role: 'button'
  readonly tabIndex: 0
}

示例

import * as React from 'react'
import {useA11yCloseButton} from '@accessible/disclosure'

const MyTrigger = () => {
  const ref = React.useRef(null)
  const a11yProps = useA11yCloseButton(ref, {
    onClick: () => console.log('Closing!'),
  })

  return (
    <button ref={ref} {...a11yProps}>
      Clicking me closes the disclosure content
    </button>
  )
}

< 关闭按钮>

这是一个方便组件,将任何反应元素包裹起来,并添加一个Click处理器来关闭披露.

道具

<CloseButton>
  <button className='my-button'>Close me</button>
</CloseButton>

// <button
//   class="my-button"
//   aria-controls="disclosure--12"
//   aria-expanded="false"
// >
//   Close me
// </button>

使用解析 ()

这个钩子提供了披露的价值 披露内容

披露内容值

export interface DisclosureContextValue {
  /**
   * The open state of the disclosure
   */
  isOpen: boolean
  /**
   * Opens the disclosure
   */
  open: () => void
  /**
   * Closes the disclosure
   */
  close: () => void
  /**
   * Toggles the open state of the disclosure
   */
  toggle: () => void
  /**
   * A unique ID for the disclosure target
   */
  id?: string
}

示例

const Component = () => {
  const {open, close, toggle, isOpen} = useDisclosure()
  return <button onClick={toggle}>Toggle the disclosure</button>
}

自由主义

麻省理工学院