Fix FireFox High Contrast Mode for Radio Schedule

packages/components/psammead-radio-schedule/CHANGELOG.md

@@ -3,6 +3,7 @@
 <!-- prettier-ignore -->
 | Version | Description |
 |---------|-------------|
+| 0.1.0-alpha.30 | [PR#3324](https://github.com/bbc/psammead/pull/3324) Fix Duration border on FireFox High Contrast Mode |
 | 0.1.0-alpha.29 | [PR#3318](https://github.com/bbc/psammead/pull/3318) Fix `StartTime` clock icon styling in Safari |
 | 0.1.0-alpha.28 | [PR#3321](https://github.com/bbc/psammead/pull/3321) Fix radio schedules duration markup |
 | 0.1.0-alpha.27 | [PR#3309](https://github.com/bbc/psammead/pull/3309) Fix Program Card styling |

packages/components/psammead-radio-schedule/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead-radio-schedule",
-  "version": "0.1.0-alpha.29",
+  "version": "0.1.0-alpha.30",
   "main": "dist/index.js",
   "module": "esm/index.js",
   "sideEffects": false,

packages/components/psammead-radio-schedule/src/ProgramCard/__snapshots__/index.test.jsx.snap

@@ -122,6 +122,7 @@ exports[`ProgramCard should render correctly for live 1`] = `
   line-height: 1rem;
   padding: 0.5rem;
   background-color: #B80000;
+  outline: 0.0625rem solid transparent;
   color: #FFFFFF;
 }
 
@@ -196,6 +197,7 @@ exports[`ProgramCard should render correctly for live 1`] = `
 @media screen and (-ms-high-contrast:active) {
   .c8 {
     background-color: transparent;
+    outline: none;
   }
 }
 
@@ -393,6 +395,7 @@ exports[`ProgramCard should render correctly for next 1`] = `
   line-height: 1rem;
   padding: 0.5rem;
   background-color: #FFFFFF;
+  outline: 0.0625rem solid transparent;
   color: #11708C;
 }
 
@@ -481,6 +484,7 @@ exports[`ProgramCard should render correctly for next 1`] = `
 @media screen and (-ms-high-contrast:active) {
   .c7 {
     background-color: transparent;
+    outline: none;
   }
 }
 
@@ -680,6 +684,7 @@ exports[`ProgramCard should render correctly for onDemand 1`] = `
   line-height: 1rem;
   padding: 0.5rem;
   background-color: #222222;
+  outline: 0.0625rem solid transparent;
   color: #FFFFFF;
 }
 
@@ -754,6 +759,7 @@ exports[`ProgramCard should render correctly for onDemand 1`] = `
 @media screen and (-ms-high-contrast:active) {
   .c7 {
     background-color: transparent;
+    outline: none;
   }
 }
 
@@ -952,6 +958,7 @@ exports[`ProgramCard should render correctly in RTL 1`] = `
   line-height: 1rem;
   padding: 0.5rem;
   background-color: #222222;
+  outline: 0.0625rem solid transparent;
   color: #FFFFFF;
 }
 
@@ -1026,6 +1033,7 @@ exports[`ProgramCard should render correctly in RTL 1`] = `
 @media screen and (-ms-high-contrast:active) {
   .c7 {
     background-color: transparent;
+    outline: none;
   }
 }
 
@@ -1222,6 +1230,7 @@ exports[`ProgramCard should render correctly without summary 1`] = `
   line-height: 1rem;
   padding: 0.5rem;
   background-color: #B80000;
+  outline: 0.0625rem solid transparent;
   color: #FFFFFF;
 }
 
@@ -1282,6 +1291,7 @@ exports[`ProgramCard should render correctly without summary 1`] = `
 @media screen and (-ms-high-contrast:active) {
   .c7 {
     background-color: transparent;
+    outline: none;
   }
 }
 

packages/components/psammead-radio-schedule/src/ProgramCard/index.jsx

@@ -86,9 +86,11 @@ const ButtonWrapper = styled.div`
   ${({ script }) => script && getMinion(script)};
   padding: ${GEL_SPACING};
   background-color: ${({ backgroundColor }) => backgroundColor};
+  outline: 0.0625rem solid transparent;
   color: ${({ durationColor }) => durationColor};
   @media screen and (-ms-high-contrast: active) {
     background-color: transparent;
+    outline: none;
   }
 `;
 

packages/components/psammead-radio-schedule/src/__snapshots__/index.test.jsx.snap

@@ -163,6 +163,7 @@ exports[`RadioSchedule should render ltr radio schedules correctly 1`] = `
   line-height: 1rem;
   padding: 0.5rem;
   background-color: #B80000;
+  outline: 0.0625rem solid transparent;
   color: #FFFFFF;
 }
 
@@ -174,6 +175,7 @@ exports[`RadioSchedule should render ltr radio schedules correctly 1`] = `
   line-height: 1rem;
   padding: 0.5rem;
   background-color: #222222;
+  outline: 0.0625rem solid transparent;
   color: #FFFFFF;
 }
 
@@ -185,6 +187,7 @@ exports[`RadioSchedule should render ltr radio schedules correctly 1`] = `
   line-height: 1rem;
   padding: 0.5rem;
   background-color: #FFFFFF;
+  outline: 0.0625rem solid transparent;
   color: #11708C;
 }
 
@@ -394,6 +397,7 @@ exports[`RadioSchedule should render ltr radio schedules correctly 1`] = `
 @media screen and (-ms-high-contrast:active) {
   .c18 {
     background-color: transparent;
+    outline: none;
   }
 }
 
@@ -414,6 +418,7 @@ exports[`RadioSchedule should render ltr radio schedules correctly 1`] = `
 @media screen and (-ms-high-contrast:active) {
   .c22 {
     background-color: transparent;
+    outline: none;
   }
 }
 
@@ -434,6 +439,7 @@ exports[`RadioSchedule should render ltr radio schedules correctly 1`] = `
 @media screen and (-ms-high-contrast:active) {
   .c26 {
     background-color: transparent;
+    outline: none;
   }
 }
 
@@ -1259,6 +1265,7 @@ exports[`RadioSchedule should render rtl radio schedules correctly 1`] = `
   line-height: 1rem;
   padding: 0.5rem;
   background-color: #B80000;
+  outline: 0.0625rem solid transparent;
   color: #FFFFFF;
 }
 
@@ -1270,6 +1277,7 @@ exports[`RadioSchedule should render rtl radio schedules correctly 1`] = `
   line-height: 1rem;
   padding: 0.5rem;
   background-color: #222222;
+  outline: 0.0625rem solid transparent;
   color: #FFFFFF;
 }
 
@@ -1281,6 +1289,7 @@ exports[`RadioSchedule should render rtl radio schedules correctly 1`] = `
   line-height: 1rem;
   padding: 0.5rem;
   background-color: #FFFFFF;
+  outline: 0.0625rem solid transparent;
   color: #11708C;
 }
 
@@ -1490,6 +1499,7 @@ exports[`RadioSchedule should render rtl radio schedules correctly 1`] = `
 @media screen and (-ms-high-contrast:active) {
   .c18 {
     background-color: transparent;
+    outline: none;
   }
 }
 
@@ -1510,6 +1520,7 @@ exports[`RadioSchedule should render rtl radio schedules correctly 1`] = `
 @media screen and (-ms-high-contrast:active) {
   .c22 {
     background-color: transparent;
+    outline: none;
   }
 }
 
@@ -1530,6 +1541,7 @@ exports[`RadioSchedule should render rtl radio schedules correctly 1`] = `
 @media screen and (-ms-high-contrast:active) {
   .c26 {
     background-color: transparent;
+    outline: none;
   }
 }