implement focus management with DOM deletion and debug delete script

bag_transfer/static/js/alert.js

@@ -5,6 +5,7 @@ $(document).ready(function() {
   $('#messages').on('click', '.alert__button', function() {
     $(this).closest('.alert').fadeOut(global_fade_time, function() {
       $(this).remove();
+      $('h1').first().focus(); //after removal, move focus to the h1
     });
   });
 });

bag_transfer/static/js/delete_object_js.js

@@ -1,29 +1,42 @@
-var confirm_modal = $('#modal-warning');
-var last_active_rs = 0;
-$(function () {
-  $('.object-delete-button').click(function(e){
-  	e.preventDefault();
-    object_type = $(this).data('object')
-  	last_active_rs = $(this).closest('tr').attr('rel');
-  	confirm_modal.attr('data-api-url', $(this).attr('href'));
-    confirm_modal.find('.modal-title').html('Delete ' + object_type.replace(/\-/g, ' ') + '?')
-  	MicroModal.show("modal-warning");
-  });
+	var confirm_modal = $('#modal-warning');
+	var last_active_rs = 0;
 
-  $('.object-modal-delete-button').click(function(e){
-  	$.get(confirm_modal.attr('data-api-url'),{},function(resp){
-  		if(resp.success){
-        var table = '.' + object_type + '-table'
-  			var len_rows = $(table + ' tbody tr').length;
-  			$(table + ' tr[rel="' + last_active_rs + '"]').fadeOut().remove();
-  			if (len_rows <= 1){
-  				$(table).fadeOut().remove();
-  				$('.has-no-' + object_type + '-p').show()
-  			}
-  		} else {
-  			alert('Sorry there was a problem deleting the ' + object_type.replace(/\-/g, ' ') + '.');
-  		}
-  	});
-  	MicroModal.close("modal-warning");
-  });
-});
+	$(function () {
+		$('.object-delete-button').click(function(e){
+			e.preventDefault();
+			object_type = $(this).data('object')
+			last_active_rs = $(this).closest('tr').attr('rel');
+			confirm_modal.attr('data-api-url', $(this).attr('href'));
+			confirm_modal.find('.modal-title').html('Delete ' + object_type.replace(/\-/g, ' ') + '?')
+			console.log("Opening modal for deleting: ", object_type);
+			MicroModal.show("modal-warning");
+		});
+
+		$('.object-modal-delete-button').click(function(e){
+			$.get(confirm_modal.attr('data-api-url'),{},function(resp){
+				if(resp.success){
+					let table = '.' + object_type + '-table'
+					let len_rows = $(table + ' tbody tr').length;
+
+					console.log("Rows before deletion:", len_rows);
+					$(table + ' tr[rel="' + last_active_rs + '"]').fadeOut().remove(); //delete row
+					let titleElement = $('#' + object_type + '-title');
+					titleElement.focus(); //move focus to h2 after row is removed
+
+					if (len_rows <= 1){
+						$(table).remove();
+
+						// Create the "has-no-" paragraph with object_type
+						let paragraphText = object_type === 'bagit-profile' ? 'There is no existing BagIt profile.' : 'There are no existing rights statements.';
+						let paragraph = $('<p class="has-no-' + object_type + '-p">' + paragraphText + '</p>');
+
+						titleElement.parent().after(paragraph);
+						paragraph.show();
+					}
+				} else {
+					alert('Sorry there was a problem deleting the ' + object_type.replace(/\-/g, ' ') + '.');
+				}
+			});
+			MicroModal.close("modal-warning");
+		});
+	});

bag_transfer/templates/appraise/main.html

@@ -4,7 +4,7 @@
 
 {% block content %}
 {% if not uploads_count %}
-  <p>No transfers to appraise</p>
+  <p>No transfers to appraise.</p>
 {% else %}
   <table id="appraise_table" class="table table-striped dataTable">
     <thead>
@@ -164,6 +164,7 @@
   var cls = (action == 'accepted') ? 'blue':'orange'
   var name = $(row).children('td').first().text()
   $(row).remove()
+  $('h1').first().focus(); //after removal, move focus to the h1
   displayMessage(cls, 'Transfer <b>'+name+'</b> '+action+'.', true);
 }
 

bag_transfer/templates/parts/bagit_profiles_table.html

@@ -23,6 +23,6 @@
     </tbody>
   </table>
 {% else %}
-  <p class="has-no-bagit-profile-p">No BagIt Profile for this organization.</p>
+  <p class="has-no-bagit-profile-p">There is no existing BagIt profile.</p>
 {% endif %}
 

bag_transfer/templates/parts/profiles_box.html

@@ -1,5 +1,5 @@
 <div class="title__container">
-	<h2>BagIt Profiles</h2>
+	<h2 id="bagit-profile-title" tabindex="-1">BagIt Profiles</h2>
 	{% if request.user.is_manager or request.user.is_superuser and not object.profile.all %}
 	<a href="{% url 'bagit-profiles:add' %}?org={{object.pk}}" class="btn btn--blue btn--sm mb-20">
 		<span class="material-icon material-icon--space-after" aria-hidden="true">add</span>

bag_transfer/templates/parts/rights_box.html

@@ -1,5 +1,5 @@
 <div class="title__container">
-	<h2>Rights Statements</h2>
+	<h2 id="rights-statement-title" tabindex="-1">Rights Statements</h2>
 	{% if request.user.is_manager or request.user.is_superuser %}
 		<a href="{% url 'rights:add' %}?org={{object.pk}}" class="btn btn--sm btn--blue mb-20">
 		<span class="material-icon material-icon--space-after" aria-hidden="true">add</span>

bag_transfer/templates/parts/rights_table.html

@@ -28,4 +28,4 @@
   </table>
 {% endif %}
 
-<p class="has-no-rights-statement-p" {% if org.rights_statements %}style="display:none"{% endif %}>{{org.name}} has no rights statements.</p>
+<p class="has-no-rights-statement-p" {% if org.rights_statements %}style="display:none"{% endif %}>There are no existing rights statements.</p>

bag_transfer/templates/transfers/base.html

@@ -40,7 +40,7 @@
         <div class="container">
           {% block title_section %}
           <div class="title__container">
-            <h1>{% block h1_title %}Default Title{% endblock %}</h1>
+            <h1 tabindex="-1">{% block h1_title %}Default Title{% endblock %}</h1>
             <div class="title__actions">{% block title_actions %}{% endblock %}</div>
           </div>
           {% endblock %}