search

chakra-ui / chakra-ui-vue

⚡️ Build scalable and accessible Vue.js applications with ease.
https://vue.chakra-ui.com
MIT License
1.86k stars 136 forks source link

collapse component hidden state #322

Open goetsu opened 3 years ago

goetsu commented 3 years ago

Describe the bug by default the hidden panel of the collapse component is generated like <div data-chakra-component="CCollapse" style="overflow: hidden; opacity: 0; height: 0px; visibility: visible;">

To Reproduce Steps to reproduce the behavior:

  1. Go to https://vue.chakra-ui.com/collapse
  2. inspect code of component

Expected behavior when not visible the panel must be hidden with visibility:hidden like : <div data-chakra-component="CCollapse" style="overflow: hidden; opacity: 0; height: 0px; visibility: hidden;">

This will also fix existing issue of having hidden panel read by screenreader

Desktop (please complete the following information):

codebender828 commented 3 years ago

Hey @goetsu ! Thanks for opening the issue. I didn't quite understand the description of the issue. Do you want to clarify what you meant?

I did however understand your point about the visibility: hidden. I think you make a good point about this.

goetsu commented 3 years ago

sorry I updated the description the code part was missing