Address accessibility issues raised by Sitemorse report

.env.development

@@ -6,10 +6,12 @@ THRESHOLD_FOR_RESPONSE=10000
 THRESHOLD_FOR_DEBATE=100000
 DATABASE_URL=postgres://postgres@localhost
 SECRET_KEY_BASE=FA11FA11FA11FA11FA11
-EPETITIONS_HOST=localhost
+EPETITIONS_HOST=petitions.localhost
 EPETITIONS_PORT=3000
 EPETITIONS_PROTOCOL=http
-MODERATE_HOST=localhost
+MODERATE_HOST=moderate.petitions.localhost
 SITE_TITLE="Petition parliament (Development)"
 APPSIGNAL_APP_NAME=epetitions-dev
 GEOIP_DB_PATH=/path/to/GeoLite2-Country.mmdb
+SMTP_HOST=mailcatcher.localhost
+SMTP_PORT=1025

Gemfile

@@ -43,6 +43,10 @@ gem 'aws-sdk-codedeploy'
 gem 'aws-sdk-cloudwatchlogs'
 gem 'aws-sdk-s3'
 
+group :development do
+  gem 'foreman'
+end
+
 group :development, :test do
   gem 'simplecov'
   gem 'brakeman', require: false

Gemfile.lock

@@ -224,6 +224,7 @@ GEM
     ffi-compiler (1.3.2)
       ffi (>= 1.15.5)
       rake
+    foreman (0.88.1)
     globalid (1.2.1)
       activesupport (>= 6.1)
     hashdiff (1.1.1)
@@ -498,6 +499,7 @@ DEPENDENCIES
   faker
   faraday
   faraday_middleware
+  foreman
   image_processing
   jbuilder
   jquery-rails

Procfile.dev

@@ -0,0 +1,3 @@
+web: bin/rails server -b 0.0.0.0 -p 3000
+worker: MIN_PRIORITY=10 bin/rake jobs:work
+counter: MAX_PRIORITY=5 bin/rake jobs:work

README.md

@@ -9,37 +9,37 @@ We recommend using [Docker Desktop][2] to get setup quickly. If you'd prefer not
 ### Create the databases
 
 ```
-docker compose run --rm web rake db:setup
+bin/run rake db:setup
 ```
 
 ### Load the country list
 
 ```
-docker compose run --rm web rake epets:countries:load
+bin/run rake epets:countries:load
 ```
 
 ### Fetch the regions list
 
 ```
-docker compose run --rm web rails runner 'FetchRegionsJob.perform_now'
+bin/run rails runner 'FetchRegionsJob.perform_now'
 ```
 
 ### Fetch the constituencies list
 
 ```
-docker compose run --rm web rails runner 'FetchConstituenciesJob.perform_now'
+bin/run rails runner 'FetchConstituenciesJob.perform_now'
 ```
 
 ### Fetch the department list
 
 ```
-docker compose run --rm web rails runner 'FetchDepartmentsJob.perform_now'
+bin/run rails runner 'FetchDepartmentsJob.perform_now'
 ```
 
 ### Enable signature counting
 
 ```
-docker compose run --rm web rails runner 'Site.enable_signature_counts!(interval: 10)'
+bin/run rails runner 'Site.enable_signature_counts!(interval: 10)'
 ```
 
 ### Start the services
@@ -55,25 +55,25 @@ Once the services have started you can access the [front end][3], [back end][4]
 Before running any tests the database needs to be prepared:
 
 ```
-docker compose run --rm web rake db:test:prepare
+bin/run rake db:test:prepare
 ```
 
 You can run the full test suite using following command:
 
 ```
-docker compose run --rm web rake
+bin/run rake
 ```
 
 Individual specs can be run using the following command:
 
 ```
-docker compose run --rm web rspec spec/models/parliament_spec.rb
+bin/run rspec spec/models/parliament_spec.rb
 ```
 
 Similarly, individual cucumber features can be run using the following command:
 
 ```
-docker compose run --rm web cucumber features/suzie_views_a_petition.feature
+bin/run cucumber features/suzie_views_a_petition.feature
 ```
 
 ## Moderation Portal SSO
@@ -134,7 +134,7 @@ The configuration attributes are:
 
 [1]: https://petition.parliament.uk
 [2]: https://www.docker.com/products/docker-desktop
-[3]: http://localhost:3000/
-[4]: http://localhost:3000/admin
-[5]: http://localhost:1080/
+[3]: http://petitions.localhost:3000/
+[4]: http://moderate.petitions.localhost:3000/admin
+[5]: http://mailcatcher.localhost:1080/
 [6]: https://github.com/omniauth/omniauth

app/assets/stylesheets/govuk_frontend_toolkit/colours/_palette.scss

@@ -48,7 +48,7 @@ $light-blue-25: #d5e8f3;
 
 // Standard palette, greys
 $black: #0b0c0c;
-$grey-1: #6f777b;
+$grey-1: #56595d;
 $grey-2: #bfc1c3;
 $grey-3: #dee0e2;
 $grey-4: #f8f8f8;

app/assets/stylesheets/govuk_template/_header.scss

@@ -255,10 +255,15 @@
   background-color: $light-blue-25;
   padding-top: 10px;
   padding-bottom: 10px;
+
   p {
     @extend %site-width-container;
     @include core-16;
     margin-top: 0;
     margin-bottom: 0;
   }
+
+  a:hover {
+    text-decoration: underline;
+  }
 }

app/assets/stylesheets/petitions/_accessibility.scss

@@ -6,6 +6,7 @@ a {
 a:focus {
   background-color: $focus-colour;
   outline: 3px solid $focus-colour;
+  outline-offset: 0px;
 }
 
 input:focus,

app/assets/stylesheets/petitions/_buttons.scss

@@ -19,6 +19,10 @@
     width: inherit;
     margin-right: $gutter-half;
   }
+
+  &:hover {
+    text-decoration: none;
+  }
 }
 
 .button {

app/assets/stylesheets/petitions/_details.scss

@@ -16,11 +16,19 @@ details {
     @include media(desktop){
       &:hover {
         color: $link-hover-colour;
+        text-decoration: underline;
+        text-decoration-thickness: 2px;
+        text-underline-offset: 3px;
       }
     }
 
     &:focus {
+      background-color: $focus-colour;
       outline: 3px solid $focus-colour;
+
+      &:hover {
+        text-decoration: none;
+      }
     }
   }
 

app/assets/stylesheets/petitions/_footer.scss

@@ -8,9 +8,11 @@
 
   a {
     color: $black;
+    text-decoration: none;
 
     &:hover {
       text-decoration: underline;
+      text-decoration-thickness: 2px;
     }
   }
 
@@ -43,6 +45,12 @@
         @include background-image("graphics/graphic_open-government-licence", 41px, 17px);
         background-position: 0 0;
         background-repeat: no-repeat;
+
+        &:hover {
+          border-bottom: 2px solid $text-colour;
+          padding-bottom: 3px;
+          margin-bottom: -5px;
+        }
       }
     }
 

app/assets/stylesheets/petitions/_typography.scss

@@ -111,7 +111,9 @@ p {
 // Link styles
 a {
   color: $link-colour;
-  text-decoration: none;
+  text-decoration: underline;
+  text-decoration-thickness: 2px !important;
+  text-underline-offset: 3px !important;
 }
 
 a:visited {
@@ -120,6 +122,12 @@ a:visited {
 
 a:hover {
   color: $link-hover-colour;
+  text-decoration: underline;
+  text-decoration-thickness: 2px;
+}
+
+a:hover:focus {
+  text-decoration: none;
 }
 
 a:active {

app/assets/stylesheets/petitions/admin/_header.scss

@@ -17,6 +17,11 @@
         color: $white;
         display: inline;
         padding: 0;
+        &:hover {
+          text-decoration: underline;
+          text-decoration-thickness: 2px;
+          text-underline-offset: 3px;
+        }
       }
     }
   }

app/assets/stylesheets/petitions/admin/views/_hub.scss

@@ -31,6 +31,16 @@
         top: $gutter-half;
         right: $gutter-two-thirds;
       }
+
+      &:hover {
+        background-color: darken($house-of-commons-green, 5%);
+        text-decoration: none;
+      }
+
+      &:focus {
+        background-color: $focus-colour;
+        outline: none;
+      }
     }
   }
 
@@ -39,16 +49,28 @@
     margin-left: $gutter-half;
     margin-right: $gutter-half;
 
-    .queue-stable {
+    .queue-stable a {
       background-color: $house-of-commons-green;
+
+      &:hover {
+        background-color: darken($house-of-commons-green, 5%);
+      }
     }
 
-    .queue-caution {
+    .queue-caution a {
       background-color: $caution;
+
+      &:hover {
+        background-color: darken($caution, 5%);
+      }
     }
 
-    .queue-danger {
+    .queue-danger a {
       background-color: $danger;
+
+      &:hover {
+        background-color: darken($danger, 5%);
+      }
     }
 
     .panel {
@@ -65,6 +87,15 @@
       a {
         color: $white;
         display: block;
+        height: 100%;
+
+        &:hover {
+          text-decoration: none;
+        }
+
+        &:focus {
+          outline: none;
+        }
       }
 
       .summary {
@@ -83,19 +114,21 @@
           margin-right: $gutter-half;
         }
 
-        .tagged-in-moderation {
+        .tagged-in-moderation a {
           background-color: $grey-1;
+          color: $white;
 
-          a {
-            color: $white;
+          &:hover {
+            background-color: darken($grey-1, 5%);
           }
         }
 
-        .untagged-in-moderation {
+        .untagged-in-moderation a {
           background-color: $grey-3;
+          color: $black;
 
-          a {
-            color: $black;
+          &:hover {
+            background-color: darken($grey-3, 5%);
           }
         }
 

app/assets/stylesheets/petitions/admin/views/_shared.scss

@@ -1,4 +1,8 @@
 .admin {
+  a {
+    text-decoration: none;
+  }
+
   select.form-control {
     height: 40px;
   }