Fixing disabled checkbox active state in Firefox (#2582)

* adding specificity for disabled and active for Firefox

* adding some stories to better test disabled checked checkboxes

Co-authored-by: Danni <[email protected]>

Author: ktabors

packages/@adobe/spectrum-css-temp/components/checkbox/skin.css

@@ -89,7 +89,8 @@ governing permissions and limitations under the License.
 
 .spectrum-Checkbox .spectrum-Checkbox-input,
 .spectrum-Checkbox .spectrum-Checkbox-input:checked {
-  &:disabled + .spectrum-Checkbox-box {
+  &:disabled + .spectrum-Checkbox-box,
+  &:disabled:active + .spectrum-Checkbox-box {
     &:before {
       border-color: var(--spectrum-checkbox-emphasized-box-border-color-disabled);
       background-color: var(--spectrum-checkbox-emphasized-box-background-color-disabled);

packages/@react-spectrum/checkbox/stories/CheckboxGroup.stories.tsx

@@ -58,6 +58,14 @@ storiesOf('CheckboxGroup', module)
     'isDisabled on one checkbox',
     () => render({}, [{}, {isDisabled: true}, {}])
   )
+  .add(
+    'isDisabled two checkboxes and one checked',
+    () => render({defaultValue: ['dragons']}, [{}, {isDisabled: true}, {isDisabled: true}])
+  )
+  .add(
+    'isEmphasized, isDisabled two checkboxes and one checked',
+    () => render({isEmphasized: true, defaultValue: ['dragons']}, [{}, {isDisabled: true}, {isDisabled: true}])
+  )
   .add(
     'isDisabled on one checkbox horizontal',
     () => render({orientation: 'horizontal'}, [{}, {isDisabled: true}, {}])