Fix background colour for focused solid background buttons

nationalarchives · Sep 19, 2024 · 5e09aed · 5e09aed
1 parent 15913e3
commit 5e09aed
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 43 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Change border widths on global header items from `0.5px` to `1px` to help with sub-pixel rendering
+- Missing background colour added for focused buttons with `tna-button--solid-hover`
 
 ### Security
 

diff --git a/src/nationalarchives/components/button/button.scss b/src/nationalarchives/components/button/button.scss
@@ -171,7 +171,8 @@ $button-border-width: 4px !default;
   }
 
   &--solid-hover {
-    &:not(.tna-button--plain):hover {
+    &:not(.tna-button--plain):hover,
+    &:not(.tna-button--plain):focus {
       @include colour.colour-font("font-dark");
 
       @include colour.colour-background("background");

diff --git a/src/nationalarchives/utilities/tables/tables.stories.js b/src/nationalarchives/utilities/tables/tables.stories.js
@@ -3,47 +3,51 @@ export default {
 };
 
 const TableTemplate = () =>
-  `<div class="tna-table-wrapper">
-  <table class="tna-table">
-    <caption class="tna-table__caption">
-      Records added and removed between 2020 and 2022.
-    </caption>
-    <thead class="tna-table__head">
-      <tr class="tna-table__row">
-        <th class="tna-table__header" scope="col">Year</th>
-        <th class="tna-table__header" scope="col">Chinese zodiac sign</th>
-        <th class="tna-table__header tna-table__header--numeric" scope="col">Records added</th>
-        <th class="tna-table__header tna-table__header--numeric" scope="col">Size (megabytes)</th>
-      </tr>
-    </thead>
-    <tbody class="tna-table__body">
-      <tr>
-        <th class="tna-table__header" scope="row">2020</th>
-        <td class="tna-table__cell">Rat</td>
-        <td class="tna-table__cell tna-table__cell--numeric">123,456</td>
-        <td class="tna-table__cell tna-table__cell--numeric">789</td>
-      </tr>
-      <tr>
-        <th class="tna-table__header" scope="row">2021</th>
-        <td class="tna-table__cell">Ox</td>
-        <td class="tna-table__cell tna-table__cell--numeric">456,789</td>
-        <td class="tna-table__cell tna-table__cell--numeric">123</td>
-      </tr>
-      <tr>
-        <th class="tna-table__header" scope="row">2022</th>
-        <td class="tna-table__cell">Tiger</td>
-        <td class="tna-table__cell tna-table__cell--numeric">42,424</td>
-        <td class="tna-table__cell tna-table__cell--numeric">1,337</td>
-      </tr>
-    </tbody>
-    <tfoot class="tna-table__foot">
-      <tr>
-        <th class="tna-table__header" scope="row">Totals</th>
-        <td class="tna-table__cell"></td>
-        <td class="tna-table__cell tna-table__cell--numeric">622,669</td>
-        <td class="tna-table__cell tna-table__cell--numeric">2,249</td>
-      </tr>
-    </tfoot>
-  </table>
+  `<div class="tna-container">
+  <div class="tna-column tna-column--full">
+    <div class="tna-table-wrapper">
+      <table class="tna-table">
+        <caption class="tna-table__caption">
+          Records added and removed between 2020 and 2022.
+        </caption>
+        <thead class="tna-table__head">
+          <tr class="tna-table__row">
+            <th class="tna-table__header" scope="col">Year</th>
+            <th class="tna-table__header" scope="col">Chinese zodiac sign</th>
+            <th class="tna-table__header tna-table__header--numeric" scope="col">Records added</th>
+            <th class="tna-table__header tna-table__header--numeric" scope="col">Size (megabytes)</th>
+          </tr>
+        </thead>
+        <tbody class="tna-table__body">
+          <tr>
+            <th class="tna-table__header" scope="row">2020</th>
+            <td class="tna-table__cell">Rat</td>
+            <td class="tna-table__cell tna-table__cell--numeric">123,456</td>
+            <td class="tna-table__cell tna-table__cell--numeric">789</td>
+          </tr>
+          <tr>
+            <th class="tna-table__header" scope="row">2021</th>
+            <td class="tna-table__cell">Ox</td>
+            <td class="tna-table__cell tna-table__cell--numeric">456,789</td>
+            <td class="tna-table__cell tna-table__cell--numeric">123</td>
+          </tr>
+          <tr>
+            <th class="tna-table__header" scope="row">2022</th>
+            <td class="tna-table__cell">Tiger</td>
+            <td class="tna-table__cell tna-table__cell--numeric">42,424</td>
+            <td class="tna-table__cell tna-table__cell--numeric">1,337</td>
+          </tr>
+        </tbody>
+        <tfoot class="tna-table__foot">
+          <tr>
+            <th class="tna-table__header" scope="row">Totals</th>
+            <td class="tna-table__cell"></td>
+            <td class="tna-table__cell tna-table__cell--numeric">622,669</td>
+            <td class="tna-table__cell tna-table__cell--numeric">2,249</td>
+          </tr>
+        </tfoot>
+      </table>
+    </div>
+  </div>
 </div>`;
 export const Table = TableTemplate.bind({});