SONAR-16703 [891614] Form elements must have labels

2 files changed, 48 insertions, 4 deletions

diff --git a/server/sonar-web/src/main/js/app/components/nav/component/projectInformation/meta/MetaKey.tsx b/server/sonar-web/src/main/js/app/components/nav/component/projectInformation/meta/MetaKey.tsx
index 9b3d0f4b4a4..b7e197a83de 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/projectInformation/meta/MetaKey.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/component/projectInformation/meta/MetaKey.tsx
@@ -21,17 +21,23 @@ import * as React from 'react';
 import { ClipboardButton } from '../../../../../../components/controls/clipboard';
 import { translate } from '../../../../../../helpers/l10n';
 
-interface Props {
+export interface MetaKeyProps {
   componentKey: string;
   qualifier: string;
 }
 
-export default function MetaKey({ componentKey, qualifier }: Props) {
+export default function MetaKey({ componentKey, qualifier }: MetaKeyProps) {
   return (
     <>
-      <h3>{translate('overview.project_key', qualifier)}</h3>
+      <h3 id="project-key">{translate('overview.project_key', qualifier)}</h3>
       <div className="display-flex-center">
-        <input className="overview-key" readOnly={true} type="text" value={componentKey} />
+        <input
+          className="overview-key"
+          aria-labelledby="project-key"
+          readOnly={true}
+          type="text"
+          value={componentKey}
+        />
         <ClipboardButton className="little-spacer-left" copyValue={componentKey} />
       </div>
     </>
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/projectInformation/meta/__tests__/MetaKey-test.tsx b/server/sonar-web/src/main/js/app/components/nav/component/projectInformation/meta/__tests__/MetaKey-test.tsx
new file mode 100644
index 00000000000..d081a6d7c7c
--- /dev/null
+++ b/server/sonar-web/src/main/js/app/components/nav/component/projectInformation/meta/__tests__/MetaKey-test.tsx
@@ -0,0 +1,38 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2022 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+import { screen } from '@testing-library/react';
+import * as React from 'react';
+import { renderComponent } from '../../../../../../../helpers/testReactTestingUtils';
+import { ComponentQualifier } from '../../../../../../../types/component';
+import MetaKey, { MetaKeyProps } from '../MetaKey';
+
+it('should render correctly', () => {
+  renderMetaKey();
+  expect(
+    screen.getByLabelText(`overview.project_key.${ComponentQualifier.Project}`)
+  ).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: 'copy_to_clipboard' })).toBeInTheDocument();
+});
+
+function renderMetaKey(props: Partial<MetaKeyProps> = {}) {
+  return renderComponent(
+    <MetaKey componentKey="foo" qualifier={ComponentQualifier.Project} {...props} />
+  );
+}