From b0c70f6d179939ec4d53aedca916adfcc5cce8d8 Mon Sep 17 00:00:00 2001
From: Jordan <srcrr-gitlab@ipriva.com>
Date: Mon, 26 Feb 2024 12:19:55 -0800
Subject: [PATCH] added labels to components.

---
 src/App.test.tsx | 6 +++---
 src/App.tsx      | 8 ++++----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/App.test.tsx b/src/App.test.tsx
index 6500ece..9626cc3 100644
--- a/src/App.test.tsx
+++ b/src/App.test.tsx
@@ -4,13 +4,13 @@ import App from './App';
 
 test('renders Prompt Composer tab', () => {
   render(<App />);
-  const tab = screen.getByText('Prompt Composer');
+  const tab = screen.getByText('prompt-composer-tab');
   expect(tab).toBeInTheDocument();
 });
 
 test('changes tab when clicked', () => {
   render(<App />);
-  const tab = screen.getByText('Prompt Composer');
+  const tab = screen.getByLabelText('text-prompt-tab');
   fireEvent.click(tab);
-  expect(screen.getByText('Text Prompt')).toBeInTheDocument();
+  expect(screen.getByLabelText('text-area')).toBeInTheDocument();
 });
diff --git a/src/App.tsx b/src/App.tsx
index f2c4085..695b0d2 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -47,9 +47,9 @@ function App() {
   return (
     <>
       <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
-        <Tabs value={value} onChange={handleChange} aria-label="prompt-area">
-          <Tab label="Prompt Composer" {...a11yProps(0)} />
-          <Tab label="Text Prompt" {...a11yProps(1)} />
+        <Tabs value={value} onChange={handleChange} aria-label="prompt-selection-tabs">
+          <Tab label="Prompt Composer" {...a11yProps(0)} aria-label="prompt-composer-tab" />
+          <Tab label="Text Prompt" {...a11yProps(1)} aria-label="text-prompt-tab" />
         </Tabs>
       </Box>
       <CustomTabPanel value={value} index={0}>
@@ -57,7 +57,7 @@ function App() {
       </CustomTabPanel>
       <CustomTabPanel value={value} index={1}>
         <div>
-          <textarea>{ $textComposition.get() }</textarea>
+          <textarea aria-label='text-area'>{ $textComposition.get() }</textarea>
         </div>
       </CustomTabPanel>
     </>