Menu items that are neither <a> nor <span> do not show border

[db6edr]

Steps to reproduce

Create some markup like

<div class="py-4 artboard artboard-demo bg-base-200">
  <ul class="menu py-4 shadow-lg bg-base-100 rounded-box">
    <li class="menu-title">
      <span>
            Menu Title
          </span>
    </li> 
    <li class="bordered disabled">
      Item is disabled
    </li> 
    <li class="bordered">
      It has border
    </li> 
    <li class="hover-bordered">
      It shows border on hover
    </li>
  </ul>
</div>

Yes, that's an adapted version of the bordered example at https://daisyui.com/components/menu

Expected behavior

Judging from where the classes are attached, I expect the <li> to show the border regardless of what children they have. Or at least for all clickable HTML elements.

Actual behavior

The <li> show the border if and only if their child is an <a> or <span>.

Why is this bad?

Accessibility is impaired: following WCAG and a11y-101.com, <a> should only be used when clicking the element triggers a navigation to another page. When clicking an element just changes some state on the page, use a <button>.

[saadeghi]

I don't think giving clickable style to the whole <li> is a good idea because there can be multiple elements inside an <li>
Currently li > a and li > span have clickable style so I guess adding li > button will fix the accessibility issue you mentioned. Right?

[db6edr]

I don't think the left-hand border is clickable style, it's rather a kind of highlighting for menu items. And yes, the <li> can grow big - in this case, the highlight should grow as well. And if I'm not mistaken, it already does for li.bordered > a and li.bordered > span.
Back to you question: yes, having li.bordered > button render the border will fix both the a11y issue and my use case.

A more complete fix would be to have the actual li.bordered rendering the border, without adding restrictions on what children that node can have. This would give the developer working with daisyUI more freedom in how (s)he structures the markup.

[db6edr]

@saadeghi Thanks!