Clarify category selectors for manage products

e2e/picklist.spec.ts

@@ -34,7 +34,7 @@ test.describe('Active pick list', () => {
 
     await page.getByLabel('Name').click();
     await page.getByLabel('Name').fill('Playwright Cola');
-    await page.getByLabel('Category').click();
+    await page.getByLabel('Add product category').click();
     await page.getByRole('option', { name: 'Drinks' }).click();
     await page.getByRole('button', { name: 'Save Product' }).click();
 

src/screens/ManageProductsScreen.tsx

@@ -303,10 +303,11 @@ export const ManageProductsScreen = () => {
           />
           <TextField
             select
-            label="Category"
+            label="Filter by category"
             value={selectedCategory}
             onChange={(event) => setSelectedCategory(event.target.value)}
             sx={{ minWidth: { sm: 180 } }}
+            inputProps={{ 'aria-label': 'Category filter' }}
           >
             <MenuItem value="all">All categories</MenuItem>
             {categoryOptions.map((cat) => (
@@ -347,7 +348,7 @@ export const ManageProductsScreen = () => {
           />
           <TextField
             select
-            label="Category"
+            label="Add product category"
             value={category}
             onChange={(event) => setCategory(event.target.value)}
             disabled={categoryOptions.length === 0}