Merge branch 'develop' into improve-types

Author: codebender828

.changeset/large-bananas-allow.md

@@ -0,0 +1,8 @@
+---
+'@chakra-ui/vue': minor
+'@chakra-ui/nuxt': minor
+'@chakra-ui/theme-vue': minor
+'chakra-ui-docs': minor
+---
+
+Backport v1 Theme API to v0.x

config/.env.defaults

@@ -1,2 +1 @@
 BASE_URL=http://localhost:3000
-MIXPANEL_TOKEN=91ec73fd1b8e164d6cfbae6bf1a3e7d1

package.json

@@ -85,7 +85,7 @@
     "mdx-vue": "^1.0.2",
     "mdx-vue-loader": "^1.0.2",
     "node-fetch": "^2.6.0",
-    "node-sass": "^4.13.1",
+    "node-sass": "^6.0.1",
     "nuxt": "2.14.6",
     "portal-vue": "^2.1.6",
     "prismjs": "^1.19.0",

packages/chakra-ui-core/src/CButtonGroup/CButtonGroup.js

@@ -6,7 +6,7 @@
  *
  * @see Docs     https://vue.chakra-ui.com/button
  * @see Source   https://github.com/chakra-ui/chakra-ui-vue/blob/master/packages/chakra-ui-core/src/CButtonGroup/CButtonGroup.js
- * @see A11y     https://github.com/chakra-ui/chakra-ui-vue/blob/master/packages/chakra-ui-core/src/CButton/accessibility.md
+ * @see A11y     https://github.com/chakra-ui/chakra-ui-vue/blob/master/packages/chakra-ui-core/src/CButtonGroup/accessibility.md
  * @see WAI-ARIA https://www.w3.org/TR/wai-aria-practices-1.2/#button
  */
 
@@ -73,6 +73,7 @@ const CButtonGroup = {
       attrs: {
         d: 'inline-block',
         ...data.attrs,
+        role: 'group',
         'data-chakra-component': 'CButtonGroup'
       },
       on: listeners

packages/chakra-ui-core/src/CButtonGroup/accessibility.md

@@ -0,0 +1,16 @@
+# ButtonGroup | Accessibility ♿️
+
+This report is adapted to list the [WAI-ARIA Authoring practices for buttons](https://www.w3.org/TR/wai-aria-practices-1.2/#button) supported by Chakra UI for the `CButtonGroup` component.
+
+### Description
+The `CButtonGroup` component provides a wrapping container with `role="group"` for multiple children button elements.
+
+#### Components
+`@chakra-ui/vue` exports 1 ButtonGroup related components:
+- `CButtonGroup`
+
+
+### `CButton` WAI-ARIA Roles, States, and Properties:
+- The `CButtonGroup` component contains the `role="group"` for a group of child `CButton` components grouped together.
+
+Noticed a bug or inconsistency with this component? [Open an issue](https://github.com/chakra-ui/chakra-ui-vue/issues/new/choose)

packages/chakra-ui-core/src/CButtonGroup/tests/__snapshots__/CButtonGroup.test.js.snap

@@ -144,6 +144,7 @@ exports[`should attach buttons when \`is-attached\` is passed 1`] = `
 <div
     class="emotion-0"
     data-chakra-component="CButtonGroup"
+    role="group"
   >
     <button
       class="emotion-1"
@@ -305,6 +306,7 @@ exports[`should render correctly 1`] = `
 <div
     class="emotion-0"
     data-chakra-component="CButtonGroup"
+    role="group"
   >
     <button
       class="emotion-1"

packages/chakra-ui-core/src/CCheckbox/accessibility.md

@@ -8,8 +8,9 @@ Chakra UI supports two types of checkbox widgets:
 - **Tri-state (Indeterminate)**: This type of checkbox supports an additional third state known as partially checked.
 
 #### Components
-`@chakra-ui/vue` exports 1 checkbox related components:
+`@chakra-ui/vue` exports 2 checkbox related components:
 - `CCheckbox`
+- `CCheckboxGroup`
 
 ### `CCheckbox` Keyboard Interaction
 - [x] **`Space`**: When the checkbox has focus, pressing the Space key changes the state of the checkbox.
@@ -20,5 +21,24 @@ Native HTML checkboxes are 100% accessible by default, so we use a `CControlBox`
 
 The `CCheckbox` component composes `CControlBox`, a component we created to make it easy to style an element based on sibling inputs.
 
+### `CCheckboxGroup` WAI-ARIA compliance
+- The `CCheckboxGroup` by default adds the `role="group"` attribute to itself.
+ 
+> This should be implemented by the user
+- The `CCheckboxGroup` accessibility can be improved by adding an `aria-label` attribute.
+
+```html
+<c-checkbox-group aria-label="Sandwich Vegetables">
+  <c-checkbox size="sm" variant-color="red" default-is-checked>
+    Lettuce
+  </c-checkbox>
+  <c-checkbox size="md" variant-color="green" default-is-checked>
+    Tomato
+  </c-checkbox>
+  <c-checkbox size="lg" variant-color="pink" default-is-checked>
+    Sprouts
+  </c-checkbox>
+</c-checkbox-group>
+```
 
 Noticed a bug or inconsistency with this component? [Open an issue](https://github.com/chakra-ui/chakra-ui-vue/issues/new/choose)

website/now.json

@@ -1,12 +1,4 @@
 {
-  "version": 2,
-  "env": {
-    "MIXPANEL_TOKEN": "91ec73fd1b8e164d6cfbae6bf1a3e7d1"
-  },
-  "build": {
-    "env": {
-      "MIXPANEL_TOKEN": "91ec73fd1b8e164d6cfbae6bf1a3e7d1"
-    }
-  }
+  "version": 2
 }