Added documentation type filtering to search. #1935
Conversation
sarahboyce
force-pushed
the
doc-type-filtering
branch
5 times, most recently
from
17aba69 to
8febaf6
Compare
sarahboyce
changed the title
sarahboyce
force-pushed
the
doc-type-filtering
branch
3 times, most recently
from
567f65a to
581467e
Compare
There was a problem hiding this comment.
I like the idea, but I would try to centralize the list of type in a single dictionary (in search.py) to pass to the template to dynamically build the list of tabs. I would also move the search logic into the manager method by introducing a new search attribute so as to keep all the logic in one place.
| @@ -32,6 +32,13 @@ <h2>{% trans "No search query given" %}</h2> | |||
|
|
|||
| {% if query %} | |||
| <div id="docs-content"> | |||
| <div role="list" class="tabs"> | |||
There was a problem hiding this comment.
I would use the dict of types to dynamically build the list of tabs.
From accessibility point of view, do you think can we use a better semantic HTML tags? I don't know if <nav> can be a better choice, I'm not an a11y expert, but maybe we can ask for help to our @django/accessibility team. It would be great to start moving the website from an old list of <div> or <span> to a more modern semantic website.
There was a problem hiding this comment.
I have updated to use <nav> and removed the naming of "tabs" (these aren't real tabs just look a little bit like them). Would love the accessibility team to check this 💯
There was a problem hiding this comment.
Yes, since we're changing the UX a review from a11y point-of-view would be great.
sarahboyce
force-pushed
the
doc-type-filtering
branch
4 times, most recently
from
33f19bc to
267865d
Compare
| @@ -11,6 +11,12 @@ | |||
|
|
|||
| {% block body %} | |||
| {% if query %} | |||
| <nav class="filters" aria-label="{% trans 'Filter results by document type' %}"> | |||
There was a problem hiding this comment.
I have chosen to move this above the number of results title as this is "nicer" for when there are 0 results
e.g.
There was a problem hiding this comment.
Make sense to me. How it looks when there are 0 results in a "tab" ?
There was a problem hiding this comment.
Now that I see the screenshot I have a suggestion to improve the message.
In case the search returns 0 results, I would not repeat the name of the section, which is written just above, but rather I would invite repeating the search in all the documentation with a link to perform it directly.
Something like:
<p>0 results for <em>potato</em> in version 5.1</p>
<p>Please try again in <a hrfe="<URL>">all documentation</a>.</p>
There was a problem hiding this comment.
I like this idea and will push a tweak tomorrow.
My current design doesn't work well with translations but this will work much better 👍
| @@ -11,6 +11,12 @@ | |||
|
|
|||
| {% block body %} | |||
| {% if query %} | |||
| <nav class="filters" aria-label="{% trans 'Filter results by document type' %}"> | |||
There was a problem hiding this comment.
Make sense to me. How it looks when there are 0 results in a "tab" ?
sarahboyce
force-pushed
the
doc-type-filtering
branch
from
267865d to
e48a2f3
Compare
In order to make it easier to refine the search results for the type of information you want, added a filter by docs categories. There are more categories (e.g. "Internals") but I think it is better to only include the most likely categories
This slightly relates to #1628
Mobile view
Desktop view