minor accessibility updates

Author: cathysarisky

apps/comments-ui/src/images/icons/close.svg

@@ -13,11 +13,11 @@ export default class CloseButton extends React.Component {
         const {onClick} = this.props;
 
         return (
-            <div className='gh-portal-closeicon-container' data-test-button='close-popup'>
+            <button className='gh-portal-closeicon-container' data-test-button='close-popup' onClick = {onClick || this.closePopup}>
                 <CloseIcon
                     className='gh-portal-closeicon' alt='Close' onClick = {onClick || this.closePopup} data-testid='close-popup'
                 />
-            </div>
+            </button>
         );
     }
 }

apps/portal/src/components/common/close-button.js

@@ -546,7 +546,7 @@ function ProductBenefits({product}) {
         const key = benefit?.id || `benefit-${idx}`;
         return (
             <div className="gh-portal-product-benefit" key={key}>
-                <CheckmarkIcon className='gh-portal-benefit-checkmark' alt=''/>
+                <CheckmarkIcon className='gh-portal-benefit-checkmark' aria-hidden='true' />
                 <div className="gh-portal-benefit-title">{benefit.name}</div>
             </div>
         );

apps/portal/src/components/common/products-section.js

@@ -514,6 +514,10 @@ html[dir="rtl"] .gh-portal-powered a {
 }
 
 .gh-portal-closeicon-container {
+    background: none;
+    border: none;
+    padding: 0;
+    margin: 0;
     position: fixed;
     top: 24px;
     right: 24px;

apps/portal/src/components/frame.styles.js

@@ -469,7 +469,7 @@ export default class OfferPage extends React.Component {
         const benefitsUI = benefits.map((benefit, idx) => {
             return (
                 <div className="gh-portal-product-benefit" key={`${benefit.name}-${idx}`}>
-                    <CheckmarkIcon className='gh-portal-benefit-checkmark' />
+                    <CheckmarkIcon className='gh-portal-benefit-checkmark' aria-hidden='true' />
                     <div className="gh-portal-benefit-title">{benefit.name}</div>
                 </div>
             );