Bug 1547337 - Accessibility Audit (#5193)

content-src/components/CollapsibleSection/CollapsibleSection.jsx

@@ -119,6 +119,7 @@ export class CollapsibleSection extends React.PureComponent {
 
   onKeyPress(event) {
     if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
       this.onHeaderClick();
     }
   }
@@ -223,16 +224,13 @@ export class CollapsibleSection extends React.PureComponent {
               >
                 {this.renderIcon()}
                 <FluentOrText message={title} />
-              </span>
-              <span
-                className="click-target"
-                role="button"
-                tabIndex="0"
-                onKeyPress={this.onKeyPress}
-                onClick={this.onHeaderClick}
-              >
                 {isCollapsible && (
                   <span
+                    data-l10n-id={
+                      collapsed
+                        ? "newtab-section-expand-section-label"
+                        : "newtab-section-collapse-section-label"
+                    }
                     className={`collapsible-arrow icon ${
                       collapsed
                         ? "icon-arrowhead-forward-small"

content-src/components/ContextMenu/ContextMenu.jsx

@@ -44,16 +44,16 @@ export class ContextMenu extends React.PureComponent {
     // Disabling focus on the menu span allows the first tab to focus on the first menu item instead of the wrapper.
     return (
       // eslint-disable-next-line jsx-a11y/interactive-supports-focus
-      <span
-        role="menu"
-        className="context-menu"
-        onClick={this.onClick}
-        onKeyDown={this.onClick}
-      >
-        <ul className="context-menu-list">
+      <span className="context-menu">
+        <ul
+          role="menu"
+          onClick={this.onClick}
+          onKeyDown={this.onClick}
+          className="context-menu-list"
+        >
           {this.props.options.map((option, i) =>
             option.type === "separator" ? (
-              <li key={i} className="separator" />
+              <li key={i} className="separator" role="separator" />
             ) : (
               option.type !== "empty" && (
                 <ContextMenuItem
@@ -61,7 +61,6 @@ export class ContextMenu extends React.PureComponent {
                   option={option}
                   hideContext={this.hideContext}
                   keyboardAccess={this.props.keyboardAccess}
-                  tabIndex="0"
                 />
               )
             )
@@ -77,6 +76,7 @@ export class ContextMenuItem extends React.PureComponent {
     super(props);
     this.onClick = this.onClick.bind(this);
     this.onKeyDown = this.onKeyDown.bind(this);
+    this.onKeyUp = this.onKeyUp.bind(this);
     this.focusFirst = this.focusFirst.bind(this);
   }
 
@@ -129,6 +129,8 @@ export class ContextMenuItem extends React.PureComponent {
         this.focusSibling(event.target, event.key);
         break;
       case "Enter":
+      case " ":
+        event.preventDefault();
         this.props.hideContext();
         option.onClick();
         break;
@@ -138,15 +140,24 @@ export class ContextMenuItem extends React.PureComponent {
     }
   }
 
+  // Prevents the default behavior of spacebar
+  // scrolling the page & auto-triggering buttons.
+  onKeyUp(event) {
+    if (event.key === " ") {
+      event.preventDefault();
+    }
+  }
+
   render() {
     const { option } = this.props;
     return (
-      <li role="menuitem" className="context-menu-item">
+      <li role="presentation" className="context-menu-item">
         <button
           className={option.disabled ? "disabled" : ""}
-          tabIndex="0"
+          role="menuitem"
           onClick={this.onClick}
           onKeyDown={this.onKeyDown}
+          onKeyUp={this.onKeyUp}
           ref={option.first ? this.focusFirst : null}
         >
           {option.icon && (

content-src/components/ContextMenu/ContextMenuButton.jsx

@@ -32,7 +32,7 @@ export class ContextMenuButton extends React.PureComponent {
   }
 
   onKeyDown(event) {
-    if (event.key === "Enter") {
+    if (event.key === "Enter" || event.key === " ") {
       event.preventDefault();
       this.openContextMenu(true, event);
     }

locales-src/newtab.ftl

@@ -47,7 +47,7 @@ newtab-topsites-save-button = Save
 newtab-topsites-preview-button = Preview
 newtab-topsites-add-button = Add
 
-## Top Sites - Delete history confirmation dialog. 
+## Top Sites - Delete history confirmation dialog.
 
 newtab-confirm-delete-history-p1 = Are you sure you want to delete every instance of this page from your history?
 # "This action" refers to deleting a page from history.
@@ -89,7 +89,7 @@ newtab-menu-remove-bookmark = Remove Bookmark
 # Bookmark is a verb here.
 newtab-menu-bookmark = Bookmark
 
-## Context Menu - Downloaded Menu. "Download" in these cases is not a verb, 
+## Context Menu - Downloaded Menu. "Download" in these cases is not a verb,
 ## it is a noun. As in, "Copy the link that belongs to this downloaded item".
 
 newtab-menu-copy-download-link = Copy Download Link
@@ -117,7 +117,7 @@ newtab-label-recommended = Trending
 newtab-label-saved = Saved to { -pocket-brand-name }
 newtab-label-download = Downloaded
 
-## Section Menu: These strings are displayed in the section context menu and are 
+## Section Menu: These strings are displayed in the section context menu and are
 ## meant as a call to action for the given section.
 
 newtab-section-menu-remove-section = Remove Section
@@ -131,6 +131,13 @@ newtab-section-menu-move-up = Move Up
 newtab-section-menu-move-down = Move Down
 newtab-section-menu-privacy-notice = Privacy Notice
 
+## Section aria-labels
+
+newtab-section-collapse-section-label =
+    .aria-label = Collapse Section
+newtab-section-expand-section-label =
+    .aria-label = Expand Section
+
 ## Section Headers.
 
 newtab-section-header-topsites = Top Sites

test/unit/content-src/components/CollapsibleSection.test.jsx

@@ -69,21 +69,6 @@ describe("CollapsibleSection", () => {
       .simulate("click");
   });
 
-  it("should fire a pref change event when section title arrow is clicked", done => {
-    function dispatch(a) {
-      if (a.type === at.UPDATE_SECTION_PREFS) {
-        assert.equal(a.data.id, DEFAULT_PROPS.id);
-        assert.equal(a.data.value.collapsed, true);
-        done();
-      }
-    }
-    setup({ dispatch });
-    wrapper
-      .find(".click-target")
-      .at(1)
-      .simulate("click");
-  });
-
   it("should not fire a pref change when section title is clicked if sectionBody is falsy", () => {
     const dispatch = sinon.spy();
     setup({ dispatch });

test/unit/content-src/components/ContextMenu.test.jsx

@@ -128,7 +128,10 @@ describe("<ContextMenu>", () => {
   it("should be tabbable", () => {
     const options = [{ label: "item1", icon: "icon1" }, { type: "separator" }];
     const wrapper = mount(<ContextMenu {...DEFAULT_PROPS} options={options} />);
-    assert.equal(wrapper.find(".context-menu-item").props().role, "menuitem");
+    assert.equal(
+      wrapper.find(".context-menu-item").props().role,
+      "presentation"
+    );
   });
   it("should call onUpdate with false when an option is clicked", () => {
     const onUpdate = sinon.spy();