Allow disabling event listeners in dbc.Toast

[Ma-Schw]

This issue focuses on accessibility of dbc.Toast.

If I create a dbc.Toast and check it for accessiblity issues with the tool "accessbility inspector" built into Firefox I get the following message on the header of dbc.Toast:
Clickable elements must be focusable and should have interactive semantics

In the DOM it looks like this:

This issue used to occure in dash hmtl components for every html.Div. By default html.Divs are created including event listeneres.
To solve this problem the prop 'disable_n_clicks' was introduced into dash html components (link to PR)

I am hereby suggesting to add something like 'disable_n_clicks' to the header of dbc.Toast which allows to remove the event listener.

[tcbegley]

Hi @Ma-Schw

Thanks for raising this.

I can't seem to recreate this with the following example

import dash_bootstrap_components as dbc
from dash import Dash

app = Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = dbc.Container(
    dbc.Toast("This is some text", header="Header"), className="p-5"
)

if __name__ == "__main__":
    app.run_server(debug=True)

Would you be able to share a code snippet and some information about which versions of dash / dash-bootstrap-components you're using so I can look into this further?

[Ma-Schw]

Hi @tcbegley,

it turns that I caused the issue with my clientside callbacks. Sorry to have bothered you.

[tcbegley]

No problem, glad it's resolved.