STCOM-1329 expose aria-label for SearchField Index <Select> (#2334)

* expose indexLabel prop on SearchField

* remove only from searchfield test

* remove unused dependency from SearchField test suite

* Update CHANGELOG.md

CHANGELOG.md

@@ -30,6 +30,7 @@
 * Make `<MultiSelection>` less strict about item removal via `itemToKey` setting (`downshift`). Refs STCOM-1311.
 * Conform `<Selection>`'s internal state when dataOptions prop changes after initial render. Refs STCOM-1313.
 * Add the `showSortIndicator` property to MLC to display a sort indicator next to the sortable column names. Refs STCOM-1328.
+* Expose `aria-label` for SearchField Index `<Select>`. Refs STCOM-1329.
 
 ## [12.1.0](https://github.com/folio-org/stripes-components/tree/v12.1.0) (2024-03-12)
 [Full Changelog](https://github.com/folio-org/stripes-components/compare/v12.0.0...v12.1.0)

lib/SearchField/SearchField.js

@@ -36,6 +36,7 @@ const propTypes = {
   clearSearchId: PropTypes.string,
   disabled: PropTypes.bool,
   id: PropTypes.string,
+  indexLabel: PropTypes.string,
   indexName: PropTypes.string,
   indexRef: PropTypes.oneOfType([
     PropTypes.func,
@@ -47,6 +48,7 @@ const propTypes = {
     PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
   ]),
   inputType: PropTypes.oneOf(Object.values(INPUT_TYPES)),
+  isCursorAtEnd: PropTypes.bool,
   loading: PropTypes.bool,
   lockWidth: PropTypes.bool,
   newLineOnShiftEnter: PropTypes.bool,
@@ -77,6 +79,7 @@ const SearchField = (props) => {
     placeholder,
     id,
     ariaLabel,
+    indexLabel: indexLabelProp,
     indexName,
     value,
     onChange,
@@ -108,11 +111,11 @@ const SearchField = (props) => {
   const intl = useIntl();
 
   if (hasSearchableIndexes || searchableOptions) {
-    const indexLabel = intl.formatMessage({ id: 'stripes-components.searchFieldIndex' });
+    const indexLabel = indexLabelProp || intl.formatMessage({ id: 'stripes-components.searchFieldIndex' });
 
     searchableIndexesDropdown = (
       <Select
-        aria-label={indexLabel}
+        aria-label={indexLabelProp || indexLabel}
         dataOptions={searchableOptions ? undefined : searchableIndexes}
         disabled={loading}
         id={`${id}-qindex`}
@@ -171,6 +174,7 @@ const SearchField = (props) => {
       inputClass: classNames(css.input, inputClass),
     };
     const textAreaProps = {
+      'aria-label': rest['aria-label'] || ariaLabel,
       rootClass: rest.className,
       lockWidth,
       onSubmitSearch,

lib/SearchField/readme.md

@@ -77,6 +77,7 @@ Name | type | Description
 placeholder | string | Adds a placeholder to the search input field
 id | string | Adds an ID to the input field
 className | string | Adds a className to the root element
+indexLabel | string | Applied as an `aria-label` to the index `<Select>`.
 indexRef | ref | Reference to search index dropdown element.
 inputClass | string | Adds a className to the input
 inputRef | ref | Reference to search query input element.

lib/SearchField/tests/SearchField-test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { describe, beforeEach, it } from 'mocha';
 import { expect } from 'chai';
-import { SearchField as Interactor, runAxeTest } from '@folio/stripes-testing';
+import { SearchField as Interactor, runAxeTest, TextInput, TextArea, Label } from '@folio/stripes-testing';
 
 import { mountWithContext } from '../../../tests/helpers';
 import SearchField from '../SearchField';
@@ -10,13 +10,19 @@ const LABEL_PUBLISHER = 'Publisher';
 const LABEL_SUBJECT = 'Subject';
 const PLACEHOLDER_SUBJECT = 'Subject...';
 
+const ariaLabelFilters = {
+  ariaLabel: (el) => el.getAttribute('aria-label')
+};
+const AriaTextInput = TextInput.extend('aria text input')
+  .filters(ariaLabelFilters);
+
 describe('SearchField', () => {
   const searchField = Interactor();
 
   describe('rendering a SearchField', () => {
     beforeEach(async () => {
       await mountWithContext(
-        <SearchField aria-label="search" id="searchFieldTest" />
+        <SearchField aria-label="test search" id="searchFieldTest" />
       );
     });
 
@@ -28,6 +34,8 @@ describe('SearchField', () => {
         readOnly: false
       }
     ));
+
+    it('applies aria-label to search field', () => AriaTextInput({ ariaLabel: 'test search' }).exists());
   });
 
   describe('supplying an onChange handler', () => {
@@ -71,12 +79,15 @@ describe('SearchField', () => {
     beforeEach(async () => {
       await mountWithContext(
         <SearchField
+          ariaLabel="test search field"
           id="searchFieldTest"
           inputType="textarea"
         />
       );
     });
 
+    it('renders aria label on textArea', () => TextArea({ ariaLabel: 'test search field' }).exists());
+
     describe('changing the field', () => {
       beforeEach(async () => {
         await searchField.fillIn('testing text');
@@ -194,9 +205,11 @@ describe('SearchField', () => {
       render() {
         return (
           <SearchField
+            id="testSearchField"
             onChangeIndex={(e) => { this.setState({ searchFieldIndex: e.target.value }); }}
             searchableOptions={searchableOptions}
             selectedIndex={this.state.searchFieldIndex}
+            indexLabel="test index label"
           />
         );
       }
@@ -209,9 +222,11 @@ describe('SearchField', () => {
     });
 
     it('should not render startControlElement', () => searchField.perform(el => {
-      expect(el.querySelector(`div[class^="startControls---"]`)).to.be.null;
+      expect(el.querySelector('div[class^="startControls---"]')).to.be.null;
     }));
 
+    it('renders index select with provided aria-label', () => Label('test index label').has({ visible: false }));
+
     describe('changing the index', () => {
       beforeEach(async () => {
         await searchField.selectIndex('Option2');

lib/Select/Select.js

@@ -74,7 +74,7 @@ class Select extends Component {
   }
 
   getAriaLabelledBy() {
-    const label = this.props.label && `${this.id}-label`;
+    const label = (this.props.label || this.props['aria-label']) && `${this.id}-label`;
     const readOnly = this.props.readOnly && `${this.id}-read-only-message`;
 
     const finalString = [label, this.props['aria-labelledby'], readOnly].filter(Boolean).join(' ');

lib/TextArea/TextArea.js

@@ -322,6 +322,7 @@ class TextArea extends Component {
       'lockWidth',
       'rootClass',
       'marginBottom0',
+      'isCursorAtEnd',
     ]);
 
     const component = (