fix: added resultsCountContext prop to pass into the screenReaderText… (#11844)

* fix: added resultsCountContext prop to pass into the screenReaderText prop

* fix: updated contributing markdown

* fix: changed integration tests and fixed results duplication

* fix: removed unnecessary dependencies and modified integration tests

* Update packages/react-core/src/components/SearchInput/SearchInput.tsx

Co-authored-by: Eric Olkowski <[email protected]>

---------

Co-authored-by: Eric Olkowski <[email protected]>

Author: parthivrh

packages/react-core/CONTRIBUTING.md

@@ -79,17 +79,15 @@ $ yarn test
 
 Ensure no lint errors are introduced in `yarn-error.log` after running this command.
 
-5.  Add a commit using `yarn commit`:
+5.  Add a commit using `git commit`:
 
-This project uses [`lerna`](https://lernajs.io/) to do automatic releases and generate a changelog based on the commit history. So we follow [a convention][3] for commit messages. Please follow this convention for your commit messages.
-
-You can use `commitizen` to help you to follow [the convention][3].
+This project uses [`lerna`](https://lerna.js.io/) to do automatic releases and generate a changelog based on the commit history. So we follow [a convention][3] for commit messages. Please follow [`this convention`](https://github.com/angular/angular.js/blob/master/DEVELOPERS.md#type) for your commit messages.
 
 Once you are ready to commit the changes, please use the below commands:
 
 ```text
 $ git add <files to be committed>
-$ yarn commit
+$ git commit -m
 ```
 
 ... and follow the instruction of the interactive prompt.

packages/react-core/src/components/SearchInput/SearchInput.tsx

@@ -118,6 +118,8 @@ export interface SearchInputProps extends Omit<React.HTMLProps<HTMLDivElement>,
   /** The number of search results returned. Either a total number of results,
    * or a string representing the current result over the total number of results. i.e. "1 / 5". */
   resultsCount?: number | string;
+  /** Screenreader text that will appear after resultsCount to give context for what that value represents to assistive technologies. */
+  resultsCountContext?: string;
   /** Label for the button which calls the onSearch event handler. */
   submitSearchButtonLabel?: string;
   /** Value of the search input. */
@@ -144,6 +146,7 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
   onToggleAdvancedSearch,
   isAdvancedSearchOpen = false,
   resultsCount,
+  resultsCountContext = ' results',
   onNextClick,
   onPreviousClick,
   innerRef,
@@ -309,7 +312,11 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
       />
       {(renderUtilities || areUtilitiesDisplayed) && (
         <TextInputGroupUtilities>
-          {resultsCount && <Badge isRead>{resultsCount}</Badge>}
+          {resultsCount && (
+            <Badge isRead screenReaderText={resultsCountContext}>
+              {resultsCount}
+            </Badge>
+          )}
           {!!onNextClick && !!onPreviousClick && (
             <div className={textInputGroupStyles.textInputGroupGroup}>
               <Button

packages/react-integration/cypress/integration/searchinput.spec.ts

@@ -36,11 +36,11 @@ describe('Search Input Demo Test', () => {
     cy.get('#enabled-search .pf-v6-c-text-input-group__utilities  > button').should('be.visible');
     cy.get('#enabled-search .pf-v6-c-text-input-group__group').should('be.visible');
 
-    cy.get('#enabled-search .pf-v6-c-badge').should('have.text', '1 / 3');
+    cy.get('#enabled-search .pf-v6-c-badge').should('have.text', '1 / 3 results');
     cy.get('#enabled-search .pf-v6-c-text-input-group__group button').last().click();
-    cy.get('#enabled-search .pf-v6-c-badge').should('have.text', '2 / 3');
+    cy.get('#enabled-search .pf-v6-c-badge').should('have.text', '2 / 3 results');
     cy.get('#enabled-search .pf-v6-c-text-input-group__group button').first().click();
-    cy.get('#enabled-search .pf-v6-c-badge').should('have.text', '1 / 3');
+    cy.get('#enabled-search .pf-v6-c-badge').should('have.text', '1 / 3 results');
 
     cy.get('#enabled-search .pf-v6-c-text-input-group__utilities  > button').click();
     cy.get('#enabled-search .pf-v6-c-text-input-group__text-input').should('not.have.value', 'Hello world');