[BUG] Formatting issue and typo in help for element_mouseevent_keyboard

[aliunwala]

What tool(s) are you using?

• accessibility-checker-engine
• accessibility-checker

Detailed description

Platform: Mac Big Sur, Chrome

Help contains a table that is not rendered with the correct font or clear table structure.
New 2023-10-24: that text color in the "table" remains black and therefore fails in one of the dark modes
There is an extra ')' in the 'About this requirement' section.

• ws the old E2E issue #3153

Steps to reproduce the issue

1. Open the test page: equal-access/accessibility-checker-engine/test/v2/checker/accessibility/rules/Rpt_Aria_EventHandlerMissingRole_Native_Host_Sematics_ruleunit/eventHandlerMissingRole2.html
2. Run the checker on this page
3. Find the issue 'Confirm the
   element with mouse event handler(s) 'onclick' has a corresponding keyboard handler(s)'
4. Open the help for this issue - it contains two three (3)problems:

• a table that is not formatted, the text color doesn;t honor dark mode, and
• a stray ')' in the 'About this requirement' section

Additional information

——————
As of June 1

• general rule description (SME & Dev)
• testcases written (Dev)
• rule developed (Dev)
• message written (SME)
• help written (SME)

[aliunwala]

Triage:
Making this dev since we have a table formatting error.
However, this is simple MDX

[marcjohlic]

@philljenkins do you have an update on this one?

[philljenkins]

The rule was re-named to
element_mouseevent_keyboard: All interactive content with mouse event handlers must have equivalent keyboard access

• and the "table" still has a formatting problem displaying the data table, and has a newly found issue displaying text in one dark mode:
  

[philljenkins]

The "extra parentheses" is still there in the first bullet, but that is a very simple fix

• commit made to branch dev-1674 in draft PR newrule(target_spacing_sufficient): WCAG 2.2: 2.5.8 Target size (minimum) #1719
  

[philljenkins]

However, when the Help is displayed inside the Checker UI, the black text color is transformed correctly to white, however, the table formatting (no CSS?) is still odd.:

• The MDX source code from element_mouseevent_keyboard.html
  

[philljenkins]

Some changes, such as removing the ")" have been made in dev-1674 branch / PR #1719
accessibility-checker-engine/help-v4/en-US/element_mouseevent_keyboard.html

https://github.com/IBMa/equal-access/pull/1719/files#diff-e4d9dfd0b8cee30762cc00be33288cea1cbabf4b78123e3775df5815cf742131

[philljenkins]

assigning to Tom to fix the CSS both in Checker and Rule sets web page.

[tombrunet]

@philljenkins I put the formatting issues into a separate PR since I needed to touch all of the help files to make sure they had the doctype declaration. See #1730. Image with mouse hover of the second row.

[tombrunet]

Also, the only help file I could find with a table is element_mouseevent_keyboard.html.

[philljenkins]

I reviewed & approved the PR #1730

[philljenkins]

@ErickRenteria the PR #1730 can be tested by running the ruleunit testcase and displaying the Help to see the table formatted in the Help page
... equal-access/accessibility-checker-engine/test/v2/checker/accessibility/rules/element_mouseevent_keyboard_ruleunit/Events-invalidNoMouseRequired.svg

Also note that building all PR's now generates a Rule listing artifact in the Actions (see screenshot) that lists the rules, showing the new WCAG 2.2 (A, AA) option, rule & mapping fixes, messages updated, and any new WCAG 2.2 rules, such as

2.4.11 Focus Not Obscured (Minimum) [AA]
When an element receives focus, it is not entirely covered by other content.
element_tabbable_unobscured: When an element receives focus, it is not entirely covered by other content

[philljenkins]

The earlier fixes are in PR #1719
where this typo is fixed

[philljenkins]

I update the README-RULES.md in
https://github.com/IBMa/equal-access/blob/dev-1674/accessibility-checker-engine/README-RULES.md
with the new sub-section in PR #1719

Rules sets and Mappings