SONAR-22287 Fix a11y issues on Issue Detail page

diff --git a/server/sonar-web/src/main/js/apps/issues/__tests__/IssuesSourceViewer-it.tsx b/server/sonar-web/src/main/js/apps/issues/__tests__/IssuesSourceViewer-it.tsx
index 1cac63aa8ba5bae9c2fcc9571e1e52d14e691b10..b24d7b21e0df28fa00b7f9ef9d07e46e28b364fb 100644 (file)
--- a/server/sonar-web/src/main/js/apps/issues/__tests__/IssuesSourceViewer-it.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/__tests__/IssuesSourceViewer-it.tsx
@@ -104,8 +104,8 @@ describe('issues source viewer', () => {
     renderProjectIssuesApp('project/issues?issues=issue101&open=issue101&id=myproject');
     await waitOnDataLoaded();
 
-    expect(screen.getByRole('separator', { name: 'test1.js' })).toBeInTheDocument();
-    expect(screen.getByRole('separator', { name: 'test2.js' })).toBeInTheDocument();
+    expect(screen.getByLabelText('test1.js')).toBeInTheDocument();
+    expect(screen.getByLabelText('test2.js')).toBeInTheDocument();
 
     // Both line 1 of test1.js and test2.js should be rendered after expanding lines above snippet in test2.js
     expect(ui.line1.getAll()).toHaveLength(1);

diff --git a/server/sonar-web/src/main/js/apps/issues/crossComponentSourceViewer/IssueSourceViewerHeader.tsx b/server/sonar-web/src/main/js/apps/issues/crossComponentSourceViewer/IssueSourceViewerHeader.tsx
index 0d7464ba00ac993daa4c9341b276c2a449d634da..528712bb1634d2277653e26e4e0375a47df11c98 100644 (file)
--- a/server/sonar-web/src/main/js/apps/issues/crossComponentSourceViewer/IssueSourceViewerHeader.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/crossComponentSourceViewer/IssueSourceViewerHeader.tsx
@@ -89,7 +89,7 @@ export function IssueSourceViewerHeader(props: Readonly<Props>) {
 
   const borderColor = themeColor('codeLineBorder')({ theme });
 
-  const IssueSourceViewerStyle = styled.div`
+  const IssueSourceViewerStyle = styled.section`
     border: 1px solid ${borderColor};
     border-bottom: none;
   `;
@@ -113,7 +113,6 @@ export function IssueSourceViewerHeader(props: Readonly<Props>) {
         'sw-flex sw-justify-space-between sw-items-center sw-px-4 sw-py-3 sw-text-sm',
         className,
       )}
-      role="separator"
     >
       <div className="sw-flex-1">
         {displayProjectName && (