Merge pull request #902 from City-of-Helsinki/UHF-5527

UHF-5527 Small accessibility improvements for unit searches and custom searches
City-of-Helsinki · Feb 9, 2024 · 478c584 · 478c584
2 parents 0bba02f + a658050
commit 478c584
Show file tree

Hide file tree

Showing 23 changed files with 73 additions and 34 deletions.
diff --git a/dist/css/styles.min.css b/dist/css/styles.min.css
diff --git a/dist/js/district-and-project-search.min.js b/dist/js/district-and-project-search.min.js
diff --git a/dist/js/health-station-search.min.js b/dist/js/health-station-search.min.js
diff --git a/dist/js/job-search.min.js b/dist/js/job-search.min.js
diff --git a/dist/js/linkedevents.min.js b/dist/js/linkedevents.min.js
diff --git a/dist/js/maternity-and-child-health-clinic-search.min.js b/dist/js/maternity-and-child-health-clinic-search.min.js
diff --git a/dist/js/news-archive.min.js b/dist/js/news-archive.min.js
diff --git a/dist/js/ploughing-schedule.min.js b/dist/js/ploughing-schedule.min.js
diff --git a/dist/js/school-search.min.js b/dist/js/school-search.min.js
diff --git a/hdbt.theme b/hdbt.theme
@@ -397,6 +397,15 @@ function _hdbt_preprocess_image_caption(array &$variables, string $entity_type,
   }
 }
 
+/**
+ * Implements hook_theme_suggestions_HOOK_alter().
+ */
+function hdbt_theme_suggestions_input_alter(array &$suggestions, array $variables): void {
+  if (isset($variables['element']['#name'])) {
+    $suggestions[] = $variables['theme_hook_original'] . '__' . str_replace('-', '_', $variables['element']['#name']);
+  }
+}
+
 /**
  * Implements hook_theme_suggestions_HOOK_alter().
  */
@@ -411,6 +420,10 @@ function hdbt_theme_suggestions_form_element_alter(array &$suggestions, array $v
  */
 function hdbt_theme_suggestions_form_alter(array &$suggestions, array $variables): void {
   $suggestions[] = 'form__' . str_replace('-', '_', $variables['element']['#id']);
+
+  if (isset($variables['element']['unit_search']) && $variables['element']['unit_search']) {
+    $suggestions[] = 'form__unit_search';
+  }
 }
 
 /**

diff --git a/package-lock.json b/package-lock.json
diff --git a/src/js/react/apps/district-and-project-search/containers/FormContainer.tsx b/src/js/react/apps/district-and-project-search/containers/FormContainer.tsx
@@ -64,7 +64,7 @@ const FormContainer = () => {
   const projectTypeLabel: string = Drupal.t('Project type', {}, { context: 'District and project search form label' });
 
   return (
-    <form onSubmit={handleSubmit}>
+    <form onSubmit={handleSubmit} role='search'>
       <div className="district-project-search-form__filters-container">
         <div className="district-project-search-form__filters">
           <TextInput
@@ -73,6 +73,7 @@ const FormContainer = () => {
             placeholder={Drupal.t('For example, Pasila', {}, { context: 'District and project search form label' })}
             onChange={handleTitleChange}
             value={title}
+            type='search'
           />
           <Combobox
             multiselect

diff --git a/src/js/react/apps/health-station-search/containers/FormContainer.tsx b/src/js/react/apps/health-station-search/containers/FormContainer.tsx
@@ -28,7 +28,7 @@ const ProximityFormContainer = () => {
   };
 
   return (
-    <form className='hdbt-search--react__form-container' onSubmit={onSubmit}>
+    <form className='hdbt-search--react__form-container' role='search' onSubmit={onSubmit}>
       <TextInput
         className='hdbt-search__filter hdbt-search--react__text-field'
         helperText={Drupal.t('Enter the street name and house number', {}, { context: 'React search: street input helper'})}

diff --git a/src/js/react/apps/job-search/containers/FormContainer.tsx b/src/js/react/apps/job-search/containers/FormContainer.tsx
@@ -107,12 +107,13 @@ const FormContainer = () => {
   const languageLabel: string = Drupal.t('Language', {}, { context: 'Language filter label' });
 
   return (
-    <form className='job-search-form' onSubmit={handleSubmit} action={formAction}>
+    <form className='job-search-form' role='search' onSubmit={handleSubmit} action={formAction}>
       <TextInput
         className='job-search-form__filter'
         id={SearchComponents.KEYWORD}
         label={Drupal.t('Search term', {}, { context: 'Search keyword label' })}
         name={SearchComponents.KEYWORD}
+        type='search'
         onChange={handleKeywordChange}
         value={keyword}
         placeholder={Drupal.t(

diff --git a/src/js/react/apps/linkedevents/containers/FormContainer.tsx b/src/js/react/apps/linkedevents/containers/FormContainer.tsx
@@ -50,7 +50,7 @@ function FormContainer() {
   }
 
   return (
-    <form className='hdbt-search--react__form-container' onSubmit={handleSubmit}>
+    <form className='hdbt-search--react__form-container' role='search' onSubmit={handleSubmit}>
       <HeadingTag className='event-list__filter-title'>{Drupal.t('Filter events', {}, { context: 'Event search: search form title' })}</HeadingTag>
       <div className='event-form__filters-container'>
         <div className='event-form__filter-section-container'>

diff --git a/src/js/react/apps/maternity-and-child-health-clinic-search/containers/FormContainer.tsx b/src/js/react/apps/maternity-and-child-health-clinic-search/containers/FormContainer.tsx
@@ -28,7 +28,7 @@ const ProximityFormContainer = () => {
   };
 
   return (
-    <form className='hdbt-search--react__form-container' onSubmit={onSubmit}>
+    <form className='hdbt-search--react__form-container' role='search' onSubmit={onSubmit}>
       <TextInput
         className='hdbt-search__filter hdbt-search--react__text-field'
         helperText={Drupal.t('Enter the street name and house number', {}, { context: 'React search: street input helper'})}

diff --git a/src/js/react/apps/news-archive/containers/FormContainer.tsx b/src/js/react/apps/news-archive/containers/FormContainer.tsx
@@ -74,7 +74,7 @@ const FormContainer = () => {
   return (
     <div className='news-form-wrapper'>
       <div className='news-form-container'>
-        <form className='news-form' onSubmit={onSubmit}>
+        <form className='news-form' role='search' onSubmit={onSubmit}>
           <h2>{Drupal.t('Filter news items', {}, {context: 'News archive filter results heading'})}</h2>
           <div className='news-form__filters-container'>
             {topicOptions && <Filter

diff --git a/src/js/react/apps/ploughing-schedule/containers/FormContainer.tsx b/src/js/react/apps/ploughing-schedule/containers/FormContainer.tsx
@@ -48,7 +48,7 @@ const FormContainer = () => {
   });
 
   return (
-    <form className='hdbt-search--react__form-container' onSubmit={onSubmit}>
+    <form className='hdbt-search--react__form-container' role='search' onSubmit={onSubmit}>
       <h2 className='hdbt-search--react__form-title'>
         {Drupal.t('See the ploughing schedule', {}, {context: 'Ploughing schedule: Form title / submit'})}
       </h2>

diff --git a/src/js/react/apps/school-search/containers/FeatureFormContainer.tsx b/src/js/react/apps/school-search/containers/FeatureFormContainer.tsx
@@ -87,7 +87,7 @@ const FeatureFormContainer = () => {
   const bilingualEducationLabel: string = Drupal.t('Bilingual education', {}, { context: 'TPR Ontologyword details schools' });
 
   return (
-    <form className='hdbt-search--react__form-container' onSubmit={onSubmit}>
+    <form className='hdbt-search--react__form-container' role='search' onSubmit={onSubmit}>
       <h3>
         {Drupal.t('Search with school details', {}, {context: 'School search: Feature form title'})}
       </h3>

diff --git a/src/js/react/apps/school-search/containers/ProximityFormContainer.tsx b/src/js/react/apps/school-search/containers/ProximityFormContainer.tsx
@@ -24,7 +24,7 @@ const ProximityFormContainer = () => {
   };
 
   return (
-    <form className='hdbt-search--react__form-container' onSubmit={onSubmit}>
+    <form className='hdbt-search--react__form-container' role='search' onSubmit={onSubmit}>
       <h3>
         {Drupal.t('Search for your local school', {}, {context: 'School search: local search title'})}
       </h3>

diff --git a/src/scss/06_components/paragraphs/_unit-search.scss b/src/scss/06_components/paragraphs/_unit-search.scss
@@ -54,19 +54,9 @@
       white-space: normal;
     }
 
-    .hds-text-input__input-wrapper {
-      &::after {
-        @include pseudo-icon('search', 20px, $color-black, block);
-        position: absolute;
-        right: $spacing;
-        top: 50%;
-        transform: translateY(-50%);
-      }
-
-      .hds-text-input__input {
-        border-radius: 0;
-        padding-right: $spacing-triple;
-      }
+    .hds-text-input__input-wrapper .hds-text-input__input {
+      border-radius: 0;
+      padding-right: $spacing-triple;
     }
 
     [data-drupal-selector='edit-provided-languages-value'] {

diff --git a/templates/form/form--unit-search.html.twig b/templates/form/form--unit-search.html.twig
@@ -0,0 +1,15 @@
+{#
+/**
+ * @file
+ * Theme override for a 'form' element.
+ *
+ * Available variables
+ * - attributes: A list of HTML attributes for the wrapper element.
+ * - children: The child elements of the form.
+ *
+ * @see template_preprocess_form()
+ */
+#}
+<form{{ attributes.setAttribute('role', 'search') }}>
+  {{ children }}
+</form>
diff --git a/templates/form/text-input/input--textfield--unit-search.html.twig b/templates/form/text-input/input--textfield--unit-search.html.twig
@@ -0,0 +1,19 @@
+{#
+/**
+ * @file
+ * Theme override for an 'input' #type form element.
+ *
+ * Available variables:
+ * - attributes: A list of HTML attributes for the input element.
+ * - children: Optional additional rendered elements.
+ *
+ * @see template_preprocess_input()
+ * @see claro_preprocess_input()
+ */
+#}
+{% apply spaceless %}
+  <div class="hds-text-input__input-wrapper">
+    <input {{ attributes.setAttribute('type', 'search').addClass('hds-text-input__input') }} />
+  </div>
+  {{ children }}
+{% endapply %}