Merge pull request #455 from chakra-ui/fix/button-tabindex

codebender828 · web-flow · commit be70c2ab06ab · 2021-07-09T08:43:27.000+08:00
fix: changes the `tabIndex` attribute to `tabindex`
diff --git a/.changeset/tall-forks-do.md b/.changeset/tall-forks-do.md
@@ -0,0 +1,5 @@
+---
+'@chakra-ui/vue': patch
+'@chakra-ui/nuxt': patch
+'chakra-ui-docs': patch
+---
diff --git a/packages/chakra-ui-core/src/CButton/CButton.js b/packages/chakra-ui-core/src/CButton/CButton.js
@@ -105,7 +105,7 @@ const CButton = {
       props: this.$props,
       attrs: {
         type: this.type,
-        tabIndex: 0,
+        tabindex: 0,
         disabled: this.isDisabled || this.isLoading,
         'aria-disabled': this.isDisabled || this.isLoading,
         dataActive: this.isActive ? 'true' : undefined,
diff --git a/packages/chakra-ui-core/src/CEditable/CEditable.js b/packages/chakra-ui-core/src/CEditable/CEditable.js
@@ -225,7 +225,7 @@ const CEditablePreview = {
         opacity: !this.hasValue ? 0.6 : undefined
       }
     },
-    tabIndex () {
+    tabindex () {
       const { isEditing, isDisabled, isPreviewFocusable } = this.context
       if ((!isEditing || !isDisabled) && isPreviewFocusable) {
         return 0
@@ -243,7 +243,7 @@ const CEditablePreview = {
       class: [this.className],
       attrs: {
         'aria-disabled': isDisabled,
-        tabIndex: this.tabIndex,
+        tabindex: this.tabindex,
         ...this.computedAttrs
       },
       on: {
diff --git a/packages/chakra-ui-core/src/CLink/CLink.js b/packages/chakra-ui-core/src/CLink/CLink.js
@@ -63,7 +63,7 @@ const CLink = {
         ...this.isRouterLink && { to: this.to }
       },
       attrs: {
-        tabIndex: this.isDisabled ? -1 : undefined,
+        tabindex: this.isDisabled ? -1 : undefined,
         'aria-disabled': this.isDisabled,
         ...this.externalAttrs,
         ...this.computedAttrs
diff --git a/packages/chakra-ui-core/src/CMenu/CMenu.js b/packages/chakra-ui-core/src/CMenu/CMenu.js
@@ -415,7 +415,7 @@ const CMenuList = {
         id: menuId,
         role: 'menu',
         'aria-labelledby': buttonId,
-        tabIndex: -1,
+        tabindex: -1,
         'data-chakra-component': 'CMenuButton'
       },
       on: {
@@ -484,7 +484,7 @@ const CMenuItem = {
         ...this.menuItemStyles({ theme: this.theme, colorMode: this.colorMode }),
         ...this.$attrs,
         role: this.role,
-        tabIndex: -1,
+        tabindex: -1,
         disabled: this.isDisabled,
         'aria-disabled': this.isDisabled,
         'data-chakra-component': 'CMenuItem'
diff --git a/packages/chakra-ui-core/src/CMenu/CMenuOption.js b/packages/chakra-ui-core/src/CMenu/CMenuOption.js
@@ -113,7 +113,7 @@ const CMenuItemOption = {
         alignItems: 'center',
         ...this.$attrs,
         role: this.role,
-        tabIndex: -1,
+        tabindex: -1,
         'aria-checked': this.isChecked,
         disabled: this.isDisabled,
         'aria-disabled': this.isDisabled,
diff --git a/packages/chakra-ui-core/src/CModal/CModal.js b/packages/chakra-ui-core/src/CModal/CModal.js
@@ -445,7 +445,7 @@ const CModalContent = {
         attrs: {
           role: 'dialog',
           'aria-modal': 'true',
-          tabIndex: -1,
+          tabindex: -1,
           id: contentId,
           ...(addAriaDescribedby && { 'aria-describedby': bodyId }),
           ...(addAriaLabelledby && { 'aria-labelledby': headerId }),
diff --git a/packages/chakra-ui-core/src/CPopover/CPopover.js b/packages/chakra-ui-core/src/CPopover/CPopover.js
@@ -497,7 +497,7 @@ const CPopoverContent = {
         _focus: { outline: 0, shadow: 'outline' },
         ...this.$attrs,
         id: popoverId,
-        tabIndex: -1,
+        tabindex: -1,
         'aria-labelledby': this.headerId,
         'aria-describedby': this.bodyId,
         'aria-label': this.ariaLabel,
diff --git a/packages/chakra-ui-core/src/CPopover/CPopover.stories.js b/packages/chakra-ui-core/src/CPopover/CPopover.stories.js
@@ -120,7 +120,7 @@ storiesOf('UI | Popover', module)
       <CPopover :closeOnBlur="false">
         <CPopoverTrigger>
           <CBox
-            tabIndex="0"
+            tabindex="0"
             role="button"
             aria-label="Some box"
             p="5"
diff --git a/packages/chakra-ui-core/src/CRadioButtonGroup/CRadioButtonGroup.js b/packages/chakra-ui-core/src/CRadioButtonGroup/CRadioButtonGroup.js
@@ -157,7 +157,7 @@ const CRadioButtonGroup = {
             ...(!isLastChild && spacingProps)
           },
           attrs: {
-            tabIndex: getTabIndex()
+            tabindex: getTabIndex()
           },
           nativeOn: {
             click: handleClick
diff --git a/packages/chakra-ui-core/src/CSlider/CSlider.js b/packages/chakra-ui-core/src/CSlider/CSlider.js
@@ -456,7 +456,7 @@ const CSliderThumb = {
         ...this.computedAttrs,
         id: thumbId,
         role: 'slider',
-        tabIndex: isDisabled ? undefined : 0,
+        tabindex: isDisabled ? undefined : 0,
         'aria-disabled': isDisabled,
         'aria-valuemin': min,
         'aria-valuetext': valueText,
diff --git a/packages/chakra-ui-core/src/CStack/CStack.js b/packages/chakra-ui-core/src/CStack/CStack.js
@@ -76,7 +76,8 @@ const CStack = {
     }
   },
   render (h) {
-    const children = this.$slots.default.filter(e => e.tag)
+    const defaultSlot = this.$slots.default || []
+    const children = defaultSlot.filter(e => e.tag)
     const stackables = children.map((node, index) => {
       const isLastChild = children.length === index + 1
       const spacingProps = this._isInline
diff --git a/packages/chakra-ui-core/src/CStack/tests/CStack.test.js b/packages/chakra-ui-core/src/CStack/tests/CStack.test.js
@@ -26,6 +26,13 @@ it('should render correctly', () => {
   expect(asFragment()).toMatchSnapshot()
 })
 
+it('should render empty children correctly', () => {
+  const { asFragment } = renderComponent({
+    template: '<c-stack></c-stack>'
+  })
+  expect(asFragment()).toMatchSnapshot()
+})
+
 it('should default to vertical stack', () => {
   renderComponent()
   const stack = screen.getByTestId('stack')
diff --git a/packages/chakra-ui-core/src/CStack/tests/__snapshots__/CStack.test.js.snap b/packages/chakra-ui-core/src/CStack/tests/__snapshots__/CStack.test.js.snap
@@ -147,6 +147,15 @@ exports[`should render correctly 1`] = `
 </DocumentFragment>
 `;
 
+exports[`should render empty children correctly 1`] = `
+<DocumentFragment>
+  <div
+    class="css-j7qwjs css-0"
+    data-chakra-component="CStack"
+  />
+</DocumentFragment>
+`;
+
 exports[`should should stack native html elements 1`] = `
 <DocumentFragment>
   <div
diff --git a/packages/chakra-ui-core/src/CTabs/CTabs.js b/packages/chakra-ui-core/src/CTabs/CTabs.js
@@ -373,7 +373,7 @@ const CTab = {
       class: [this.className],
       attrs: {
         role: 'tab',
-        tabIndex: this.isSelected ? 0 : -1,
+        tabindex: this.isSelected ? 0 : -1,
         id: `tab:${this.id}`,
         type: 'button',
         disabled: this.isDisabled,
@@ -408,7 +408,7 @@ const CTabPanel = {
       class: [this.className],
       attrs: {
         role: 'tabpanel',
-        tabIndex: -1,
+        tabindex: -1,
         'aria-labelledby': `tab:${this.id}`,
         hidden: !this.isSelected,
         id: `panel:${this.id}`,
@@ -460,7 +460,7 @@ const CTabPanels = {
     return h(this.as, {
       class: [this.className],
       attrs: {
-        tabIndex: -1,
+        tabindex: -1,
         ...this.computedAttrs
       },
       on: this.computedListeners
diff --git a/packages/chakra-ui-core/src/CTooltip/CTooltip.js b/packages/chakra-ui-core/src/CTooltip/CTooltip.js
@@ -151,7 +151,7 @@ const CTooltip = {
             as: 'span'
           },
           attrs: {
-            tabIndex: 0,
+            tabindex: 0,
             'x-tooltip-anchor': `${this.tooltipId}`,
             ...(this.isOpen && { 'aria-describedby': this.tooltipId })
           },
diff --git a/website/pages/editable.mdx b/website/pages/editable.mdx
@@ -83,7 +83,7 @@ props. Here are the custom props:
 | onCancel           | `function`          |                      | Callback invoked when user cancels input with the `Esc` key. It provides the last confirmed value as argument.                            |
 | onSubmit           | `function`          |                      | Callback invoked when user confirms value with `enter` key or by blurring the input.                                                      |
 | onEdit             | `function`          |                      | Callback invoked once the user enters edit mode.                                                                                          |
-| isPreviewFocusable | `boolean`         | `true`               | If `true`, the read only view, has a `tabIndex` set to `0` so it can receive focus via the keyboard or click.                             |
+| isPreviewFocusable | `boolean`         | `true`               | If `true`, the read only view, has a `tabindex` set to `0` so it can receive focus via the keyboard or click.                             |
 | startWithEditView  | `boolean`         |                      | If `true`, the Editable will start with edit mode by default.                                                                             |
 | submitOnBlur       | `boolean`         | `true`               | If `true`, it'll update the value onBlur and turn off the edit mode.                                                                      |
 | selectAllOnFocus   | `boolean`         | `true`               | If `true`, the input's text will be highlighted on focus.                                                                                 |
diff --git a/website/pages/menu.mdx b/website/pages/menu.mdx
@@ -8,7 +8,7 @@ import SEO from "../components/SEO";
 # Menu
 
 The `CMenu` component is an accessible dropdown menu for the common dropdown menu button design pattern.
-Menu uses roving tabIndex for focus management.
+Menu uses roving tabindex for focus management.
 
 See `CMenu`'s [accessibility report](https://github.com/chakra-ui/chakra-ui-vue/blob/master/packages/chakra-ui-core/src/CMenu/accessibility.md)
 
diff --git a/website/pages/tooltip.mdx b/website/pages/tooltip.mdx
@@ -92,7 +92,7 @@ Using the `placement` prop you can adjust where your tooltip will be displayed.
 | `showDelay`          | `number`             |          | The delay in `ms` for the tooltip to show                                             |
 | `hideDelay`          | `number`             |          | The delay in `ms` for the tooltip to hide                                             |
 | `closeOnClick`       | `boolean`            |          | If `true` hide the tooltip, when the trigger is clicked.                              |
-| `shouldWrapChildren` | `boolean`            |          | If `true`, the tooltip will wrap the children in a `span` with `tabIndex=0`           |
+| `shouldWrapChildren` | `boolean`            |          | If `true`, the tooltip will wrap the children in a `span` with `tabindex=0`           |
 
 ### Slots
 
