FlexLayout icon indicating copy to clipboard operation
FlexLayout copied to clipboard

Button In Factory Title & Accessibility Support

Open danyabdo94 opened this issue 5 years ago • 3 comments

  • First of all its an awesome project really .
  • Does FlexLayout supports which level of conformance accessibility .
  • I wanted to added a Button In Factory Title event listener like that titleFactory = (node: TabNode) => { if (node.getId() === 'custom-tab') { return <> <div> <span> Data </span> <button onClick={(e)=>alert("a")}> YYYX </button> </div> </> } return; } and I tried to add e.stopPropagation(); .. but It doesn't work . is there a way without changing the library from inside ?
  • can I prevent tab to be drag-able outside its owner/tabset to be dragable to this tabset only .. like re-arrange of tabs only.

danyabdo94 avatar Jul 22 '20 12:07 danyabdo94

to prevent tab to be drag-able outside its owner/tabset

from the readme:

To control where nodes can be dropped you can add a callback function to the model:

model.setOnAllowDrop(this.allowDrop); example:


    allowDrop(dragNode, dropInfo) {
        let dropNode = dropInfo.node;

        // prevent non-border tabs dropping into borders
        if (dropNode.getType() == "border" && (dragNode.getParent() == null || dragNode.getParent().getType() != "border"))
            return false;

        // prevent border tabs dropping into main layout
        if (dropNode.getType() != "border" && (dragNode.getParent() != null && dragNode.getParent().getType() == "border"))
            return false;

        return true;
    }

nealus avatar Jul 22 '20 18:07 nealus

Thanks @nealus but what about

  • Accessibility
  • not working event listener on a Button in Factory Title

danyabdo94 avatar Jul 26 '20 11:07 danyabdo94

There is currently no accessibility support in flexlayout, PR's to add support would be welcome.

Ref the button question, you can add an onAction callback to the layout and prevent the SELECT_TAB action

nealus avatar Jul 30 '20 06:07 nealus