dialtone/apps/dialtone-documentation/docs/_data/segmented-control.json at b7a2f05369c08b951004b78a5e82cd632819789b · dialpad/dialtone · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
{
  "classes": [
    {
      "class": "d-segmented-control",
      "applies": "N/A",
      "description": "Container class for the segmented control."
    },
    {
      "class": "d-segmented-control--vertical",
      "applies": ".d-segmented-control",
      "description": "Stacks items vertically."
    },
    {
      "class": "d-segmented-control--borderless",
      "applies": ".d-segmented-control",
      "description": "Removes the border and padding from the container."
    },
    {
      "class": "d-segmented-control--hide-divider",
      "applies": ".d-segmented-control",
      "description": "Hides the dividers between items."
    },
    {
      "class": "d-segmented-control--spread-evenly",
      "applies": ".d-segmented-control",
      "description": "Distributes items equally across the container width."
    },
    {
      "class": "d-segmented-control--xs",
      "applies": ".d-segmented-control",
      "description": "Extra small size."
    },
    {
      "class": "d-segmented-control--sm",
      "applies": ".d-segmented-control",
      "description": "Small size (default)."
    },
    {
      "class": "d-segmented-control--md",
      "applies": ".d-segmented-control",
      "description": "Medium size."
    },
    {
      "class": "d-segmented-control--lg",
      "applies": ".d-segmented-control",
      "description": "Large size."
    },
    {
      "class": "d-segmented-control--xl",
      "applies": ".d-segmented-control",
      "description": "Extra large size."
    },
    {
      "class": "d-segmented-control__item",
      "applies": "N/A",
      "description": "Styles each item within the segmented control."
    },
    {
      "class": "d-segmented-control__item-label",
      "applies": "N/A",
      "description": "Styles the label container within each item."
    }
  ],
  "accessible": [
    {
      "item": "role=\"radiogroup\"",
      "applies": ".d-segmented-control",
      "description": "Identifies the container as a group of radio controls. (<a class=\"d-link\" href=\"https://www.w3.org/TR/wai-aria-1.2/#radiogroup\" target=\"_blank\" rel=\"noopener noreferrer\">Source</a>)"
    },
    {
      "item": "aria-label",
      "applies": ".d-segmented-control",
      "description": "Provides an accessible name for the radio group."
    },
    {
      "item": "aria-orientation",
      "applies": ".d-segmented-control",
      "description": "Indicates whether the control is horizontal or vertical, informing screen readers of the expected keyboard navigation direction."
    },
    {
      "item": "role=\"radio\"",
      "applies": ".d-segmented-control__item",
      "description": "Identifies each item as a radio button within the group. (<a class=\"d-link\" href=\"https://www.w3.org/TR/wai-aria-1.2/#radio\" target=\"_blank\" rel=\"noopener noreferrer\">Source</a>)"
    },
    {
      "item": "aria-checked",
      "applies": ".d-segmented-control__item",
      "description": "Set to \"true\" on the selected item, \"false\" on all others."
    },
    {
      "item": "tabindex",
      "applies": ".d-segmented-control__item",
      "description": "Roving tabindex: the selected item has tabindex=\"0\", all others have tabindex=\"-1\". Arrow keys move focus between items."
    },
    {
      "item": "aria-disabled",
      "applies": ".d-segmented-control__item",
      "description": "Set to \"true\" on disabled items. Arrow key navigation skips disabled items."
    }
  ]
}