@19h47/radiogroup 中文文档教程

发布于 4年前 浏览 27 项目主页 更新于 3年前

@19h47/radiogroup

Install

yarn add @19h47/radiogroup

Usage

HTML

<div role="radiogroup">
    <div aria-checked="true" tabindex="0" role="radio">
        <span>Option 1</span>
        <input
            id="option_1"
            type="radio"
            name="option"
            value="option_1"
            checked
            style="display: none;"
        />
    </div>

    <div aria-checked="false" tabindex="-1" role="radio">
        <span>Option 2</span>
        <input type="radio" id="option_2" name="option" value="option_2" style="display: none;" />
    </div>
</div>

JavaScript

import RadioGroup from '@19h47/radiogroup';

const $element = document.querySelector('[role="radiogroup"]');
const radiogroup = new RadioGroup($element);

radiogroup.init();

Keyboard Support

KeyFunction
Tab
  • Moves keyboard focus to the checked radio button in a radiogroup.
  • If no radio button is checked, focus moves to the first radio button in the group.
Down arrow
  • Moves focus to next radio button in the group.
  • If focus is on the last radio button in the group, move focus to the first radio button.
HomeMove to first input.
Up arrow
  • Moves focus to previous radio button in the group.
  • If focus is on the first radio button in the group, move focus to the last radio button.
EndMove to last input.
SpaceIf the radio button with focus is unchecked, it's state will be changed to checked.

ARIA Roles, Properties and States

RoleProperty/StateUsage
radiogroup
  • The role="radiogroup" attribute identifies the div element as a container for a group of radio buttons.
  • The descendent radio buttons are considered part of the group.
  • The accessible name comes the aria-labelledby attribute, which points to the element that contains the label text.
  • The radiogroup widget does not need a tabindex value, since the ul[role"radiogroup"] element never receives keyboard focus.
radioaria-checkedIndicate state of radio:
  • Checked (e.g. aria-checked=true)
  • Unchecked (e.g. aria-checked=false)
aria-labelledbyUsed to identify radio group

Events

EventArgumentsDescription
Radio.activateeventReturn an object containing current element and current value
Radio.deactivateeventReturn an object containing current element and current value
import RadioGroup from '@19h47/radiogroup';

const $element = document.querySelector('[role="radiogroup"]');
const radiogroup = new RadioGroup($element);

radiogroup.init();


radiogroup.radios.forEach(radio => {
    radio.on('Radio.activate', ({ element, value }) => {
        console.log(element, value);
    }

    radio.on('Radio.deactivate', ({ element, value }) => {
        console.log(element, value);
    }
}

Options

OptionTypeDefaultdescription
taggerarray[]
templatefunction() => {}
namestring''

RadioGroup Methods

MethodDescriptionArguments
init()
destroy()

Radio Methods

MethodDescriptionArguments
activate()Active a given radio
  • shouldFocus (optional)
  • Default to true
deactivate()
destroy()

Test

yarn test

Build Setup

# install dependencies
$ yarn install

# serve with hot reload at localhost:3000
$ yarn start

# build for development
$ yarn dev

# build for production
$ yarn prod

References

@19h47/radiogroup

Install

yarn add @19h47/radiogroup

Usage

HTML

<div role="radiogroup">
    <div aria-checked="true" tabindex="0" role="radio">
        <span>Option 1</span>
        <input
            id="option_1"
            type="radio"
            name="option"
            value="option_1"
            checked
            style="display: none;"
        />
    </div>

    <div aria-checked="false" tabindex="-1" role="radio">
        <span>Option 2</span>
        <input type="radio" id="option_2" name="option" value="option_2" style="display: none;" />
    </div>
</div>

JavaScript

import RadioGroup from '@19h47/radiogroup';

const $element = document.querySelector('[role="radiogroup"]');
const radiogroup = new RadioGroup($element);

radiogroup.init();

Keyboard Support

KeyFunction
Tab
  • Moves keyboard focus to the checked radio button in a radiogroup.
  • If no radio button is checked, focus moves to the first radio button in the group.
Down arrow
  • Moves focus to next radio button in the group.
  • If focus is on the last radio button in the group, move focus to the first radio button.
HomeMove to first input.
Up arrow
  • Moves focus to previous radio button in the group.
  • If focus is on the first radio button in the group, move focus to the last radio button.
EndMove to last input.
SpaceIf the radio button with focus is unchecked, it's state will be changed to checked.

ARIA Roles, Properties and States

RoleProperty/StateUsage
radiogroup
  • The role="radiogroup" attribute identifies the div element as a container for a group of radio buttons.
  • The descendent radio buttons are considered part of the group.
  • The accessible name comes the aria-labelledby attribute, which points to the element that contains the label text.
  • The radiogroup widget does not need a tabindex value, since the ul[role"radiogroup"] element never receives keyboard focus.
radioaria-checkedIndicate state of radio:
  • Checked (e.g. aria-checked=true)
  • Unchecked (e.g. aria-checked=false)
aria-labelledbyUsed to identify radio group

Events

EventArgumentsDescription
Radio.activateeventReturn an object containing current element and current value
Radio.deactivateeventReturn an object containing current element and current value
import RadioGroup from '@19h47/radiogroup';

const $element = document.querySelector('[role="radiogroup"]');
const radiogroup = new RadioGroup($element);

radiogroup.init();


radiogroup.radios.forEach(radio => {
    radio.on('Radio.activate', ({ element, value }) => {
        console.log(element, value);
    }

    radio.on('Radio.deactivate', ({ element, value }) => {
        console.log(element, value);
    }
}

Options

OptionTypeDefaultdescription
taggerarray[]
templatefunction() => {}
namestring''

RadioGroup Methods

MethodDescriptionArguments
init()
destroy()

Radio Methods

MethodDescriptionArguments
activate()Active a given radio
  • shouldFocus (optional)
  • Default to true
deactivate()
destroy()

Test

yarn test

Build Setup

# install dependencies
$ yarn install

# serve with hot reload at localhost:3000
$ yarn start

# build for development
$ yarn dev

# build for production
$ yarn prod

References

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文