keep using old select

Author: mabaasit

package-lock.json

@@ -69,7 +69,7 @@
     "@leafygreen-ui/radio-group": "^12.0.2",
     "@leafygreen-ui/search-input": "^5.0.2",
     "@leafygreen-ui/segmented-control": "^10.0.2",
-    "@leafygreen-ui/select": "^16.2.0",
+    "@leafygreen-ui/select": "^14.0.2",
     "@leafygreen-ui/skeleton-loader": "^2.0.11",
     "@leafygreen-ui/split-button": "^4.1.5",
     "@leafygreen-ui/table": "^13.0.1",

packages/compass-components/package.json

@@ -482,8 +482,8 @@ describe('CrudToolbar Component', function () {
   describe('documents per page select', function () {
     it('should render a select to update documents fetched per page', function () {
       renderCrudToolbar();
-      expect(screen.getByLabelText(/Update number of documents per page/i)).to
-        .be.visible;
+      expect(screen.getByLabelText('Update number of documents per page')).to.be
+        .visible;
     });
 
     it('should call updateDocumentsPerPage when select value changes', function () {
@@ -492,7 +492,7 @@ describe('CrudToolbar Component', function () {
         updateMaxDocumentsPerPage: stub,
       });
       userEvent.click(
-        screen.getByLabelText(/Update number of documents per page/i)
+        screen.getByLabelText('Update number of documents per page')
       );
       userEvent.click(screen.getByText('75'));
       expect(stub).to.be.calledWithExactly(75);

packages/compass-crud/src/components/crud-toolbar.spec.tsx

@@ -32,6 +32,9 @@ const TypesDropdown: React.FunctionComponent<TypesDropdownProps> = ({
       onChange={handleTypeChange}
       allowDeselect={false}
       value={element.currentType}
+      readOnly={false}
+      // NOTE: Leafygreen doesn't support aria-label and only understand "aria-labelledby" and "label" instead
+      aria-labelledby=""
       aria-label="Field type"
       className={cx(selectStyles, 'table-view-cell-editor-types')}
       data-testid="table-view-types-dropdown-select"

packages/compass-crud/src/components/table-view/types-dropdown.tsx

@@ -116,6 +116,7 @@ function ImportOptions({
             <Select
               className={delimiterSelectStyles}
               id="import-delimiter-select"
+              aria-labelledby="import-delimiter-label"
               aria-label="Delimiter"
               data-testid="import-delimiter-select"
               onChange={(delimiter: string) =>

packages/compass-import-export/src/components/import-options.tsx

@@ -177,6 +177,8 @@ function SelectFieldType({
 }) {
   return (
     <Select
+      // NOTE: Leafygreen gives an error with only aria-label for select.
+      aria-labelledby={`toggle-import-field-label-${fieldPath}`}
       // leafygreen bases ids inside Select off this id which is why we have it in addition to data-testid
       id={`import-preview-field-type-select-menu-${fieldPath}`}
       data-testid={`import-preview-field-type-select-menu-${fieldPath}`}

packages/compass-import-export/src/components/import-preview.tsx

@@ -188,7 +188,7 @@ function DefaultSortOrderSetting<PreferenceName extends 'defaultSortOrder'>({
       <Select
         className={inputStyles}
         allowDeselect={false}
-        aria-label={`${name}-label`}
+        aria-labelledby={`${name}-label`}
         id={name}
         name={name}
         data-testid={name}

packages/compass-settings/src/components/settings/settings-list.tsx

@@ -133,7 +133,7 @@ function UrlOptionsListEditor({
             className={optionSelectStyles}
             placeholder="Select key"
             name="select-url-options-key-name"
-            aria-label={
+            aria-labelledby={
               uriOption.name ? `${uriOption.name} select` : 'new option select'
             }
             onChange={(name, event): void => {