How does the drawer component work?

[shawnlikescode]

I've been trying to get the drawer component to work correctly for several hours with little progress. I'm hoping someone can explain the bits that I'm not getting.

I'm working in React.

My issue is as follows:

I can't figure out how to close the drawer. I think I understand how it's suppose to work.

Which is this:

• The input styled with drawer-toggle manages the open/close state of the drawer
• The labels styled drawer-button and drawer-overlay are clickable elements that toggle drawer drawer-overlay renders over drawer-content.
• The class drawer-content styles the element of whatever page is currently being rendered.

I problem appears when I need to close the drawer. The way I understand it I should be able to do something like this:

const myComponent = () => {
...BLAH

const handleDrawerToggle = () => {
   setDrawerState(!drawerState)
}
return (
  <>
<label htmlFor='menu' className='drawer-overlay' onClick={handleDrawerToggle}></label>
</>
);
}

I don't think this approach is wrong so the major problem is that I am likely misunderstanding something about how this classes must be layered together because the overlay doesn't obscure the drawer-content container and is not clickable.

Thanks in advance for any suggestions or help. If anyone has an example of the drawer working in a manner that function essentially identical to daisyUI docs that would be a huge help.

[saadeghi]

@shawnlikescode drawer works with the hidden checkbox and labels are there to control the checkbox so there wont be any JS needed. however, labels don't really change the value of the checkbox when clicked. so If you want to control the open/close functionality with JS, you can use onClick for the buttons and also drawer-overlay to handle the value of checkbox.
Here's an example using React: https://codesandbox.io/s/daisyui-drawer-react-ne6mk

[kaushalyap]

@saadeghi How is accessibility in Drawer component and other DaisyUI components?

[saadeghi]

@kaushalyap daisyUI is using standard HTML elements and there are no JavaScript to simulate functionalities. So screen readers can read and interact with the elements.
Drawer is using a hidden checkbox to open/close but since HTML <label> tags are pointing to that checkbox, screen readers will read the label text when you focus it and there are no accessibility issues with it.

Same thing happens with modal and collapse
Other elements are just styles so there are no issues there either.

However there are many things you should consider:

• You should use accessible colors. Some daisyUI themes are using funny colors so there might issues for color blindness, etc... You can add your own theme however.
• You should add ARIA roles, ARIA labels and alt, title attributes where ever needed. These are not something I can provide because it depends on your content.
• Use semantic HTML tags.