Modals - Different methods shows warning suggestion other method

SonarQube Server / Community Build
1

Must-share information (formatted with Markdown):

  • 8.30.0.15605
  • Setup bootstrap Modal popups
  • 2 different methods, and

I have 2 different modal popups that have one using to start the creation and to start the other. In the warnings, when using I get Web:S6822:
The element dialog has an implicit role of dialog. Defining this explicitly is redundant and should be avoided.
When I use , I get Web:S6819:
Use instead of the dialog role to ensure accessibility across all devices.

The Modal are below. I’m not sure exactly what needs to be change to fix the warnings and have the modals to popup.

<--Modal 1--><div class="modal" tabindex="-1" role="dialog" aria-labelledby="scheduledChangedHeader" id="scheduledChangedModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content ">
            <div class="modal-header text-center">
                <h3 class="modal-title w-100" style="text-align: center" id="scheduledChangedHeader">Last 20 Schedule Changes</h3>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="darkGradient" id="divLoadingScheduledChangedModal" style="position: absolute; top: 10%; left: 30%; margin-left: auto; margin: auto; text-align: center; font-size: medium; color: white; font-weight: bold" visible="false"></div>
                <div id="tblScheduleChanged"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-success" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

Modal 2

<dialog class="modal fade" tabindex="-1" role="dialog" aria-labelledby="modalHeader" id="commentModal">
    <div class="modal-dialog modal-xl">
        <div class="modal-content ">
            <div class="modal-header">
                <h3 class="modal-title" style="text-align: center" id="modalHeader">Coil Comment</h3>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span <%--aria-hidden="true"--%>>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    <table class="table table-bordered table-sm" id="tableEdit" style="width: 100%; font-size: large">
                        <thead>
                            <tr>
                                <th style="text-align: center">CoilId</th>
                                <th style="text-align: center">Comment</th>
                            </tr>
                        </thead>
                        <tbody id="tableEditBody"></tbody>
                    </table>
                    <input type="hidden" id="txtCurrentUser" name="txtCurrentUser" />
                    <button type="button" id="btnDeleteComment" class="btn btn-warning" data-dismiss="modal">Delete<i class="fa-regular fa-square-minus"></i></button>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" id="btnEditSave" class="btn btn-success" data-dismiss="modal">Save</button>
                <button type="button" id="btnEditCancel" class="btn btn-danger" data-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</dialog>
2

Hi,

Can you clarify which version you’re seeing this in? If you’re not sure, you can find the SonarQube version in the page footer.

 
Thx,
Ann

3

It was at the top, but I didn’t clarify that it was the version I was using :8.30.0.15605

4

Hi,

I don’t know what product version 8.30 corresponds to.

 
Thx,
Ann

5

Thats the SonarQube version. I’ve attached a screenshot

2025-12-04_09-05-02
2025-12-04_09-05-02623×228 33.7 KB

6

Hi,

The current version of SonarQube for Visual Studio (formerly SonarLint) is 9.1. Can you upgrade and see if this is still replicable?

 
Thx,
Ann

7

Yes, with the latest version, I get the same warnings

2025-12-05_13-20-42
2025-12-05_13-20-42590×222 32.3 KB

9

Hi,

Thanks for verifying that. I’ve flagged this for the language experts.

 
Ann

10

Hi @BartNucor,

I believe the you are missing some words from your response, which makes it a bit hard to read.

However, the rule, first of all wants you to use the instead of

tag. Once you change the
→ , the “role“ attribute is unnecessary. So how your Modal 1 would start (notice the usage of and removal of “role“=”dialog”):

<--Modal 1--><dialog class="modal" tabindex="-1" aria-labelledby="scheduledChangedHeader" id="scheduledChangedModal">

Hope this helps,

Cheers,

Michal

12

Thanks for the help. This can be closed.