Merge pull request #1783 from IBMa/joho-CheckerA11yIssues-1781

fix(extension): Fixed Issues found and Learn more modal a11y issues
IBMa · Jan 11, 2024 · e7fe199 · e7fe199
2 parents 837beb9 + dd60af4
commit e7fe199
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 10 deletions.
diff --git a/accessibility-checker-extension/src/ts/devtools/components/reportTreeGrid.tsx b/accessibility-checker-extension/src/ts/devtools/components/reportTreeGrid.tsx
@@ -224,7 +224,14 @@ export class ReportTreeGrid<RowType extends IRowGroup> extends React.Component<R
         await ReportTreeGrid.devtoolsController.setSelectedIssue(issue);
         if (this.props.panel === "elements" && inspect !== false) {
             // this.setState({ tabRowId: ReportTreeGrid.getRowId(group, issue) });
-            await ReportTreeGrid.devtoolsController.inspectPath(issue.path.dom, this.treeGridRef.current);
+            let focusTarget: HTMLElement | null = this.treeGridRef.current;
+            if (ReportTreeGrid.devtoolsAppController.getSecondaryOpen()) {
+                let secondaryPanel = document.querySelector(".secondaryDialog") as HTMLElement;
+                if (window.getComputedStyle(secondaryPanel).display !== "none") {
+                    focusTarget = secondaryPanel.querySelector(".cds--modal-close")
+                }
+            }
+            await ReportTreeGrid.devtoolsController.inspectPath(issue.path.dom, focusTarget);
         } else {
             await ReportTreeGrid.devtoolsController.setSelectedElementPath(issue.path.dom);
         }
@@ -821,21 +828,23 @@ export class ReportTreeGrid<RowType extends IRowGroup> extends React.Component<R
                                                 tabIndex={-1}
                                             />
                                         </div>
-                                        {UtilIssueReact.valueToIcon(thisIssue.value, "levelIcon")} {thisIssue.ignored && <ViewOff size={16} />}{<span style={{paddingRight:"4px"}}></span>}{thisIssue.message} <a
+                                        {UtilIssueReact.valueToIcon(thisIssue.value, "levelIcon")} {thisIssue.ignored && <ViewOff size={16} />}{<span style={{paddingRight:"4px"}}></span>}{thisIssue.message} 
+                                        {" "}<Link
                                             className="hideLg cds--link hideLg cds--link--inline cds--link--sm"
                                             role="link"
-                                            tabIndex={focused ? 0 : -1}
+                                            href="#0"
+                                            // tabIndex={focused ? 0 : -1}
                                             onClick={() => {
                                                 this.onRow(group, thisIssue);
                                                 ReportTreeGrid.devtoolsAppController.openSecondary(`#${rowId} a`);
                                             }}
-                                            onKeyDown={(evt: React.KeyboardEvent) => {
-                                                if (evt.key === "Enter" || evt.key === "Return") {
-                                                    this.onRow(group, thisIssue);
-                                                    ReportTreeGrid.devtoolsAppController.openSecondary(`#${rowId} a`);
-                                                }
-                                            }}
-                                        >Learn more</a>
+                                            // onKeyDown={(evt: React.KeyboardEvent) => {
+                                            //     if (evt.key === "Enter" || evt.key === "Return") {
+                                            //         this.onRow(group, thisIssue);
+                                            //         ReportTreeGrid.devtoolsAppController.openSecondary(`#${rowId} a`);
+                                            //     }
+                                            // }}
+                                        >Learn more</Link>
                                     </div>
                                 </Column>
                             </Grid>

diff --git a/accessibility-checker-extension/src/ts/devtools/components/scanSection.tsx b/accessibility-checker-extension/src/ts/devtools/components/scanSection.tsx
@@ -491,6 +491,7 @@ export class ScanSection extends React.Component<{}, ScanSectionState> {
                     </span>
                     <Link 
                         id="totalIssuesCount" 
+                        href="#0"
                         className= {totalCount === 0 ? "darkLink totalCountDisable" : "darkLink totalCountEnable"}
                         aria-disabled={totalCount === 0}
                         inline={true}