Beanz/searxng
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

[feat] Added skip link, improved HTML landmark usage

Browse Source 
style.less
- Added .skip-link & .sr-only

base.html
- Added skip-link
- Added optional skip_link_id block
- Added header element
- main -> div, as it's a full application container and not the main content

404.html
- div -> main

index.html
- div -> main

preferences.html
- added main

results.html
- Added skip_link_id to "results"
- Moved search.html to header block
- div#results -> main#results
- div#sidebar -> aside#sidebar
This commit is contained in:
Denperidge 2025-02-26 15:15:56 +01:00
parent e86bfa163b
commit 5ca05af8a0
6 changed files with 47 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
searx/static/themes/simple/src/less/style.less
View File

@ -1160,3 +1160,31 @@ summary.title {
pre code { pre code {
white-space: pre-wrap; white-space: pre-wrap;
} }
.sr-only {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
.skip-link {
&:focus {
left: 0;
top: 0;
width: auto;
height: auto;
z-index: 6000;
padding: 0.7rem;
background: var(--color-btn-background);
color: var(--color-btn-font);
}
&:link, &:visited, &:hover, &:active {
color: white; /* Normalise the color */
}
}

4
searx/templates/simple/404.html
View File

@ -1,9 +1,9 @@
{% extends "simple/base.html" %} {% extends "simple/base.html" %}
{% block content %} {% block content %}
<div class="center"> <main id="main" class="center">
<h1>{{ _('Page not found') }}</h1> <h1>{{ _('Page not found') }}</h1>
{% autoescape false %} {% autoescape false %}
<p>{{ _('Go to %(search_page)s.', search_page='<a href="{}">{}</a>'.format(url_for('index'), _('search page'))) }}</p> <p>{{ _('Go to %(search_page)s.', search_page='<a href="{}">{}</a>'.format(url_for('index'), _('search page'))) }}</p>
{% endautoescape %} {% endautoescape %}
</div> </main>
{% endblock %} {% endblock %}

7
searx/templates/simple/base.html
View File

@ -31,7 +31,9 @@
<link rel="apple-touch-icon" href="{{ url_for('static', filename='img/favicon.png') }}"> <link rel="apple-touch-icon" href="{{ url_for('static', filename='img/favicon.png') }}">
</head> </head>
<body class="{{ endpoint }}_endpoint" > <body class="{{ endpoint }}_endpoint" >
<main id="main_{{ self._TemplateReference__context.name|replace("simple/", "")|replace(".html", "") }}" class="{{body_class}}"> <a class="sr-only skip-link" href="#{% block skip_link_id %}main{% endblock %}">Skip to main content</a>
<div id="main_{{ self._TemplateReference__context.name|replace("simple/", "")|replace(".html", "") }}" class="{{body_class}}">
<header>
{% if errors %} {% if errors %}
<div class="dialog-error" role="alert"> <div class="dialog-error" role="alert">
<a href="#" class="close" aria-label="close" title="close">×</a> <a href="#" class="close" aria-label="close" title="close">×</a>
@ -59,9 +61,10 @@
</nav> </nav>
{% block header %} {% block header %}
{% endblock %} {% endblock %}
</header>
{% block content %} {% block content %}
{% endblock %} {% endblock %}
</main> </div>
<footer> <footer>
<p> <p>
{{ _('Powered by') }} <a href="{{ url_for('info', pagename='about') }}">searxng</a> - {{ searx_version }} — {{ _('a privacy-respecting, open metasearch engine') }}<br> {{ _('Powered by') }} <a href="{{ url_for('info', pagename='about') }}">searxng</a> - {{ searx_version }} — {{ _('a privacy-respecting, open metasearch engine') }}<br>

4
searx/templates/simple/index.html
View File

@ -1,8 +1,8 @@
{% extends "simple/base.html" %} {% extends "simple/base.html" %}
{% from 'simple/icons.html' import icon_big %} {% from 'simple/icons.html' import icon_big %}
{% block content %} {% block content %}
<div class="index"> <main id="main" class="index">
<div class="title"><h1>SearXNG</h1></div> <div class="title"><h1>SearXNG</h1></div>
{% include 'simple/simple_search.html' %} {% include 'simple/simple_search.html' %}
</div> </main>
{% endblock %} {% endblock %}

3
searx/templates/simple/preferences.html
View File

@ -152,7 +152,7 @@
{%- block linkto_preferences -%}{%- endblock -%} {%- block linkto_preferences -%}{%- endblock -%}
{%- block content -%} {%- block content -%}
<main id="main">
<h1>{{ _('Preferences') }}</h1> <h1>{{ _('Preferences') }}</h1>
<form id="search_form" method="post" action="{{ url_for('preferences') }}" autocomplete="off"> <form id="search_form" method="post" action="{{ url_for('preferences') }}" autocomplete="off">
@ -258,4 +258,5 @@
{%- include 'simple/preferences/footer.html' -%} {%- include 'simple/preferences/footer.html' -%}
</form>{{- '' -}} </form>{{- '' -}}
</main>
{%- endblock -%} {%- endblock -%}

14
searx/templates/simple/results.html
View File

@ -9,22 +9,24 @@
{%- endmacro %} {%- endmacro %}
{% block title %}{% if query_in_title %}{{- q|e }} - {% endif %}{% endblock %} {% block title %}{% if query_in_title %}{{- q|e }} - {% endif %}{% endblock %}
{% block meta %}<link rel="alternate" type="application/rss+xml" title="Searx search: {{ q|e }}" href="{{ url_for('search', _external=True) }}?q={{ q|urlencode }}&amp;categories={{ selected_categories|join(",") | replace(' ','+') }}&amp;pageno={{ pageno }}&amp;time_range={{ time_range }}&amp;language={{ current_language }}&amp;safesearch={{ safesearch }}&amp;format=rss">{% endblock %} {% block meta %}<link rel="alternate" type="application/rss+xml" title="Searx search: {{ q|e }}" href="{{ url_for('search', _external=True) }}?q={{ q|urlencode }}&amp;categories={{ selected_categories|join(",") | replace(' ','+') }}&amp;pageno={{ pageno }}&amp;time_range={{ time_range }}&amp;language={{ current_language }}&amp;safesearch={{ safesearch }}&amp;format=rss">{% endblock %}
{% block content %} {% block skip_link_id %}results{% endblock %}
{% block header %}
{% include 'simple/search.html' %} {% include 'simple/search.html' %}
{% endblock %}
{% block content %}
{% if results and results|map(attribute='template')|unique|list|count == 1 %} {% if results and results|map(attribute='template')|unique|list|count == 1 %}
{% set only_template = 'only_template_' + results[0]['template']|default('default')|replace('.html', '') %} {% set only_template = 'only_template_' + results[0]['template']|default('default')|replace('.html', '') %}
{% else %} {% else %}
{% set only_template = '' %} {% set only_template = '' %}
{% endif %} {% endif %}
<div id="results" class="{{ only_template }}"> <main id="results" class="{{ only_template }}">
{%- if answers -%} {%- if answers -%}
{%- include 'simple/elements/answers.html' -%} {%- include 'simple/elements/answers.html' -%}
{%- endif %} {%- endif %}
<div id="sidebar"> <aside id="sidebar">
{%- if number_of_results != '0' -%} {%- if number_of_results != '0' -%}
<p id="result_count"><small>{{ _('Number of results') }}: {{ number_of_results }}</small></p> <p id="result_count"><small>{{ _('Number of results') }}: {{ number_of_results }}</small></p>
@ -56,7 +58,7 @@
{%- endif -%} {%- endif -%}
<div id="sidebar-end-collapsible"></div> <div id="sidebar-end-collapsible"></div>
</div> </aside>
{%- if corrections -%} {%- if corrections -%}
{%- include 'simple/elements/corrections.html' -%} {%- include 'simple/elements/corrections.html' -%}
@ -145,5 +147,5 @@
</div> </div>
</nav> </nav>
{% endif %} {% endif %}
</div> </main>
{% endblock %} {% endblock %}