Accessibility Search updates and additional minor changes (#24136)

* update to use heading markup

* updating to h3 for accessibility

* increase opactiy to meet 5.5:1 color contrast ratio

* update opacity to meet color contrast ratio

* update styling to match original but use heading markup

* remove aria-hidden for accessibility

* add h1 title search results and update scroll tip colors

* add number of matches

* remove no results since we are showing 0 results

* add overflow to fix border bottom on version search

* Update components/Search.tsx

Co-authored-by: Peter Bengtsson <peterbe@github.com>

* Update components/Search.tsx

Co-authored-by: Peter Bengtsson <peterbe@github.com>

* incorporating feedback and update padding

Co-authored-by: Peter Bengtsson <peterbe@github.com>

components/Search.module.scss

@@ -51,3 +51,7 @@
 .selectWording {
   margin: 0.64rem 0.5rem 0 0;
 }
+
+.versionSearchContainer {
+  overflow: hidden;
+}

components/Search.tsx

@@ -206,7 +206,7 @@ export function Search({
   )
 
   const SearchInput = (
-    <div data-testid="search" aria-hidden="true">
+    <div data-testid="search">
       <div className="position-relative z-2">
         <form role="search" className="width-full d-flex" noValidate onSubmit={onFormSubmit}>
           <label className="text-normal width-full">
@@ -347,23 +347,6 @@ function ShowSearchResults({
   }, [selectedVersion])
 
   if (results) {
-    if (results.length === 0) {
-      // When there results, but exactly 0, it matters if this is the overlay or not.
-      if (isHeaderSearch) {
-        return (
-          <div className="mt-5 px-6">
-            {isLoading ? <span>{t('loading')}...</span> : <span>{t('no_results')}.</span>}
-          </div>
-        )
-      } else {
-        return (
-          <p data-testid="no-search-results" className="d-block mt-4">
-            {t('no_results')}.
-          </p>
-        )
-      }
-    }
-
     const ActionListResults = (
       <div
         data-testid="search-results"
@@ -373,7 +356,7 @@ function ShowSearchResults({
           isHeaderSearch && 'overflow-auto'
         )}
       >
-        <div className="mt-4 pb-4 width-full border-bottom">
+        <div className={cx(styles.versionSearchContainer, 'mt-4 pb-4 width-full border-bottom')}>
           <p className={cx(styles.searchWording, 'f6 ml-4 d-inline-block')}>
             You're searching the <strong>{searchVersion}</strong> version.
           </p>
@@ -389,8 +372,16 @@ function ShowSearchResults({
         </div>
         {/* We might have results AND isLoading. For example, the user typed
         a first word, and is now typing more. */}
-        <p className="d-block ml-4 mt-4">
-          {isLoading ? <span>{t('loading')}...</span> : <span>&nbsp;</span>}
+        {isLoading && (
+          <p className="d-block ml-4 mt-4">
+            <span>{t('loading')}...</span>
+          </p>
+        )}
+        <h1 className="ml-4 f2 mt-4">
+          {t('search_results_for')}: {query}
+        </h1>
+        <p className="ml-4 mb-4 text-normal f5">
+          {t('matches_displayed')}: {results.length === 0 ? t('no_results') : results.length}
         </p>
 
         <ActionList
@@ -421,8 +412,8 @@ function ShowSearchResults({
                             score: {score.toFixed(4)} popularity: {popularity.toFixed(4)}
                           </small>
                         )}
-                        <div
-                          className={cx('mt-2 d-block f4 text-semibold')}
+                        <h2
+                          className={cx('mt-2 text-normal f3 d-block')}
                           dangerouslySetInnerHTML={{
                             __html: title,
                           }}
@@ -433,7 +424,7 @@ function ShowSearchResults({
                           dangerouslySetInnerHTML={{ __html: content }}
                         />
                         <div
-                          className={'d-block mt-2 opacity-60 text-small'}
+                          className={'d-block mt-2 opacity-70 text-small'}
                           dangerouslySetInnerHTML={
                             breadcrumbs.length === 0
                               ? { __html: `${title}`.replace(/<\/?[^>]+(>|$)|(\/)/g, '') }

components/ui/ScrollButton/ScrollButton.tsx

@@ -37,7 +37,7 @@ export const ScrollButton = ({ className, ariaLabel }: ScrollButtonPropsT) => {
     <div className={cx(className, 'transition-200', show ? 'opacity-100' : 'opacity-0')}>
       <button
         onClick={onClick}
-        className="color-bg-default color-fg-on-emphasis border-0 d-inline-block mr-2 f6"
+        className="color-bg-default color-fg-default border-0 d-inline-block mr-2 f6"
       >
         {t('scroll_to_top')}
       </button>

data/ui.yml

@@ -32,7 +32,9 @@ search:
   placeholder: Search topics, products...
   loading: Loading
   no_results: No results found
+  search_results_for: Search results for
   no_content: No content
+  matches_displayed: Matches displayed
 homepage:
   explore_by_product: Explore by product
   version_picker: Version

includes/rest_operation.html

@@ -89,10 +89,10 @@
                 <tbody>
                   {%- for childParam in childParamsGroup.params -%}
                   <tr>
-                    <td class="opacity-60">
+                    <td class="opacity-70">
                       <code>{{ childParam.name }}</code> ({{ childParam.type }})
                     </td>
-                    <td class="opacity-60">{{ childParam.description }}</td>
+                    <td class="opacity-70">{{ childParam.description }}</td>
                   </tr>
                   {%- endfor -%}
                 </tbody>