Bug 1554293 - Make sure pocket cards are optimized for screen readers (#5086)

4 files changed, 8 insertions, 6 deletions

diff --git a/content-src/components/Card/Card.jsx b/content-src/components/Card/Card.jsx
index b2b9d1ca..c41520b0 100644
--- a/content-src/components/Card/Card.jsx
+++ b/content-src/components/Card/Card.jsx
@@ -237,17 +237,17 @@ export class _Card extends React.PureComponent {
               <p className="card-description" dir="auto">{link.description}</p>
             </div>
             <div className="card-context">
-              {icon && !link.context && <span className={`card-context-icon icon icon-${icon}`} />}
-              {link.icon && link.context && <span className="card-context-icon icon" style={{backgroundImage: `url('${link.icon}')`}} />}
+              {icon && !link.context && <span aria-haspopup="true" className={`card-context-icon icon icon-${icon}`} />}
+              {link.icon && link.context && <span aria-haspopup="true" className="card-context-icon icon" style={{backgroundImage: `url('${link.icon}')`}} />}
               {intlID && !link.context && <div className="card-context-label"><FormattedMessage id={intlID} defaultMessage="Visited" /></div>}
               {link.context && <div className="card-context-label">{link.context}</div>}
             </div>
           </div>
         </div>
       </a>
-      {!props.placeholder && <button className="context-menu-button icon" title={this.props.intl.formatMessage({id: "context_menu_title"})}
+      {!props.placeholder && <button aria-haspopup="true" className="context-menu-button icon" title={this.props.intl.formatMessage({id: "context_menu_title"})}
         onClick={this.onMenuButtonClick}>
-        <span className="sr-only">{`Open context menu for ${link.title}`}</span>
+        <span aria-haspopup="true" className="sr-only">{`Open context menu for ${link.title}`}</span>
       </button>}
       {isContextMenuOpen &&
         <LinkMenu
diff --git a/content-src/components/CollapsibleSection/CollapsibleSection.jsx b/content-src/components/CollapsibleSection/CollapsibleSection.jsx
index 6163cdd7..d7cab9f8 100644
--- a/content-src/components/CollapsibleSection/CollapsibleSection.jsx
+++ b/content-src/components/CollapsibleSection/CollapsibleSection.jsx
@@ -182,6 +182,7 @@ export class _CollapsibleSection extends React.PureComponent {
           </h3>
           <div>
             <button
+              aria-haspopup="true"
               className="context-menu-button icon"
               title={this.props.intl.formatMessage({id: "context_menu_title"})}
               onClick={this.onMenuButtonClick}
diff --git a/content-src/components/DiscoveryStreamComponents/DSLinkMenu/DSLinkMenu.jsx b/content-src/components/DiscoveryStreamComponents/DSLinkMenu/DSLinkMenu.jsx
index 3f2578ba..e8ed3599 100644
--- a/content-src/components/DiscoveryStreamComponents/DSLinkMenu/DSLinkMenu.jsx
+++ b/content-src/components/DiscoveryStreamComponents/DSLinkMenu/DSLinkMenu.jsx
@@ -48,6 +48,7 @@ export class _DSLinkMenu extends React.PureComponent {
 
     return (<div>
       <button ref={this.contextMenuButtonRef}
+              aria-haspopup="true"
               className="context-menu-button icon"
               title={this.props.intl.formatMessage({id: "context_menu_title"})}
               onClick={this.onMenuButtonClick}>
diff --git a/content-src/components/TopSites/TopSite.jsx b/content-src/components/TopSites/TopSite.jsx
index b14596fb..00dffd4a 100644
--- a/content-src/components/TopSites/TopSite.jsx
+++ b/content-src/components/TopSites/TopSite.jsx
@@ -281,7 +281,7 @@ export class TopSite extends React.PureComponent {
     const title = link.label || link.hostname;
     return (<TopSiteLink {...props} onClick={this.onLinkClick} onDragEvent={this.props.onDragEvent} className={`${props.className || ""}${isContextMenuOpen ? " active" : ""}`} title={title}>
         <div>
-          <button className="context-menu-button icon" title={this.props.intl.formatMessage({id: "context_menu_title"})} onClick={this.onMenuButtonClick}>
+          <button aria-haspopup="true" className="context-menu-button icon" title={this.props.intl.formatMessage({id: "context_menu_title"})} onClick={this.onMenuButtonClick}>
             <span className="sr-only">
               <FormattedMessage id="context_menu_button_sr" values={{title}} />
             </span>
@@ -318,7 +318,7 @@ export class TopSitePlaceholder extends React.PureComponent {
 
   render() {
     return (<TopSiteLink {...this.props} className={`placeholder ${this.props.className || ""}`} isDraggable={false}>
-      <button className="context-menu-button edit-button icon"
+      <button aria-haspopup="true" className="context-menu-button edit-button icon"
        title={this.props.intl.formatMessage({id: "edit_topsites_edit_button"})}
        onClick={this.onEditButtonClick} />
     </TopSiteLink>);