Ensured that the mobile keypad is not visible to screen readers until…

… it is opened. (#698)

## Summary:
This is a very simple little PR that adds "display: none" to our mobile keypad container when the keypad is closed. This ensures that the screen readers don't try to tab over the keypad while it's hidden from view. 

Issue: LC-1192

## Test plan:
make tesc

Author: SonicScrewdriver

Reviewers: handeyeco, SonicScrewdriver

Required Reviewers:

Approved By: handeyeco

Checks: ✅ finish_coverage, ✅ Publish npm snapshot (ubuntu-latest, 16.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 16.x), ✅ Extract i18n strings (ubuntu-latest, 16.x), ✅ Cypress Coverage (ubuntu-latest, 16.x), ✅ Check builds for changes in size (ubuntu-latest, 16.x), ✅ Check for .changeset file (ubuntu-latest, 16.x), ✅ Jest Coverage (ubuntu-latest, 16.x), ✅ gerald

Pull Request URL: #698

.changeset/itchy-doors-greet.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/math-input": patch
+---
+
+Ensured that the keypad is hidden from screen readers when it is closed.

packages/math-input/src/components/keypad/mobile-keypad.tsx

@@ -155,7 +155,7 @@ class MobileKeypad extends React.Component<Props, State> implements KeypadAPI {
         const containerStyle = [
             // internal styles
             styles.keypadContainer,
-            active ? styles.activeKeypadContainer : null,
+            active && styles.activeKeypadContainer,
             // styles passed as props
             ...(Array.isArray(style) ? style : [style]),
         ];
@@ -217,13 +217,14 @@ const styles = StyleSheet.create({
         left: 0,
         right: 0,
         position: "fixed",
+        transitionProperty: "all",
         transition: `200ms ease-out`,
-        transitionProperty: "transform",
+        visibility: "hidden",
         transform: "translate3d(0, 100%, 0)",
     },
-
     activeKeypadContainer: {
         transform: "translate3d(0, 0, 0)",
+        visibility: "visible",
     },
 });