fix(VisuallyHidden): not focusable after native form validation

unovue · Oct 29, 2024 · bceefb4 · bceefb4
1 parent 30255b6
commit bceefb4
Show file tree

Hide file tree

Showing 7 changed files with 19 additions and 10 deletions.
diff --git a/packages/core/src/Checkbox/Checkbox.test.ts b/packages/core/src/Checkbox/Checkbox.test.ts
@@ -25,7 +25,8 @@ describe('given a default Checkbox', () => {
     const wrapper = mount(Checkbox, { attachTo: document.body })
     expect(await axe(wrapper.element, {
       rules: {
-        label: { enabled: false },
+        'label': { enabled: false },
+        'nested-interactive': { enabled: false },
       },
     })).toHaveNoViolations()
   })
@@ -120,7 +121,8 @@ describe('given a disabled Checkbox', () => {
   it('should have no accessibility violations', async () => {
     expect(await axe(wrapper.element, {
       rules: {
-        label: { enabled: false },
+        'label': { enabled: false },
+        'nested-interactive': { enabled: false },
       },
     })).toHaveNoViolations()
   })
@@ -233,7 +235,7 @@ describe('given checkboxGroup in a form', async () => {
   })
 
   it('should have hidden input field', async () => {
-    expect(wrapper.find('input[hidden]').exists()).toBe(true)
+    expect(wrapper.find('input[data-hidden]').exists()).toBe(true)
   })
 
   describe('after clicking submit button', () => {

diff --git a/packages/core/src/Combobox/Combobox.test.ts b/packages/core/src/Combobox/Combobox.test.ts
@@ -295,7 +295,7 @@ describe('given combobox in a form', async () => {
   })
 
   it('should have hidden input field', async () => {
-    expect(wrapper.find('input[hidden]').exists()).toBe(true)
+    expect(wrapper.find('input[data-hidden]').exists()).toBe(true)
   })
 
   describe('after selecting option and clicking submit button', () => {

diff --git a/packages/core/src/Listbox/Listbox.test.ts b/packages/core/src/Listbox/Listbox.test.ts
@@ -339,7 +339,7 @@ describe('given Listbox in a form', async () => {
   })
 
   it('should have hidden input field', async () => {
-    expect(wrapper.find('input[hidden]').exists()).toBe(true)
+    expect(wrapper.find('input[data-hidden]').exists()).toBe(true)
   })
 
   describe('after selecting option and clicking submit button', () => {

diff --git a/packages/core/src/Slider/Slider.test.ts b/packages/core/src/Slider/Slider.test.ts
@@ -25,7 +25,12 @@ describe('given default Slider', () => {
 
   it('should pass axe accessibility tests', async () => {
     wrapper = mount(Slider)
-    expect(await axe(wrapper.element)).toHaveNoViolations()
+    expect(await axe(wrapper.element, {
+      rules: {
+        'label': { enabled: false },
+        'nested-interactive': { enabled: false },
+      },
+    })).toHaveNoViolations()
   })
 
   it('should have default value', () => {

diff --git a/packages/core/src/Splitter/Splitter.test.ts b/packages/core/src/Splitter/Splitter.test.ts
@@ -15,7 +15,8 @@ describe('test splitter functionalities', () => {
     await nextTick()
     expect(await axe(wrapper.element, {
       rules: {
-        label: { enabled: false },
+        'label': { enabled: false },
+        'nested-interactive': { enabled: false },
       },
     })).toHaveNoViolations()
   })

diff --git a/packages/core/src/Switch/Switch.test.ts b/packages/core/src/Switch/Switch.test.ts
@@ -14,7 +14,8 @@ describe('test switch functionalities', () => {
     const wrapper = mount(Switch)
     expect(await axe(wrapper.element, {
       rules: {
-        label: { enabled: false },
+        'label': { enabled: false },
+        'nested-interactive': { enabled: false },
       },
     })).toHaveNoViolations()
   })

diff --git a/packages/core/src/VisuallyHidden/VisuallyHidden.vue b/packages/core/src/VisuallyHidden/VisuallyHidden.vue
@@ -17,19 +17,19 @@ withDefaults(defineProps<VisuallyHiddenProps>(), { as: 'span', feature: 'focusab
     :as="as"
     :as-child="asChild"
     :aria-hidden="feature === 'focusable' ? 'true' : undefined"
-    :hidden="feature === 'fully-hidden' ? '' : undefined"
+    :data-hidden="feature === 'fully-hidden' ? '' : undefined"
     :tabindex="feature === 'fully-hidden' ? '-1' : undefined"
     :style="{
       // See: https://github.com/twbs/bootstrap/blob/master/scss/mixins/_screen-reader.scss
       position: 'absolute',
       border: 0,
       width: '1px',
-      display: feature === 'focusable' ? 'inline-block' : 'none',
       height: '1px',
       padding: 0,
       margin: '-1px',
       overflow: 'hidden',
       clip: 'rect(0, 0, 0, 0)',
+      clipPath: 'inset(50%)',
       whiteSpace: 'nowrap',
       wordWrap: 'normal',
     }"