Don't use <h1> in Uppy markup (#5355)

* everywhere - don't use `<h1>` in Uppy markup

* `/dev/Dashboard.js` - add defence against using heading tags

Author: lakesare

packages/@uppy/audio/src/PermissionsScreen.tsx

@@ -12,9 +12,9 @@ export default (props: PermissionsScreenProps) => {
   return (
     <div className="uppy-Audio-permissons">
       <div className="uppy-Audio-permissonsIcon">{icon()}</div>
-      <h1 className="uppy-Audio-title">
+      <div className="uppy-Audio-title">
         {hasAudio ? i18n('allowAudioAccessTitle') : i18n('noAudioTitle')}
-      </h1>
+      </div>
       <p>
         {hasAudio ?
           i18n('allowAudioAccessDescription')

packages/@uppy/webcam/src/PermissionsScreen.tsx

@@ -15,9 +15,9 @@ export default function PermissionsScreen({
   return (
     <div className="uppy-Webcam-permissons">
       <div className="uppy-Webcam-permissonsIcon">{icon()}</div>
-      <h1 className="uppy-Webcam-title">
+      <div className="uppy-Webcam-title">
         {hasCamera ? i18n('allowAccessTitle') : i18n('noCameraTitle')}
-      </h1>
+      </div>
       <p>
         {hasCamera ?
           i18n('allowAccessDescription')

private/dev/index.html

@@ -22,15 +22,14 @@
         margin: auto;
       }
 
+      /* css to make sure that Dashboard's css overrides page css */
       button,
       input {
         color: green;
         font-size: 30px;
         text-align: right;
         border: 2px solid purple;
       }
-
-      /* css to make sure that Dashboard's css overrides page css */
       ul {
         margin: 60px;
       }
@@ -40,6 +39,14 @@
       a {
         color: purple;
       }
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6 {
+        color: green;
+      }
     </style>
   </head>