Adjust aria roles and labels for collection search

CHANGES.rst

@@ -7,6 +7,8 @@ Breaking Change:
 
 - Add idx parameter to display_modifier call, so that we can use the index name to resolve the correct translated taxonomy titles in collective.taxonomy. This means that the display_modifier method in the groupby_modifier adapters needs to expect this parameter too!
   [MrTango]
+- Added aria-markup to the search input
+  [nngu6036 and JeffersonBledsoe]
 
 
 3.5.1 (2021-05-26)

src/collective/collectionfilter/portlets/collectionsearch.pt

@@ -3,17 +3,16 @@
       tal:condition="view/available"
        i18n:domain="plone">
 
-  <header class="portletHeader" tal:condition="view/title" tal:content="view/title">Title</header>
+  <header class="portletHeader" tal:condition="view/title" tal:content="view/title" id="${string:${view/filterClassName}}">Title</header>
   <div class="searchContent">
-    <form method="get" name="searchForm" role="form" action="${view/action_url}">
+    <form method="get" name="searchForm" role="search" action="${view/action_url}">
         <tal:urlquery repeat="item python:view.urlquery">
           <input type="hidden" name="${python:item[0]}" value="${python:item[1]}"/>
         </tal:urlquery>
-        <input name="SearchableText" type="text"
-            placeholder="Search"
+        <input name="SearchableText" type="search"
+            aria-labelledby="${string:${view/filterClassName}}"
             data-url="${view/ajax_url}"
-            value="${view/value}"
-            i18n:attributes="placeholder text_search"/>
+            value="${view/value}"/>
         <button type="submit" i18n:translate="button_search">Search</button>
     </form>
   </div>

src/collective/collectionfilter/tests/robot/keywords.robot

@@ -540,6 +540,8 @@ Add search tile
     Edit Current Tile
     run keyword if  $collection_name  set relateditem  formfield-collective-collectionfilter-tiles-search-target_collection  ${collection_name}
     # Run Keyword by label  Content Selector  Input Text  .contentlisting-tile
+    Wait until element is visible  css=input#collective-collectionfilter-tiles-search-header
+    Input text  css=input#collective-collectionfilter-tiles-search-header  Searchable Text
     Click element  css=.pattern-modal-buttons #buttons-save
 
 

src/collective/collectionfilter/tests/robot/test_filterportlets.robot

@@ -123,4 +123,12 @@ Scenario: Search filter
     # Then should be 2 collection results
     #   and should be 4 filter options
 
+Scenario: I can access search through ARIA
 
+  Given I've got a site with a collection
+    and my collection has a collection search
+    and I'm viewing the collection
+
+  Wait Until Element Is Visible  xpath=//input[@aria-labelledby='filterSearchable-text']
+  Click element  xpath=//input[@aria-labelledby='filterSearchable-text']
+  Element should be focused  xpath=//input[@aria-labelledby='filterSearchable-text']

src/collective/collectionfilter/tiles/search.pt

@@ -20,17 +20,16 @@
       class="pat-plone-modal edit-link"><span class="fa fa-pencil"/><label i18n:translate="label-edit-filter">edit</label></a>
 
   <tal:if condition="view/collection|nothing">
-  <header tal:condition="view/title" tal:content="view/title">Title</header>
+  <header tal:condition="view/title" tal:content="view/title" id="${string:${view/filterClassName}}">Title</header>
   <div class="searchContent">
-    <form method="get" name="searchForm" role="form" action="${view/action_url}">
+    <form method="get" name="searchForm" role="search" action="${view/action_url}">
         <tal:urlquery repeat="item view/urlquery">
           <input type="hidden" name="${python:item[0]}" value="${python:item[1]}"/>
         </tal:urlquery>
-        <input name="SearchableText" type="text"
-            placeholder="Search"
+        <input name="SearchableText" type="search"
+            aria-labelledby="${string:${view/filterClassName}}"
             data-url="${view/ajax_url}"
-            value="${view/value}"
-            i18n:attributes="placeholder text_search"/>
+            value="${view/value}"/>
         <button type="submit" i18n:translate="button_search">Search</button>
     </form>
   </div>