rc/the-dads-got-it (#700)

* removing redundant command (#699)

* feature/TSS-1438-contrast-uat-banner (#697)

* updatin UAT label text banner colour for accessibility

* fixing contrast radio on dev

* fixing naming

* TSS-1424-dmas-dac-custom-components-02-a-dev (#704)

* fixing acceciblity issues on search

* lint fix

* TSS/1425-custom-components-03-company-accessibility (#703)

* Adding href, role and aria-label tags to company cards to enable tab accessibility

* Making the company name in the aria label dynamic

* Updating href so that it takes the user to the correct location, i.e. company details

* Adding interactivity to all elements within each card so a user can tab between each

* Removing span tags

* Prettier formating

* using button element in accessiblity (#701)

* using button element in accessiblity

* adding aria label

* fixing label on sector and affected comapnies for the remove button to be more accessible

* lint fix

* TSS-1873: Companies Form Labels (#705)

* Adding label for top search bar

* Adding label for bottom search bar

* Updating text for top search box

* Prettier formatting

* Updating test to avoid using defunct tags (#706)

---------

Co-authored-by: Elizabeth Pedley <[email protected]>

Author: osimuka

Makefile

@@ -34,6 +34,10 @@ django-collectstatic: ## Collect static files.
 django-static: ## Compress SCSS and collect static files, clears staticfiles folder.
 	docker-compose exec web ./manage.py collectstatic --no-input -i *.scss --clear
 
+.PHONY: react-watch
+react-watch: ## Run react's dev server (tailing).
+	npm run dev
+
 .PHONY: django-test
 django-test: ## Run django tests. (Use path=appname/filename::class::test) to narrow down
 	docker-compose exec web pytest -n 6 tests/$(path)

core/frontend/src/css/app-components/_badges.scss

@@ -31,12 +31,17 @@
     }
 
     &--in-tab {
-        background-color: $govuk-orange;
+        background-color: #fcd6c3;
+        color: #6e3619;
         text-transform: none;
         font-size: 16px;
         margin-left: govuk-em(8, 16);
         padding: govuk-em(4, 16) govuk-em(8, 16);
         line-height: 1;
+
+        &:hover {
+            color: #6e3619;
+        }
     }
 
     &--attention{

core/frontend/src/css/app-components/_env-banner.scss

@@ -18,16 +18,21 @@
 
   &.env-banner-dev {
     background-color: #3c5cff;
+    color: #F2F2F2;
   }
 
   &.env-banner-uat {
     background-color: #FF69B4;
+    color: #0b0c0c;
   }
 
   .env-banner__dismiss {
     float: right;
-    color: white !important;
+    color: #F2F2F2 !important;
     text-decoration: none;
+    &.env-banner__dismiss--uat {
+      color: #0b0c0c !important;
+    }
   }
 
   @media (min-width: 800px ){

core/frontend/src/css/app-components/_typeahead.scss

@@ -1,4 +1,4 @@
-$highlight-colour: $govuk-light-grey;;
+$highlight-colour: $govuk-light-grey;
 
 .multiselect {
 	color: $govuk-black;

core/frontend/src/js/pages/report/sectors-wizard-step.js

@@ -20,7 +20,7 @@ ma.pages.report.sectorsWizardStep = function () {
             appendSector(
                 "id_barrier-sectors-affected-sectors",
                 "sectors_select",
-                "sectors_list_display"
+                "sectors_list_display",
             );
             otherSectorSelect.style.display = "none";
         }
@@ -60,7 +60,7 @@ ma.pages.report.sectorsWizardStep = function () {
     const updateSectorDisplay = function () {
         const sector_list = document.getElementById("sectors_select");
         const current_selected_list = document.getElementById(
-            "id_barrier-sectors-affected-sectors"
+            "id_barrier-sectors-affected-sectors",
         );
         const display_list = document.getElementById("sectors_list_display");
 
@@ -75,21 +75,26 @@ ma.pages.report.sectorsWizardStep = function () {
                     if (option.value == selected_list[i]) {
                         let sector_entry = document.createElement("li");
                         sector_entry.classList.add(
-                            "selection-list__list__item"
+                            "selection-list__list__item",
                         );
                         sector_entry.appendChild(
-                            document.createTextNode(option.text)
+                            document.createTextNode(option.text),
                         );
-                        let remove_link = document.createElement("a");
+                        // Add remove link to each sector
+                        let remove_link = document.createElement("button");
                         let remove_link_text =
                             document.createTextNode("remove");
-                        remove_link.setAttribute("href", "#");
+                        remove_link.setAttribute("type", "button");
+                        remove_link.setAttribute(
+                            "aria-label",
+                            `remove ${option.innerHTML}`,
+                        );
                         remove_link.addEventListener("click", function () {
                             removeItem(option.value);
                         });
                         remove_link.appendChild(remove_link_text);
                         remove_link.classList.add(
-                            "selection-list__list__item__remove-form"
+                            "selection-list__list__item__remove-form__submit",
                         );
                         sector_entry.appendChild(remove_link);
                         display_list.appendChild(sector_entry);
@@ -105,7 +110,7 @@ ma.pages.report.sectorsWizardStep = function () {
             // Hide newly selected option in the other sectors selection box
             otherSectorItemElementName = "other-sectors-select-".concat(sector);
             const otherSectorItem = document.getElementById(
-                otherSectorItemElementName
+                otherSectorItemElementName,
             );
             otherSectorItem.style.display = "none";
             // Show previously selected option in the other sectors selection box
@@ -114,11 +119,11 @@ ma.pages.report.sectorsWizardStep = function () {
                 currentMainSectorSelected != ""
             ) {
                 previousSectorItemElementName = "other-sectors-select-".concat(
-                    currentMainSectorSelected
+                    currentMainSectorSelected,
                 );
                 console.log(previousSectorItemElementName);
                 const previousSectorItem = document.getElementById(
-                    previousSectorItemElementName
+                    previousSectorItemElementName,
                 );
                 previousSectorItem.style.display = "block";
             }
@@ -129,7 +134,7 @@ ma.pages.report.sectorsWizardStep = function () {
 
     const removeItem = function (item) {
         const current_selected_list = document.getElementById(
-            "id_barrier-sectors-affected-sectors"
+            "id_barrier-sectors-affected-sectors",
         );
         if (current_selected_list.value == "") {
             const selected_list = current_selected_list.value;