fix accessibility issue on rewards page #5991

ui/component/claimPreviewTile/view.jsx

@@ -206,14 +206,13 @@ function ClaimPreviewTile(props: Props) {
 
   return (
     <li
-      role="link"
       onClick={handleClick}
       className={classnames('card claim-preview--tile', {
         'claim-preview__wrapper--channel': isChannel,
         'claim-preview__live': live,
       })}
     >
-      <NavLink aria-hidden tabIndex={-1} {...navLinkProps}>
+      <NavLink {...navLinkProps} role="none" tabIndex={-1} aria-hidden>
         <FileThumbnail thumbnail={thumbnailUrl} allowGifs>
           {!isChannel && (
             <React.Fragment>

ui/component/header/view.jsx

@@ -70,9 +70,9 @@ const SkipNavigationButton = () => {
   const skipNavigation = (e) => {
     // Match any focusable element
     const focusableElementQuery = `
-      #main-content [tabindex]:not([tabIndex="-1"]):not(:disabled),
+      #main-content [tabindex]:not([tabindex="-1"]):not(:disabled),
-      #main-content a:not([aria-hidden]):not([tabIndex="-1"]):not(:disabled),
+      #main-content a:not([aria-hidden]):not([tabindex="-1"]):not(:disabled),
-      #main-content button:not([aria-hidden]):not([tabIndex="-1"]):not(:disabled)
+      #main-content button:not([aria-hidden]):not([tabindex="-1"]):not(:disabled)
     `;
     // Find first focusable element
     const element = document.querySelector(focusableElementQuery);

ui/component/rewardLink/view.jsx

@@ -13,11 +13,12 @@ type Props = {
   label: ?string,
   reward: Reward,
   button: ?boolean,
+  disabled: boolean,
   claimReward: (Reward) => void,
 };
 
 const RewardLink = (props: Props) => {
-  const { reward, claimReward, label, isPending, button } = props;
+  const { reward, claimReward, label, isPending, button, disabled = false } = props;
   let displayLabel = label;
   if (isPending) {
     displayLabel = __('Claiming...');
@@ -34,7 +35,7 @@ const RewardLink = (props: Props) => {
   return !reward ? null : (
     <Button
       button={button ? 'primary' : 'link'}
-      disabled={isPending}
+      disabled={disabled || isPending}
       label={<LbcMessage>{displayLabel}</LbcMessage>}
       aria-label={displayLabel}
       onClick={() => {

ui/component/rewardTile/view.jsx

@@ -23,10 +23,11 @@ type Props = {
     claim_code: string,
   },
   user: User,
+  disabled: boolean,
 };
 
 const RewardTile = (props: Props) => {
-  const { reward, openRewardCodeModal, openSetReferrerModal, user } = props;
+  const { reward, openRewardCodeModal, openSetReferrerModal, user, disabled = false } = props;
   const referrerSet = user && user.invited_by_id;
   const claimed = !!reward.transaction_id;
   const customActionsRewards = [rewards.TYPE_REFERRAL, rewards.TYPE_REFEREE];
@@ -38,18 +39,25 @@ const RewardTile = (props: Props) => {
       actions={
         <div className="section__actions">
           {reward.reward_type === rewards.TYPE_GENERATED_CODE && (
-            <Button button="primary" onClick={openRewardCodeModal} label={__('Enter Code')} />
+            <Button button="primary" onClick={openRewardCodeModal} label={__('Enter Code')} disabled={disabled} />
           )}
           {reward.reward_type === rewards.TYPE_REFERRAL && (
-            <Button button="primary" navigate="/$/invite" label={__('Go To Invites')} />
+            <Button
+              button="primary"
+              navigate="/$/invite"
+              label={__('Go To Invites')}
+              aria-hidden={disabled}
+              tabIndex={disabled ? -1 : 0}
+            />
           )}
           {reward.reward_type === rewards.TYPE_REFEREE && (
             <>
-              {referrerSet && <RewardLink button reward_type={reward.reward_type} />}
+              {referrerSet && <RewardLink button reward_type={reward.reward_type} disabled={disabled} />}
               <Button
                 button={referrerSet ? 'link' : 'primary'}
                 onClick={openSetReferrerModal}
                 label={referrerSet ? __('Change Inviter') : __('Set Inviter')}
+                disabled={disabled}
               />
             </>
           )}
@@ -59,7 +67,7 @@ const RewardTile = (props: Props) => {
                 <Icon icon={ICONS.COMPLETED} /> {__('Reward claimed.')}
               </span>
             ) : (
-              <RewardLink button claim_code={reward.claim_code} />
+              <RewardLink button claim_code={reward.claim_code} disabled={disabled} />
             ))}
         </div>
       }

ui/page/rewards/view.jsx

@@ -102,6 +102,8 @@ class RewardsPage extends PureComponent<Props> {
   }
 
   renderCustomRewardCode() {
+    const { user } = this.props;
+    const isNotEligible = !user || !user.primary_email || !user.has_verified_email || !user.is_reward_approved;
     return (
       <RewardTile
         key={REWARD_TYPES.TYPE_GENERATED_CODE}
@@ -110,6 +112,7 @@ class RewardsPage extends PureComponent<Props> {
           reward_title: __('Custom Code'),
           reward_description: __('Are you a supermodel or rockstar that received a custom reward code? Claim it here.'),
         }}
+        disabled={isNotEligible}
       />
     );
   }
@@ -155,12 +158,13 @@ class RewardsPage extends PureComponent<Props> {
 
     return (
       <div
+        aria-hidden={isNotEligible}
         className={classnames('card__list', {
           'card--disabled': isNotEligible,
         })}
       >
         {rewards.map((reward) => (
-          <RewardTile key={reward.claim_code} reward={reward} />
+          <RewardTile disabled={isNotEligible} key={reward.claim_code} reward={reward} />
         ))}
         {this.renderCustomRewardCode()}
       </div>