[Aurora Views] - Search route

[sneridagh]

Important

If you are not a member of the Volto Team or Developers Team in the Plone GitHub organization, then do not work on or comment on this issue.

A route that provides the same features than:

https://github.com/plone/volto/blob/main/packages/volto/src/components/theme/Search/Search.jsx

Link to the parent PLIP

#70

[github-actions]

Hi There! 👋

We haven't seen any activity on this issue in a while 😴, and we want to make sure that it's still relevant.

If updating to the latest version of Volto doesn't help, please let us know by:

• adding a comment about what needs to be done next 💬
• updating its status and other labels 🏷️

Otherwise close this issue. 🧹

[Wagner3UB]

Landmark analysis:

Color legend:

1. Yellow → Site landmarks, not directly related to the search page
2. Red → Search page elements to be worked on
3. Orange → Main content of the page – must be present / mandatory
4. Green → Section or container with the page results
5. Pink/Violet → Single list result items

Search page structure:

Search page Landmarks

Important points:

Those are the default tags/elements with landmarks set by default. These tags/elements should be respected and not replaced with custom elements whenever possible. If a custom element is used, the appropriate role must be assigned:

<form role="search"> → For the search area (search field and button).
<main> or role="main" → For the main content of the page (where the results appear).
<nav> or role="navigation" → If there is pagination or navigable filters.

Problems with the current search page:

• There are too many landmarks, unnecessary ones.
• Individual items cannot be landmarks by themselves.
• The section/container (green area) is not a landmark.

News:

A new tag element called has been released and is used to create search areas.
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/search

(Volto 18.5)

[Wagner3UB]

A11Y Info for the Search Page:

1. Announcing the number of results is a bit tricky. If the page changes completely (e.g., home → search results), announcing the number of results is not mandatory. On the other hand, if the page is dynamic (search → search), you need to announce the number of results.
   In Volto 18, we use the same search bar in the top menu to run searches, and both behaviors can occur. My suggestion is to announce the number of results for both types of search. This number should be managed using aria-live="polite" and aria-controls.

2. Regarding the number of results, placing it inside a

   is incorrect for accessibility. If it is necessary for the visual layout, it should be hidden from screen readers. Ideally, use a proper text element with the appropriate properties.

3. A single search result currently has two links pointing to the same URL: the title and the “Read more…” link. This is not recommended. My suggestion is to use aria-hidden="true" on the “Read more…” link so that screen readers ignore it. A standalone “Read more” link does not provide meaningful information to users.

4. The filters bar does not receive a visual keyboard focus, even if works.

[Wagner3UB]

@plone/volto-team
I would like to propose an improvement to the search page. I believe it is necessary add a new form, in page, that allows users to refine or modify the search they just performed. As the page is currently designed, the user must return to the main menu to start a new search, without the option to simply cancel or adjust the previous one.

There is a similar implementation developed by RedTurtle for our clients, which can be tested and used as a possible model using live search as well (Volto 16): https://v3.io-comune.redturtle.it/search

[pnicolli]

Basic search page implementation is now merged in the Seven branch. Still needs the accessibility features described above and pagination (which is still to be merged but already done in plone/volto#6757