PR suggestions

app/components/tab_navigation_component.html.erb

@@ -1,13 +1,15 @@
 <nav class="app-tab-navigation" aria-label="sub menu">
   <ul class="app-tab-navigation__list">
     <% items.each do |item| %>
-      <li class="app-tab-navigation__item">
-        <% if item.fetch(:current, false) || current_page?(strip_query(item.fetch(:url))) %>
+      <% if item.fetch(:current, false) || current_page?(strip_query(item.fetch(:url))) %>
+        <li class="app-tab-navigation__item app-tab-navigation__item--current">
           <%= govuk_link_to item[:name], item[:url], class: 'app-tab-navigation__link', aria: { current: 'page' } %>
-        <% else %>
+        </li>
+      <% else %>
+        <li class="app-tab-navigation__item">
           <%= govuk_link_to item[:name], item[:url], class: 'app-tab-navigation__link' %>
-        <% end %>
-      </li>
+        </li>
+      <% end %>
     <% end %>
   </ul>
 </nav>

app/javascript/styles/_tab-navigation.scss

@@ -5,12 +5,12 @@
 
 .app-tab-navigation__list {
   @include govuk-clearfix;
-  // left: govuk-spacing(-3);
+  left: govuk-spacing(-3);
   list-style: none;
   margin: 0;
   padding: 0;
   position: relative;
-  // right: govuk-spacing(-3);
+  right: govuk-spacing(-3);
   width: calc(100% + #{govuk-spacing(6)});
 
   @include govuk-media-query($from: tablet) {

app/views/layouts/application.html.erb

@@ -39,8 +39,8 @@
         if current_user.nil?
           component.navigation_item(text: 'Case logs', href: '/case_logs')
         elsif
+          component.navigation_item(text: 'Your organisation', href: "/organisations/#{current_user.organisation.id}")
           component.navigation_item(text: 'Your account', href: '/users/account')
-          component.navigation_item(text: 'Organisation', href: "/organisations/#{current_user.organisation.id}")
           component.navigation_item(text: 'Sign out', href: destroy_user_session_path, options: {:method => :delete})
         end
       end

app/views/layouts/organisations.html.erb

@@ -10,6 +10,8 @@
     Your Organisation
   </h1>
 
+  <h2 class="govuk-visually-hidden"><%= content_for(:tab_title) %></h2>
+
   <%= render TabNavigationComponent.new(items: [
     { name: t('Details'), url: details_organisation_path(@organisation) },
     { name: t('Users'), url: users_organisation_path(@organisation) },

app/views/organisations/show.html.erb

@@ -1,3 +1,7 @@
+<% content_for :tab_title do %>
+  <%= "Details" %>
+<% end %>
+
 <div class="govuk-grid-row">
   <div class="govuk-grid-column-two-thirds-from-desktop">
     <%= govuk_summary_list do |summary_list| %>

app/views/organisations/users.html.erb

@@ -1,3 +1,7 @@
+<% content_for :tab_title do %>
+  <%= "Users" %>
+<% end %>
+
 <%= govuk_button_link_to "Invite user", new_user_path, method: :post %>
 <%= govuk_table do |table| %>
   <%= table.head do |head| %>

package.json

@@ -16,7 +16,7 @@
     "@rails/webpacker": "5.4.0",
     "chart.js": "^3.6.0",
     "chartkick": "^4.1.0",
-    "govuk-frontend": "^3.13.0",
+    "govuk-frontend": "^3.14.0",
     "stimulus": "^3.0.0",
     "webpack": "^4.46.0",
     "webpack-cli": "^3.3.12"

spec/features/organisation_spec.rb

@@ -14,7 +14,7 @@ RSpec.describe "User Features" do
   context "Organisation page" do
     it "default to organisation details" do
       visit("/case_logs")
-      click_link("Organisation")
+      click_link("Your organisation")
       expect(page).to have_content(user.organisation.name)
     end
 

spec/requests/organisations_controller_spec.rb

@@ -21,6 +21,11 @@ RSpec.describe OrganisationsController, type: :request do
       expect(response.body).to include(expected_html)
       expect(response.body).to include(organisation.name)
     end
+
+    it "has a hidden header title" do
+      expected_html = "<h2 class=\"govuk-visually-hidden\">  Details"
+      expect(response.body).to include(expected_html)
+    end
   end
 
   context "users tab" do
@@ -45,5 +50,10 @@ RSpec.describe OrganisationsController, type: :request do
       expect(response.body).to include(expected_html)
       expect(response.body).to include(user.email)
     end
+
+    it "has a hidden header title" do
+      expected_html = "<h2 class=\"govuk-visually-hidden\">  Users"
+      expect(response.body).to include(expected_html)
+    end
   end
 end