Modal, Offcanvas Roles

[palmem29]

Bootstrap adds a role of dialog to both modal and offcanvas elements. The documentation alludes to including aria-labelledby or aria-labels on these elements. I understand that role probably isn't needed until the user engages with the element but this does create a conformance issue in the markup.

Can somone help me understand why bootstrap went this route? If I were to add a role to the markup, closing the element would just remove it. I'd have to add an event to all modal and offcanvas elements and that feels a bit sloppy.

Our goal is to eliminate all conformance issues and this - for years - is one that we have to leave in our reports and the explain away. It doesn't stop lawyers from harassing our clients though.

[julien-deramond]

Hello @palmem29,

this does create a conformance issue in the markup.

Is it an issue spotted by a tool (or a human) while analyzing the markup statically, or is it causing any issues for end-users while they navigate, for instance with screen readers?

I checked in the history of the repo, this was integrated a while ago, included in #30936 following actions and discussions in #30755 if it can help to understand why it was done like this.

[palmem29]

Yes it's an issue reported by a tool that is just scanning markup. I'm sure it works perfectly as intended when actually put to use by a user that benefits from these conformance standards.

When faced with those issues we can either a) contribute some code to make them go away or b) we can declare the issue to be a false positive. With option a: of course we'd love it if we didn't have to tack on to bootstrap just to appease the conformance crawler. With option b: lawyers can use such a crawler to drum up business and even if it's not a valid conformance concern: cost a client some $ after we've declared "false positive". We hope to have out clients' sites free of as many false positives as possible for this reason.

I don't exactly follow the conversation justifying the adding of the role attribute dynamically instead of including it statically in the markup. Could you elaborate?

[julien-deramond]

Thanks for the precision, I can understand how it can impact this use case.

I don't exactly follow the conversation justifying the adding of the role attribute dynamically instead of including it statically in the markup. Could you elaborate?

From what I understand from the discussion back then, and maybe @patrickhlauke has more elements to share or to rectify from what I'm saying here, it seems to have been done mostly to ensure that this role isn't forgotten in the markup by folks since it's mandatory.

I haven't dug into this topic too much, but by reading the current algorithm, maybe we could do both approaches with a hybrid version:

1. By default, adding the role (current behavior)
2. However, if role="dialog" was already there in the markup before the JS is executed, we don't remove it afterward. I haven't tested it but should be probably doable. This seems to be what's missing on your side currently:

   If I were to add a role to the markup, closing the element would just remove it.

It wouldn't have any impacts on current usages but would allow adding role="dialog" in the markup so that scanning tools are happy.

[palmem29]

@julien-deramond, that would be awesome! I'm really humbled to find out Bootstrap decision makers respond to and consider input so quickly. I understand if the input isn't folded in today, tomorrow, this month, etc. But just to be heard and understood this quickly is: yeah, that's the word: humbling. That would be a perfect adjustment for how we leverage Bootstrap modals and offcanvas.

[julien-deramond]

I've created #39941 to launch the discussion with the other core team members too, who can have more history regarding this topic.

Could you please share the name of the tool raising the error (if it is a public tool)? I'm kind of wondering how it detects that the role is missing since basically, the main markup is just a <div> with a display :none.

[palmem29]

The tool is called SortSite. Here's a link: https://www.powermapper.com/products/sortsite/

[palmem29]

As I was adding the role attribute to a project's modal and offcanvas elements it occurred to me... SortSite is convinced it's a violation - no one else is. Putting the role attribute in the markup convinces SortSite there is no issue regardless of whether or not the role is removed when the element is closed. Maybe it's less about changing the behavior than it is using the documentation to inform the role attribute can get tricky here? I'm interested to see what the experts come up with but I do know that adding a role attribute in the markup will get SortSite off my case.