Skip to content
This repository was archived by the owner on Mar 4, 2020. It is now read-only.

feat(Accessibility): checkbox behavior for multiselect pattern #2264

Open
wants to merge 3 commits into
base: master
Choose a base branch
from

Conversation

jurokapsiar
Copy link
Contributor

Checkbox can be used in a listbox for easier and more understandable grouping of related checkboxes. This PR adds a behavior and an example that shows the usage

@DustyTheBot
Copy link
Collaborator

Perf comparison

Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🔧 Avatar.Fluent 0.57 0.38 1.5:1 2000 1149
🔧 Button.Fluent 1.2 0.17 7.06:1 1000 1195
🔧 Checkbox.Fluent 1.35 0.27 5:1 1000 1345
🔧 Dialog.Fluent 0.32 0.16 2:1 5000 1615
🔧 Dropdown.Fluent 3.44 0.37 9.3:1 1000 3439
🔧 Icon.Fluent 0.25 0.04 6.25:1 5000 1249
🔧 Image.Fluent 0.1 0.07 1.43:1 5000 476
🔧 Slider.Fluent 1.89 0.29 6.52:1 1000 1887
🦄 Text.Fluent 0.05 0.16 0.31:1 5000 248
🦄 Tooltip.Fluent 0.36 17.75 0.02:1 5000 1800

🔧 Needs work     🎯 On target     🦄 Amazing

Generated by 🚫 dangerJS

import * as React from 'react'

const CheckboxLisboxExample = () => (
<List selectable aria-multiselectable={true}>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is List component the best choice? I understand that from accessibility point it may be, but from styling point, if we decide to add some styles on the List component int he future, or if any theme has, those will be applied here as well...

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, may be we should introduce CheckboxGroup for this...

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am not sure about this - the pattern is multi select listbox, so it is a combination of List and Checkbox. It would be more clear if we would introduce a "neutral" variabt of List, in case if we needed to add some styles to List

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants