VACMS-19377: Fix tabbing for content editor menus.

[anantais]

Description

Closes #19377

Testing done

Screenshots

QA steps

When logged in to the Drupal backend, start to tab through the main menus with your keyboard (content, structure, etc).
The tabbing should work on the main menus but require you to hit enter to tab in to submenus.

As user uid with user_role

Tab through Drupal back end menus
Hit enter to enter a sub menu.
If you do not hit enter you should remain in the top level menu when tabbing

Definition of Done

• Documentation has been updated, if applicable.
• Tests have been added if necessary.
• Automated tests have passed.
• Code Quality Tests have passed.
• Acceptance Criteria in related issue are met.
• Manual Code Review Approved.
• If there are field changes, front end output has been thoroughly checked.

Select Team for PR review

• CMS Team
• Public websites
• Facilities
• User support
• Accelerated Publishing

Is this PR blocked by another PR?

• DO NOT MERGE

Does this PR need review from a Product Owner

• Needs PO review

CMS user-facing announcement

Is an announcement needed to let editors know of this change?

• Yes, and it's written in issue ____ and queued for publication.
  • Merge and ping the UX writer so they are ready to publish after deployment
• Yes, but it hasn't yet been written
  • Don't merge yet -- ping the UX writer to write and queue content
• No announcement is needed for this code change.
  • Merge & carry on unburdened by announcements

[github-actions]

Checking composer.lock changes...

[github-actions]

Checking composer.lock changes...

[github-actions]

Checking composer.lock changes...

[github-actions]

Checking composer.lock changes...

[github-actions]

Checking composer.lock changes...

[github-actions]

Checking composer.lock changes...

[github-actions]

Checking composer.lock changes...

[github-actions]

Checking composer.lock changes...

[github-actions]

Checking composer.lock changes...

[va-cms-bot]

Accessibility Violations Found:

[
  {
    "route": "/test-data-sapiente",
    "id": "button-name",
    "impact": "critical",
    "tags": [
      "cat.name-role-value",
      "wcag2a",
      "wcag412",
      "section508",
      "section508.22.a",
      "ACT",
      "TTv5",
      "TT6.a"
    ],
    "description": "Ensures buttons have discernible text",
    "help": "Buttons must have discernible text",
    "helpUrl": "https://dequeuniversity.com/rules/axe/4.7/button-name?application=axeAPI",
    "nodes": [
      {
        "any": [
          {
            "id": "button-has-visible-text",
            "data": null,
            "relatedNodes": [],
            "impact": "critical",
            "message": "Element does not have inner text that is visible to screen readers"
          },
          {
            "id": "aria-label",
            "data": null,
            "relatedNodes": [],
            "impact": "serious",
            "message": "aria-label attribute does not exist or is empty"
          },
          {
            "id": "aria-labelledby",
            "data": null,
            "relatedNodes": [],
            "impact": "serious",
            "message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
          },
          {
            "id": "non-empty-title",
            "data": {
              "messageKey": "noAttr"
            },
            "relatedNodes": [],
            "impact": "serious",
            "message": "Element has no title attribute"
          },
          {
            "id": "presentational-role",
            "data": null,
            "relatedNodes": [],
            "impact": "minor",
            "message": "Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
          }
        ],
        "all": [],
        "none": [],
        "impact": "critical",
        "html": "<button class=\"proofing-element-help\" role=\"tooltip\" data-proofing-help-title=\"About 'Page introduction' field\" data-proofing-help=\"Add an introduction that helps visitors understand if information on the page is relevant to them.\">
          <span aria-hidden=\"true\">i</span>
        </button>",
        "target": [
          ".field--name-field-intro-text-limited-html > .field__label > .proofing-element-help[role=\"tooltip\"]"
        ],
        "failureSummary": "Fix any of the following:
  Element does not have inner text that is visible to screen readers
  aria-label attribute does not exist or is empty
  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
  Element has no title attribute
  Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
      },
      {
        "any": [
          {
            "id": "button-has-visible-text",
            "data": null,
            "relatedNodes": [],
            "impact": "critical",
            "message": "Element does not have inner text that is visible to screen readers"
          },
          {
            "id": "aria-label",
            "data": null,
            "relatedNodes": [],
            "impact": "serious",
            "message": "aria-label attribute does not exist or is empty"
          },
          {
            "id": "aria-labelledby",
            "data": null,
            "relatedNodes": [],
            "impact": "serious",
            "message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
          },
          {
            "id": "non-empty-title",
            "data": {
              "messageKey": "noAttr"
            },
            "relatedNodes": [],
            "impact": "serious",
            "message": "Element has no title attribute"
          },
          {
            "id": "presentational-role",
            "data": null,
            "relatedNodes": [],
            "impact": "minor",
            "message": "Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
          }
        ],
        "all": [],
        "none": [],
        "impact": "critical",
        "html": "<button class=\"proofing-element-help\" role=\"tooltip\" data-proofing-help-title=\"About 'Generate a table of contents from major headings' field\" data-proofing-help=\"By checking this box, all h2's below this point on the page will be linked with with anchor links. This helps users navigate content on very long pages. Do not check this box unless there is at least 2 h2's on the page.\">",
        "target": [
          ".field--name-field-table-of-contents-boolean > .field__label > .proofing-element-help[role=\"tooltip\"]"
        ],
        "failureSummary": "Fix any of the following:
  Element does not have inner text that is visible to screen readers
  aria-label attribute does not exist or is empty
  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
  Element has no title attribute
  Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
      },
      {
        "any": [
          {
            "id": "button-has-visible-text",
            "data": null,
            "relatedNodes": [],
            "impact": "critical",
            "message": "Element does not have inner text that is visible to screen readers"
          },
          {
            "id": "aria-label",
            "data": null,
            "relatedNodes": [],
            "impact": "serious",
            "message": "aria-label attribute does not exist or is empty"
          },
          {
            "id": "aria-labelledby",
            "data": null,
            "relatedNodes": [],
            "impact": "serious",
            "message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
          },
          {
            "id": "non-empty-title",
            "data": {
              "messageKey": "noAttr"
            },
            "relatedNodes": [],
            "impact": "serious",
            "message": "Element has no title attribute"
          },
          {
            "id": "presentational-role",
            "data": null,
            "relatedNodes": [],
            "impact": "minor",
            "message": "Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
          }
        ],
        "all": [],
        "none": [],
        "impact": "critical",
        "html": "<button class=\"proofing-element-help\" role=\"tooltip\" data-proofing-help-title=\"About 'Main content' field\" data-proofing-help=\"The main body of the page, which appears below the featured content.\">
          <span aria-hidden=\"true\">i</span>
        </button>",
        "target": [
          "button[data-proofing-help-title=\"About 'Main content' field\"]"
        ],
        "failureSummary": "Fix any of the following:
  Element does not have inner text that is visible to screen readers
  aria-label attribute does not exist or is empty
  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
  Element has no title attribute
  Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
      }
    ]
  }
]

[va-cms-bot]

Tugboat has finished building the preview for this pull request!

Links:

• https://pr19864-l78xqddj25tgszovzopydoeyttpts7gs.ci.cms.va.gov
• https://cms-l78xqddj25tgszovzopydoeyttpts7gs.ci.cms.va.gov
• https://web-l78xqddj25tgszovzopydoeyttpts7gs.ci.cms.va.gov
• https://storybook-l78xqddj25tgszovzopydoeyttpts7gs.ci.cms.va.gov
• https://next-l78xqddj25tgszovzopydoeyttpts7gs.ci.cms.va.gov

Dashboard:

• https://tugboat.vfs.va.gov/6733c1dd5e7b8c6458411dfc

[srancour]

So some interesting issues I found while testing that PR:

• When collapsing the screen down to where the menu reflows onto two lines the dropdown button still shows over the menu that’s open
  • 
• The button is changing names on press instead of doing like the Sections dropdowns do where the name of the button stays the same and the button uses the aria-expanded attribute. I would suggest changing the name to be {nameOfMenu} sub menu
  • Menu button code
    • closed: Extend Tools
    • open: Collapse Tools
  • Sections button code
    • closed:
    • open:
• On mouse hover the button isn’t switching or firing the open state so it doesn’t look open and a screen reader user won’t get the knowledge that it’s open.
  • 
• In the open state, there is no way to cancel the close after pressing on it with a mouse, where there is a way to cancel it when it’s closed, thus breaking WCAG 2.5.2: Pointer Cancellation (Level A)
  • Video showing mouse not being able to cancel by holding and moving off button
• When a menu gets opened up from a press, it doesn’t close when any of the parent menus closes. It’s not particularly an accessibility issue, but it makes for a bad experience.
  • Video showing menus not closing when parent is closed
• Interesting bug I discovered is when you are tabbing through, if you have the mouse hovering over a menu, it will tab through what’s visible, which is as it should be, but if you move the hover off the menu and then tab again, it throws the tab to the top of the page, which is really bad.
  • Video showing tab state moving to the top of the page after moving mouse off menu that was being tabbed through
• The color contrast of the dropdown arrow when focused doesn’t meet color contrast just barely (2.9:1 instead of 3:1)