feat(a11y): update button role and html structure of account and play…

…er pages (#47)

packages/ui-react/src/components/Account/Account.tsx

@@ -194,6 +194,7 @@ const Account = ({ panelClassName, panelHeaderClassName, canUpdateEmail = true }
 
   return (
     <>
+      <h1 className={styles.hideUntilFocus}>{t('nav.account')}</h1>
       <Form initialValues={initialValues}>
         {[
           formSection({
@@ -214,7 +215,6 @@ const Account = ({ panelClassName, panelHeaderClassName, canUpdateEmail = true }
             },
             content: (section) => (
               <>
-                <h1 className={styles.hideUntilFocus}>{t('nav.account')}</h1>
                 <TextField
                   name="firstName"
                   label={t('account.firstname')}

packages/ui-react/src/components/Account/__snapshots__/Account.test.tsx.snap

@@ -2,6 +2,11 @@
 
 exports[`<Account> > renders and matches snapshot 1`] = `
 <div>
+  <h1
+    class="_hideUntilFocus_c968f7"
+  >
+    nav.account
+  </h1>
   <section
     aria-labelledby="account_about_you_1235"
     class="panel-class"
@@ -19,11 +24,6 @@ exports[`<Account> > renders and matches snapshot 1`] = `
       class="_flexBox_1c1c63"
       novalidate=""
     >
-      <h1
-        class="_hideUntilFocus_c968f7"
-      >
-        nav.account
-      </h1>
       <div
         class="_textField_e16c1b"
       >

packages/ui-react/src/components/Button/Button.tsx

@@ -42,7 +42,7 @@ const Button: React.FC<Props> = ({
   size = 'medium',
   disabled,
   busy,
-  type,
+  type = 'button',
   to,
   as = 'button',
   onClick,

packages/ui-react/src/components/Button/__snapshots__/Button.test.tsx.snap

@@ -4,6 +4,7 @@ exports[`<Button> > renders and matches snapshot 1`] = `
 <div>
   <button
     class="_button_f8f296 _default_f8f296 _outlined_f8f296 _active_f8f296"
+    type="button"
   >
     <span>
       aa

packages/ui-react/src/components/CancelSubscriptionForm/CancelSubscriptionForm.tsx

@@ -29,6 +29,7 @@ const CancelSubscriptionForm: React.FC<Props> = ({ onConfirm, onCancel, error, s
         onClick={onConfirm}
         fullWidth
         disabled={submitting}
+        type="submit"
       />
       <Button label={t('cancel_subscription.no_thanks')} variant="outlined" onClick={onCancel} fullWidth />
     </div>

packages/ui-react/src/components/CancelSubscriptionForm/__snapshots__/CancelSubscriptionForm.test.tsx.snap

@@ -14,13 +14,15 @@ exports[`<CancelSubscriptionForm> > renders and matches snapshot 1`] = `
     <button
       aria-disabled="false"
       class="_button_f8f296 _confirmButton_dba43b _primary_f8f296 _fullWidth_f8f296"
+      type="submit"
     >
       <span>
         cancel_subscription.unsubscribe
       </span>
     </button>
     <button
       class="_button_f8f296 _default_f8f296 _outlined_f8f296 _fullWidth_f8f296"
+      type="button"
     >
       <span>
         cancel_subscription.no_thanks

packages/ui-react/src/components/CheckoutForm/__snapshots__/CheckoutForm.test.tsx.snap

@@ -54,6 +54,7 @@ exports[`<CheckoutForm> > renders and matches snapshot 1`] = `
     >
       <button
         class="_button_f8f296 _default_f8f296 _outlined_f8f296"
+        type="button"
       >
         <span>
           checkout.redeem_coupon

packages/ui-react/src/components/ConfirmationForm/__snapshots__/ConfirmationForm.test.tsx.snap

@@ -15,6 +15,7 @@ exports[`<ConfirmationForm> > renders and matches snapshot 1`] = `
     </p>
     <button
       class="_button_f8f296 _button_64b7a0 _primary_f8f296 _outlined_f8f296 _fullWidth_f8f296"
+      type="button"
     >
       <span>
         reset.back_login

packages/ui-react/src/components/EditCardPaymentForm/EditCardPaymentForm.tsx

@@ -120,6 +120,7 @@ const EditCardPaymentForm: React.FC<Props> = ({ onCancel, setUpdatingCardDetails
           label={t('checkout.save')}
           variant="contained"
           onClick={paymentData.handleSubmit as () => void}
+          type="submit"
           color="primary"
           size="large"
           fullWidth

packages/ui-react/src/components/EpgChannel/EpgChannelItem.tsx

@@ -26,6 +26,7 @@ const EpgChannelItem: React.VFC<Props> = ({ channel, channelItemWidth, sidebarWi
         style={{ width: channelItemWidth }}
         onClick={() => onClick && onClick(channel)}
         data-testid={testId(uuid)}
+        role="button"
       >
         <Image className={styles.epgChannelLogo} image={channelLogoImage} alt="Logo" width={320} />
       </div>

packages/ui-react/src/components/Filter/__snapshots__/Filter.test.tsx.snap

@@ -10,6 +10,7 @@ exports[`<Filter> > renders Filter 1`] = `
     <button
       class="_button_f8f296 _default_f8f296 _outlined_f8f296"
       role="option"
+      type="button"
     >
       <span>
         x
@@ -18,6 +19,7 @@ exports[`<Filter> > renders Filter 1`] = `
     <button
       class="_button_f8f296 _default_f8f296 _outlined_f8f296"
       role="option"
+      type="button"
     >
       <span>
         y
@@ -26,6 +28,7 @@ exports[`<Filter> > renders Filter 1`] = `
     <button
       class="_button_f8f296 _default_f8f296 _outlined_f8f296"
       role="option"
+      type="button"
     >
       <span>
         z
@@ -34,6 +37,7 @@ exports[`<Filter> > renders Filter 1`] = `
     <button
       class="_button_f8f296 _default_f8f296 _outlined_f8f296"
       role="option"
+      type="button"
     >
       <span>
         bb

packages/ui-react/src/components/Header/__snapshots__/Header.test.tsx.snap

@@ -70,13 +70,15 @@ exports[`<Header /> > renders header 1`] = `
         >
           <button
             class="_button_f8f296 _default_f8f296 _outlined_f8f296"
+            type="button"
           >
             <span>
               sign_in
             </span>
           </button>
           <button
             class="_button_f8f296 _primary_f8f296"
+            type="button"
           >
             <span>
               sign_up

packages/ui-react/src/components/NoPaymentRequired/__snapshots__/NoPaymentRequired.test.tsx.snap

@@ -10,6 +10,7 @@ exports[`<NoPaymentRequired> > renders and matches snapshot 1`] = `
     </p>
     <button
       class="_button_f8f296 _primary_f8f296 _fullWidth_f8f296 _large_f8f296"
+      type="button"
     >
       <span>
         checkout.continue

packages/ui-react/src/components/PayPal/__snapshots__/PayPal.test.tsx.snap

@@ -10,6 +10,7 @@ exports[`<PayPal> > renders and matches snapshot 1`] = `
     </p>
     <button
       class="_button_f8f296 _primary_f8f296 _fullWidth_f8f296 _large_f8f296"
+      type="button"
     >
       <span>
         checkout.continue

packages/ui-react/src/components/Payment/__snapshots__/Payment.test.tsx.snap

@@ -80,6 +80,7 @@ exports[`<Payment> > renders and matches snapshot 1`] = `
       </div>
       <button
         class="_button_f8f296 _default_f8f296 _outlined_f8f296"
+        type="button"
       >
         <span>
           account:payment.edit_card

packages/ui-react/src/components/PaymentFailed/__snapshots__/PaymentFailed.test.tsx.snap

@@ -16,6 +16,7 @@ exports[`<PaymentFailed> > renders and matches snapshot 1`] = `
     <div>
       <button
         class="_button_f8f296 _primary_f8f296 _fullWidth_f8f296 _large_f8f296"
+        type="button"
       >
         <span>
           checkout.close

packages/ui-react/src/components/RenewSubscriptionForm/RenewSubscriptionForm.tsx

@@ -44,6 +44,7 @@ const RenewSubscriptionForm: React.FC<Props> = ({ subscription, customer, error,
         onClick={onConfirm}
         fullWidth
         disabled={submitting}
+        type="submit"
       />
       <Button label={t('renew_subscription.no_thanks')} onClick={onClose} fullWidth />
     </div>

packages/ui-react/src/components/RenewSubscriptionForm/__snapshots__/RenewSubscriptionForm.test.tsx.snap

@@ -37,13 +37,15 @@ exports[`<RenewSubscriptionForm> > renders and matches snapshot 1`] = `
     <button
       aria-disabled="false"
       class="_button_f8f296 _confirmButton_a290fe _primary_f8f296 _fullWidth_f8f296"
+      type="submit"
     >
       <span>
         renew_subscription.renew_subscription
       </span>
     </button>
     <button
       class="_button_f8f296 _default_f8f296 _outlined_f8f296 _fullWidth_f8f296"
+      type="button"
     >
       <span>
         renew_subscription.no_thanks

packages/ui-react/src/components/ResetPasswordForm/ResetPasswordForm.tsx

@@ -19,7 +19,7 @@ const ResetPasswordForm: React.FC<Props> = ({ onCancel, onReset, submitting }: P
         {t('reset.reset_password')}
       </h1>
       <p className={styles.text}>{t('reset.text')}</p>
-      <Button onClick={onReset} className={styles.button} fullWidth color="primary" label={t('reset.yes')} disabled={submitting} />
+      <Button onClick={onReset} className={styles.button} fullWidth color="primary" label={t('reset.yes')} type="submit" disabled={submitting} />
       <Button onClick={onCancel} fullWidth label={t('reset.no')} />
     </div>
   );

packages/ui-react/src/components/ResetPasswordForm/__snapshots__/ResetPasswordForm.test.tsx.snap

@@ -20,13 +20,15 @@ exports[`<ResetPassword> > renders and matches snapshot 1`] = `
     <button
       aria-disabled="false"
       class="_button_f8f296 _button_1976d9 _primary_f8f296 _outlined_f8f296 _fullWidth_f8f296"
+      type="submit"
     >
       <span>
         reset.yes
       </span>
     </button>
     <button
       class="_button_f8f296 _default_f8f296 _outlined_f8f296 _fullWidth_f8f296"
+      type="button"
     >
       <span>
         reset.no

packages/ui-react/src/components/ShareButton/__snapshots__/ShareButton.test.tsx.snap

@@ -4,6 +4,7 @@ exports[`<ShareButton> > renders and matches snapshot 1`] = `
 <div>
   <button
     class="_button_f8f296 _default_f8f296 _outlined_f8f296"
+    type="button"
   >
     <div
       class="_startIcon_f8f296"

packages/ui-react/src/components/SubscriptionCancelled/__snapshots__/SubscriptionCancelled.test.tsx.snap

@@ -13,6 +13,7 @@ exports[`<SubscriptionCancelled> > renders and matches snapshot 1`] = `
     </p>
     <button
       class="_button_f8f296 _default_f8f296 _outlined_f8f296 _fullWidth_f8f296"
+      type="button"
     >
       <span>
         subscription_cancelled.return_to_profile

packages/ui-react/src/components/SubscriptionRenewed/__snapshots__/SubscriptionRenewed.test.tsx.snap

@@ -13,6 +13,7 @@ exports[`<SubscriptionRenewed> > renders and matches snapshot 1`] = `
     </p>
     <button
       class="_button_f8f296 _default_f8f296 _outlined_f8f296 _fullWidth_f8f296"
+      type="button"
     >
       <span>
         subscription_renewed.back_to_profile

packages/ui-react/src/components/VideoLayout/VideoLayout.tsx

@@ -166,7 +166,6 @@ const VideoLayout: React.FC<Props> = ({
     return (
       <div className={styles.videoInlineLayout} data-testid={testId('inline-layout')}>
         <div className={styles.player}>{player}</div>
-        {renderRelatedVideos(isTablet)}
         <div className={styles.videoDetailsInline}>
           <VideoDetailsInline
             title={secondaryMetadata || title}
@@ -178,6 +177,7 @@ const VideoLayout: React.FC<Props> = ({
             trailerButton={trailerButton}
           />
         </div>
+        {renderRelatedVideos(isTablet)}
         {children}
       </div>
     );

packages/ui-react/src/components/Welcome/__snapshots__/Welcome.test.tsx.snap

@@ -13,6 +13,7 @@ exports[`<Welcome> > renders and matches snapshot 1`] = `
     </p>
     <button
       class="_button_f8f296 _primary_f8f296 _fullWidth_f8f296 _large_f8f296"
+      type="button"
     >
       <span>
         checkout.start_watching

packages/ui-react/src/pages/User/__snapshots__/User.test.tsx.snap

@@ -66,6 +66,7 @@ exports[`User Component tests > Account Page 1`] = `
           >
             <button
               class="_button_f8f296 _button_e9c5ca _default_f8f296 _text_f8f296"
+              type="button"
             >
               <div
                 class="_startIcon_f8f296"
@@ -92,6 +93,11 @@ exports[`User Component tests > Account Page 1`] = `
     <div
       class="_mainColumn_e9c5ca"
     >
+      <h1
+        class="_hideUntilFocus_c968f7"
+      >
+        nav.account
+      </h1>
       <section
         aria-labelledby="account_about_you_1235"
         class="_panel_e9c5ca"
@@ -109,11 +115,6 @@ exports[`User Component tests > Account Page 1`] = `
           class="_flexBox_1c1c63"
           novalidate=""
         >
-          <h1
-            class="_hideUntilFocus_c968f7"
-          >
-            nav.account
-          </h1>
           <div
             class="_textField_e16c1b"
           >
@@ -351,6 +352,7 @@ exports[`User Component tests > Favorites Page 1`] = `
           >
             <button
               class="_button_f8f296 _button_e9c5ca _default_f8f296 _text_f8f296"
+              type="button"
             >
               <div
                 class="_startIcon_f8f296"
@@ -386,6 +388,7 @@ exports[`User Component tests > Favorites Page 1`] = `
           </h1>
           <button
             class="_button_f8f296 _default_f8f296 _outlined_f8f296"
+            type="button"
           >
             <span>
               favorites.clear
@@ -600,6 +603,7 @@ exports[`User Component tests > Payments Page 1`] = `
           >
             <button
               class="_button_f8f296 _button_e9c5ca _default_f8f296 _text_f8f296"
+              type="button"
             >
               <div
                 class="_startIcon_f8f296"
@@ -671,6 +675,7 @@ exports[`User Component tests > Payments Page 1`] = `
           aria-disabled="false"
           class="_button_f8f296 _upgradeSubscription_c57ff5 _primary_f8f296 _outlined_f8f296"
           data-testid="change-subscription-button"
+          type="button"
         >
           <span>
             user:payment.change_subscription
@@ -753,6 +758,7 @@ exports[`User Component tests > Payments Page 1`] = `
           </div>
           <button
             class="_button_f8f296 _default_f8f296 _outlined_f8f296"
+            type="button"
           >
             <span>
               account:payment.edit_card