From 51033d57fbb37c6fbd4826dd7326794cf9732adf Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Thu, 10 Sep 2020 23:12:29 +0100
Subject: [PATCH] Make jobs notification partial a role of region

Previously attempted in this commit by changing
the element to a <section>:

https://github.com/alphagov/notifications-admin/commit/e815a7323311a4487addd5bb99ee72b7412775fc

This broke the updateContent.js, that polls the
JSON endpoint for the partial and updates its
content with changes sent back. From what I could
tell, it broke it because the JS that does the
update gets the diff between the current partial
and the one sent in JSON and applies it to the
current one.

If the notification hasn't completed before the
page loads, the partial added to the page has a
<div> wrapping it, to initalise the
updateContent.js JS. This means the diff ends up
being between elements with a different level of
hierarchy:

Element 1:

  <div data-module="update-content">
    <div class="ajax-block-container">
    ...
    </div>
  </div>

Element 2:
  <div class="ajax-block-container">
  ...
  </div>

This seems to work OK when the partial
is a <div>, I assume because it's the same type of
element as the wrapper, but not when it's a
<section>:

Element 1:

  <div data-module="update-content">
    <section class="ajax-block-container">
    ...
    </section>
  </div>

Element 2:
  <section class="ajax-block-container">
  ...
  </section>

Because of all this, it's easier to just give it
the role of 'region'.
---
 app/templates/partials/jobs/notifications.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/templates/partials/jobs/notifications.html b/app/templates/partials/jobs/notifications.html
index b77d5bd88..1b0348279 100644
--- a/app/templates/partials/jobs/notifications.html
+++ b/app/templates/partials/jobs/notifications.html
@@ -2,7 +2,7 @@
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/form.html" import form_wrapper %}
 
-<div class="ajax-block-container" aria-labelledby='pill-selected-item'>
+<div class="ajax-block-container" aria-labelledby='pill-selected-item' role="region">
   {% if job.scheduled %}
 
     <p class="govuk-body">