Tags, Checkboxes, Chips, Radio-buttons, Pills, Selected Buttons, etc

[turolopezsanabria]

Status of this discussion

• Ongoing
• AGREED (We have an agreement)
  • New Component
  • New Feature
  • Other
• DONE (Closed, Discarded or Implemented)

Description

You can link your code or Figma file here

As started in this weekly Sync on Twitch ...

Goal

Context / Assumptions

Constraints and Blockers

• a
• b
• …

Proposals / Options

• Option A
  • Pros:
  • Cons:
• Option B
  • Pros:
  • Cons:
• ...

Related links

• Article What's the difference between pills chips...

Decision / Outcome of this discussion

Rationale

i.e. We've decided to continue with option "A" because [postitive arguments] while "B" [negative arguments]

Specs / Next steps / Consequences

[andresin87]

v1.2 current (nov21) https://www.w3.org/TR/wai-aria-practices/

v1.3 draft (mar22) https://w3c.github.io/aria/

[andresin87]

Button

aria 1.2 (current)

https://www.w3.org/TR/wai-aria-practices/#button

A button is a widget that enables users to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation. A common convention for informing users that a button launches a dialog is to append "…" (ellipsis) to the button label, e.g., "Save as…".

In addition to the ordinary button widget, WAI-ARIA supports 2 other types of buttons:

• Toggle button: A two-state button that can be either off (not pressed) or on (pressed). To tell assistive technologies that a button is a toggle button, specify a value for the attribute aria-pressed. For example, a button labelled mute in an audio player could indicate that sound is muted by setting the pressed state true. Important: it is critical the label on a toggle does not change when its state changes. In this example, when the pressed state is true, the label remains "Mute" so a screen reader would say something like "Mute toggle button pressed". Alternatively, if the design were to call for the button label to change from "Mute" to "Unmute," the aria-pressed attribute would not be needed.
• Menu button: as described in the menu button pattern, a button is revealed to assistive technologies as a menu button if it has the property aria-haspopup set to either menu or true.

NOTE

The types of actions performed by buttons are distinctly different from the function of a link (see link pattern). It is important that both the appearance and role of a widget match the function it provides. Nevertheless, elements occasionally have the visual style of a link but perform the action of a button. In such cases, giving the element role button helps assistive technology users understand the function of the element. However, a better solution is to adjust the visual design so it matches the function and ARIA role.

ButtonGroup

[andresin87]

Checkbox

aria 1.2 current

https://www.w3.org/TR/wai-aria-practices/#checkbox

WAI-ARIA supports two types of checkbox widgets:

• Dual-state: The most common type of checkbox, it allows the user to toggle between two choices -- checked and not checked.
• Tri-state: This type of checkbox supports an additional third state known as partially checked.

One common use of a tri-state checkbox can be found in software installers where a single tri-state checkbox is used to represent and control the state of an entire group of install options. And, each option in the group can be individually turned on or off with a dual state checkbox.

• If all options in the group are checked, the overall state is represented by the tri-state checkbox displaying as checked.

• If some of the options in the group are checked, the overall state is represented with the tri-state checkbox displaying as partially checked.

• If none of the options in the group are checked, the overall state of the group is represented with the tri-state checkbox displaying as not checked.
  The user can use the tri-state checkbox to change all options in the group with a single action:

• Checking the overall checkbox checks all options in the group.

• Unchecking the overall checkbox will uncheck all options in the group.

• And, In some implementations, the system may remember which options were checked the last time the overall status was partially checked. If this feature is provided, activating the overall checkbox a third time recreates that partially checked state where only some options in the group are checked.

ToogleButtonGroup as CheckboxGroup

[andresin87]

RadioGroup

aria 1.2 current

https://www.w3.org/TR/wai-aria-practices/#radiobutton

A radio group is a set of checkable buttons, known as radio buttons, where no more than one of the buttons can be checked at a time. Some implementations may initialize the set with all buttons in the unchecked state in order to force the user to check one of the buttons before moving past a certain point in the workflow.

ToogleButtonGroup as RadioButtonGroup