From 5d06156e16cd6b0242072ca5e932854baa7c3c78 Mon Sep 17 00:00:00 2001
From: 7PH <benjamin.raymond@sonarsource.com>
Date: Thu, 15 Aug 2024 11:36:36 +0200
Subject: [PATCH] SONAR-22287 Fix a11y issues on Issue Detail page

---
 .../main/js/apps/issues/__tests__/IssuesSourceViewer-it.tsx   | 4 ++--
 .../crossComponentSourceViewer/IssueSourceViewerHeader.tsx    | 3 +--
 2 files changed, 3 insertions(+), 4 deletions(-)

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 1cac63aa8ba..b24d7b21e0d 100644
--- 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 0d7464ba00a..528712bb163 100644
--- 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 && (
-- 
2.39.5