fix(focus-lock): update types for focus lock component

Author: codebender828

packages/c-focus-lock/src/c-focus-lock.ts

@@ -112,12 +112,10 @@ export const CFocusLock = defineComponent({
       const [firstChild] = slots.default?.({}) as VNode[]
 
       if (!firstChild) {
-        warn([
-          {
-            condition: __DEV__,
-            message: `[chakra-ui:focus-lock]: Focus lock component expects at least and only one child element.`,
-          },
-        ])
+        warn({
+          condition: __DEV__,
+          message: `[chakra-ui:focus-lock]: Focus lock component expects at least and only one child element.`,
+        })
         return
       }
 

packages/c-focus-lock/tests/c-focus-lock.test.ts

@@ -10,17 +10,6 @@ afterEach(() => {
   jest.clearAllMocks()
 })
 
-// TODO:
-//
-// The majority of the tests in this file are skipped in jest
-// because focus tracking seems to behave differently here
-// than with in the browser.
-//
-// Focus appears to be sent to the body instead of the components.
-// However in the browser/playground focus behaves as expected.
-//
-// A possible solution for this problem is to test this in Cypress.
-
 const renderComponent = (props?: any) => {
   const base = {
     components: {

packages/vue-a11y/tests/__snapshots__/vue-a11y.test.ts.snap

@@ -0,0 +1,32 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should match aria-hidden snapshot 1`] = `
+<div>
+  <main>
+    <div data-testid="aria-container"><input data-testid="input"><button>Another button</button></div>
+    <section data-testid="outside-aria-container" chakra-aria-hidden="true" aria-hidden="true">Outside aria hidden</section>
+  </main>
+</div>
+`;
+
+exports[`should render properly 1`] = `
+<DocumentFragment>
+  <main>
+    <div
+      data-testid="aria-container"
+    >
+      <input
+        data-testid="input"
+      />
+      <button>
+        Another button
+      </button>
+    </div>
+    <section
+      data-testid="outside-aria-container"
+    >
+      Outside aria hidden
+    </section>
+  </main>
+</DocumentFragment>
+`;

packages/vue-a11y/tests/vue-a11y.test.ts

@@ -1,7 +1,76 @@
-import { render } from '../../test-utils/src'
-import { VueA11y } from '../src'
+import { render, waitMs, screen } from '../../test-utils/src'
+import { hideOthers } from '../src'
+import { useRef } from '@chakra-ui/vue-utils'
+import { nextTick, ref, onMounted } from 'vue'
+
+const renderComponent = (props?: any) => {
+  const base = {
+    template: `
+        <main>
+          <div v-if="open" :ref="targetRef" data-testid="aria-container">
+            <input data-testid="input" />
+            <button>Another button</button>
+          </div>
+          <section data-testid="outside-aria-container">Outside aria hidden</section>
+        </main>
+    `,
+    setup() {
+      const [targetRef, targetEl] = useRef()
+      const open = ref(true)
+
+      onMounted(async () => {
+        await nextTick()
+        if (targetEl.value) {
+          hideOthers(targetEl.value)
+        }
+      })
+
+      return {
+        targetRef,
+        open,
+      }
+    },
+    ...props,
+  }
+  return render(base)
+}
+
+function assert(active: boolean = true) {
+  const ariaContainer = screen.getByTestId('aria-container')
+  const outsideAriaContainer = screen.getByTestId('outside-aria-container')
+
+  if (active) {
+    expect(ariaContainer).not.toHaveAttribute('aria-hidden', 'true')
+    expect(outsideAriaContainer).toHaveAttribute('aria-hidden', 'true')
+    expect(outsideAriaContainer).toHaveAttribute('chakra-aria-hidden', 'true')
+  } else {
+    expect(ariaContainer).not.toHaveAttribute('aria-hidden', 'true')
+    expect(outsideAriaContainer).not.toHaveAttribute('aria-hidden', 'true')
+    expect(outsideAriaContainer).not.toHaveAttribute(
+      'chakra-aria-hidden',
+      'true'
+    )
+  }
+}
 
 it('should render properly', () => {
-  const { asFragment } = render(VueA11y)
+  const { asFragment } = renderComponent()
   expect(asFragment()).toMatchSnapshot()
-})
+})
+
+it('should match aria-hidden snapshot', async () => {
+  renderComponent()
+  await waitMs(300)
+  expect(document.body.innerHTML).toMatchSnapshot()
+})
+
+it('should apply aria-hidden attribute to other elements except target', async () => {
+  renderComponent()
+  await waitMs(300)
+
+  assert(true)
+})
+
+it.todo(
+  'should remove aria-hidden attributes form other elements except target when job is undone'
+)