b:dropMenu implementation question

[Lb-lea]

Hello , I'm so sorry to bother you again..... I have an issue with the way the b:dropmenu is rendered in html because the "title" (the box on which you click) is rendered as an empty link. I have to develop with a full web accessibility in mind (which you might have guessed from my constant related issues openings) and empty links don't play very well with web readers. As a suggestion I would have replaced the empty link with a button:

<li class="dropdown">
    <button class="dropdown-toggle"data-toggle="dropdown" aria-expanded="false">
        Clickable button wich right now is rendered as a link
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dtLnavigation:j_idt36:0:j_idt37">
             <li >
                   <a href="foo.xhtml" role="menuitem" tabindex="-1">my sub menu thing</a>
             </li >
              <li >
                   <a href="bar.xhtml" role="menuitem" tabindex="-1">my sub other menu thing</a>
              </li>
         </ul>
</li>

I will look into the way you make component to see if I help can create a b:buttonDropMenu or something if you are interested...

[stephanrauh]

As for bothering: when you stop bothering us, we know you've abandoned BootsFaces. That's be a pity! So just carry on bothering us :).

[stephanrauh]

Also see twbs/bootstrap#10587

[stephanrauh]

I'm not sure this is a good idea. The Bootstrap team discussed and rejected the proposal. I guess they have a good reason for this, along with a solution how to make the screenreader happy. Have a look at the documentation of the dropmenu - they're using the same HTML as we do:

https://getbootstrap.com/docs/3.3/javascript/#dropdowns

[stephanrauh]

I've tried to implement the feature according to your proposal, but it requires a lot of CSS to be added. That's why I believe there's probably a better solution for such a common problem. Just for the reference, here's the required CSS code I've found so far:

<button class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-expanded="false">

 .navbar-nav > li > button.btn-link {
        padding-top: 10px;
        padding-bottom: 10px;
        line-height: 20px;
}

.navbar-nav > li > button.btn-link:hover, .navbar-nav > li > button.btn-link:focus {
        text-decoration: none;
}

@media (min-width: 768px) {
        .navbar-nav > li > button.btn-link {
            padding-top: 15px;
            padding-bottom: 15px;
}
.navbar-inverse .navbar-nav > .open > button.btn-link, .navbar-inverse .navbar-nav > .active > button.btn-link {
    background-image: -webkit-linear-gradient(top, #080808 0%, #0f0f0f 100%);
    background-image: -o-linear-gradient(top, #080808 0%, #0f0f0f 100%);
    background-image: linear-gradient(to bottom, #080808 0%, #0f0f0f 100%);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff080808', endColorstr='#ff0f0f0f', GradientType=0);
    -webkit-box-shadow: inset 0 3px 9px rgba(0, 0, 0, 0.25);
    box-shadow: inset 0 3px 9px rgba(0, 0, 0, 0.25);
}
.navbar-inverse .navbar-nav > .open > button.btn-link, .navbar-inverse .navbar-nav > .open > button.btn-link:hover, .navbar-inverse .navbar-nav > .open > button.btn-link:focus {
    background-color: #080808;
    color: #fff;
}
.nav .open > button.btn-link, .nav .open > button.btn-link:hover, .nav .open > button.btn-link:focus {
    background-color: #eeeeee;
    border-color: #337ab7;
}
.open > button.btn-link {
    outline: 0;
}

[stephanrauh]

I'm afraid development of BootsFaces has slowed down considerably. We'll never manage to address this issue. Let's close it.