We Keep Coding

Enter key is not working while NVDA is reading the bootstrap modal content, Last button is getting clicked when the complete content is read

When the modal is shown to the user and focus is set on the close button using 'shown.bs.modal'. NVDA reads the overview first. At that time enter key is working and closing the modal. But when NVDA reads the content using HTML syntax e.g (<h2> Something </h2> as heading level 2 something) then enter key is not working. Any of the keyup, keydown and keypress event is not getting triggered. Only the escape key is working at the time to close the modal or click the 'close' button.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>

To get the key events to work, you can try adding
role="application"
<!-- Modal -->
<div role="application" class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
You should also look at the aria-hidden attribute.https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-hidden.
Note that:"Adding aria-hidden="true" to an element removes that element and all of its children from the accessibility tree. "

How to get event.relatedTarget closest class text

I am working on the below code. Why am I unable to get closest paragraph .para text of each of buttons using $(event.relatedTarget)?
As you can see I am getting dummy index number for each event related buttons as well:
$('#myModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) ;
console.log(button.index());
console.log(button.parent().closest('.para').text());
})
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<!-- Button trigger modal -->
<div class="container"><p class="para">Winter</p></div>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
First Launcegr
</button>
<div class="container"><p class="para">Summer</p></div>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">
Second Launcegr
</button>
<div class="container"><p class="para">Fall</p></div>
<button type="button" class="btn btn-warning btn-lg" data-toggle="modal" data-target="#myModal">
Third Launcegr
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>

It's traversing the wrong part of the DOM. Try this:
$('#myModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
console.log(button.prev().find('.para').text());
});

How to create a JS script to apply to multiple Bootstrap modals on one page

I am trying to set up a page with 14 different modals. I previously set them up so they would all open normally, and they've worked. But I found something to let me make them draggable when opened. So I am trying to figure out how to do that, and finally got it to work, but only with one modal. My other modals do not open unless I change the code to reflect the name of that modal instead. Then the first modal doesn't work. Please tell me how to make the JavaScript code generalized for all of my modals.
Here is my script's code:
<script type="text/javascript">
window.onload=function(){
$('#btn1').click(function() {
// reset modal if it isn't visible
if (!($('.modal.in').length)) {
$('.modal-dialog').css({
top: 110,
left: 500
});
}
$('#modal1').modal({
backdrop: true,
show: true
});
$('.modal-dialog').draggable({
handle: ".modal-header"
});
});
}
</script>
Here is my modals' code, with only two modals instead of all 14:
<button id="btn1" class="btn btn-info btn-lg" data-target="#modal1">Modal 1</button>
<div class="modal fade" id="modal1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" >Modal 1</h4>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<button id="btn2" class="btn btn-info btn-lg" data-target="#modal2">Modal 2</button>
<div class="modal fade" id="modal2" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" >Modal 2</h4>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
If I add another script after the one I have with a new "#btn" and/or a new "#modal", the latter one only works.
If I add a comma after the first "btn" and or "modal", it makes the two modals overlap.
Can someone help please? What am I doing wrong?

If you would like to avoid setting all the modals in JavaScript (and assuming you don't want to add additional coding per each modal), could you just make them all toggle via HTML data attributes? Then you'd only need to initialize your draggable code.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Description of the page less than 150 characters">
<title>Modals</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<style>
</style>
</head>
<body>
<div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="modal1Label" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modal1Label">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Modal 1
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="modal2" tabindex="-1" role="dialog" aria-labelledby="modal2Label" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modal2Label">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Modal 2
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<div class="container-fluid h-100">
<h1>Modals</h1>
<button type="button" id="btn1" class="btn btn-info btn-lg" data-toggle="modal" data-target="#modal1">Modal 1</button>
<button type="button" id="btn2" class="btn btn-info btn-lg" data-toggle="modal" data-target="#modal2">Modal 2</button>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/draggable/1.0.0-beta.8/draggable.js" integrity="sha256-IqgasFC+xodVUxVInsmbOaKvevIOjh9iqPUBPd2tyVs=" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
$('.modal-dialog').draggable({
handle: ".modal-header"
});
});
</script>
</body>
</html>

bootstrap modal detecting which button is pressed when the modal content is a link href

I'm having an issue with detecting which button is pressed in a modal window, when the modal content is from a link href. My real code is all php dynamically generated, but I've included a simple example below using html.
I know that when you use the modal with the href it replaces all the 'modal-content' and therefore I'm guessing that my buttons that are coming from the href are somehow not named what I think or something like that.
Sadly I'm pretty new at this and spent ages yesterday trying to figure this out and haven't managed to get it working. So any help is greatly appreciated.
button.html :-
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style type="text/css">
</style>
<title>Modal Button test with it loading another page (so some php code)</title>
<script type='text/javascript'>
$(window).load(function(){
$('#myModal .modal-footer button').on('click', function (e) {
var $target = $(e.target);
$(this).closest('.modal').on('hidden.bs.modal', function (e) {
alert('The buttons id that closed the modal is: #' + $target[0].id);
});
});
});
</script>
</head>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<form class="form-horizontal" method="post" id="modal_form">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title main</h4>
</div>
<div class="modal-body">
<p>Some text from the modal code in the main html<p>
</div>
<div class="modal-footer">
<button type="button" name="in_reserve1" id="confirm-cancel-button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" name="in_reserve2" id="confirm-save-button" class="btn btn-primary" data-dismiss="modal">Save changes</button>
</div>
</form>
</div>
</div>
</div>
</div>
<a type="button" href="modal.html" class="btn btn-info btn-lg" data-toggle="modal" data-id="reservedb" data-target="#myModal">Doesn't Work</a>
<!-- <a type="button" class="btn btn-info btn-lg" data-toggle="modal" data-id="reservedb" data-target="#myModal">Works</a> -->
The commented out button correct detects which button closes the modal.
However, when you run the one with the href it doesn't work.
modal.html is :-
<form class="form-horizontal" method="post" id="modal_form">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title url</h4>
</div>
<div class="modal-body">
<p>Some text from the modal code in the href url<p>
</div>
<div class="modal-footer">
<button type="button" name="in_reserve1" id="confirm-cancel-button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" name="in_reserve2" id="confirm-save-button" class="btn btn-primary" data-dismiss="modal">Save changes</button>
</div>
</form>
So hopefully someone will point me in the right direction to get this sorted.
Thanks.

The buttons in the modal are completely yours (They are not generating in the script so you can do with them whatever you want).
So, for the cancel button, you can leave the data-dismiss="modal".
To the save button you can call your code and when you done, call to hide method.
Example:
$('#confirm-save-button').on('click', function() {
alert('Saved!!');
$('#myModal').modal('hide');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" name="in_reserve2" id="confirm-save-button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>

How to create an alert with HTML instead of js

I am trying to figure out how to create an HTML element that is like the JavaScript confirm(); element. I would be fine with just using the JS element, but I am not able to edit the style. Am I able to do this?
Thank You!

You could use Bootstrap alerts for example:
http://getbootstrap.com/javascript/#alerts
There is also http://t4t5.github.io/sweetalert/

Elaborating on Craig's answer, try out the following code to use the Bootstrap framework for an alert that is indeed editable.
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
Here's a JSFiddle.