FSR-705 Accessibility Changes (#448)

* update to release notes

* Accessibility Fixes

https://eaflood.atlassian.net/browse/FSR-705
https://eaflood.atlassian.net/browse/FSR-701
https://eaflood.atlassian.net/browse/FSR-886

* altered telemetry model to match prototype data set, change relevant front end to display new station chart, uunit tests also fixed

* altered line thickness on historical events chart

* threshold label error fixed

* removed forecast html that isn't needed yet from station page

* added forecast banner. Amended all other banners to load banner svg as part of model

* code smells removed

* further code smell cleared

* removal of duplicate core.js script call in station.html

* bug relating to font on station page  sorted

* fixed broken map loading from station link issue, also implemented suggested code changes on PR

* fixed graph zoom issue

* threshold-label

* fix threshold display issue

* add explicit unsetting of color in css for svgs in high contrast mode

also add missing inline svg for chevron in secondary start button

* remove transparent outline on search button

* add thin top, right and bottom border to status items in high contrast mode

* Fix SVG in nav and tables on high contrast

* Add explicit support for high contrast mode on line charts

* Add client side test for bar-chart controls, refactor bar-chart code to separate dir

* Add pagination tests

* extract update control methods into separate files

* extract control creation from main bar-chart method

* Update resolution display text on bar-chart

* move pagination controls on bar-chart into controls row and update display text

* update bar-chart resolution controls to use buttons rather than inputs

* rename segmented controls to resolution controls

* update class name for pagination buttons on bar chart

* update resolution and pagination ontrols to be more generic

* Update bar chart css for high contrast mode

* update client side tests to be less flakey

* update high contrast mode media queries to use mixin

* remove upstream/downstream icons

* subnav markup and contrast fix. Amended unit tests to reflect

* fix issues with bells and warning triangles on hcm

* fix outlook map button

* remove background on chart buttons when focussed in hcm mode

* remove full stop from sign-up-for-flood-warnings

* fix custom class support on map buttons

---------

Co-authored-by: nikiwycherley <[email protected]>
Co-authored-by: Max Bladen-Clark <[email protected]>

package.json

@@ -12,6 +12,7 @@
   ],
   "scripts": {
     "start": "pm2 start config/pm2.json",
+    "start:local": "nodemon -r dotenv/config index.js",
     "build:clean": "build/clean-src",
     "build:cp-assets": "build/cp-assets",
     "build:js": "build/build-js",
@@ -81,7 +82,11 @@
     ]
   },
   "devDependencies": {
+    "dotenv": "^16.3.1",
     "husky": "^8.0.3",
-    "node-html-parser": "^6.1.1"
+    "jsdom": "^22.1.0",
+    "mockdate": "^3.0.5",
+    "node-html-parser": "^6.1.1",
+    "nodemon": "^3.0.1"
   }
 }

server/models/views/location.js

@@ -24,6 +24,7 @@ class ViewModel {
       dateFormatted: 'Up to date as of ' + moment.tz('Europe/London').format('h:mma') + ' on ' + moment.tz('Europe/London').format('D MMMM YYYY'),
       feedback: false,
       dataError,
+      signUpForFloodWarnings: 'Location:Get warnings:Location - Get warnings',
       planAhead: 'Location:Related-content:Plan-ahead-for-flooding',
       whatToDo: 'Location:Related-content:What-to-do-in-a-flood',
       recoverAfter: 'Location:Related-content:Recover-after-a-flood',
@@ -112,6 +113,7 @@ class ViewModel {
   groupSevere (group, location) {
     this.bannerSevereSub = 'There is a danger to life'
     this.severitySevereTitle = group.severity.title
+    this.severeIcon = group.severity.icon
     if (group.floods.length === 1) {
       this.bannerSevereMainLink = `/target-area/${group.floods[0].ta_code}`
       this.bannerSevereMainText = `Severe flood warning for ${group.floods[0].ta_name}`
@@ -125,6 +127,7 @@ class ViewModel {
     this.bannerSub = 'Flooding is expected'
     this.severity = group.severity.hash
     this.severityTitle = group.severity.title
+    this.mainIcon = group.severity.icon
     if (group.floods.length === 1) {
       this.bannerMainLink = `/target-area/${group.floods[0].ta_code}`
       this.bannerMainText = `Flood warning for ${group.floods[0].ta_name}`
@@ -146,6 +149,7 @@ class ViewModel {
         this.bannerMainLink = `/alerts-and-warnings?q=${encodeURIComponent(location)}#alerts`
         this.bannerMainText = `${group.floods.length} flood alerts in this area`
       }
+      this.mainIcon = group.severity.icon
     } else {
       this.alerts = group.floods.length
       if (group.floods.length === 1) {