Replace site-search BEM classes with semantic header form[role="search"] selectors

CSS: .site-search → header form[role="search"],
     .site-search__icon → header form[role="search"] svg,
     .site-search__input → header form[role="search"] input,
     .site-search__input::placeholder → header form[role="search"] input::placeholder

HTML: Removed class="site-search", class="site-search__icon", and
class="site-search__input" from header.php and search-bar.php.
The form already uses role="search" and contains a single svg + input,
so the semantic selectors are unambiguous.
This commit is contained in:
Pontoporeia
2026-04-01 12:40:52 +02:00
parent 92a07d0b99
commit a5ee9b162f
4 changed files with 12 additions and 14 deletions

View File

@@ -56,17 +56,16 @@ $_thesisId = $_GET['id'] ?? null;
// Search bar — public section only
$searchBarValue = $searchBarValue ?? $_GET['query'] ?? '';
?>
<form class="site-search" method="GET" action="/search.php"
<form method="GET" action="/search.php"
role="search" aria-label="Recherche">
<label for="site-search-input" class="sr-only">Recherche</label>
<svg class="site-search__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
aria-hidden="true" focusable="false">
<circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
</svg>
<input
id="site-search-input"
class="site-search__input"
type="text"
name="query"
placeholder="Recherche..."

View File

@@ -3,17 +3,16 @@
// $searchValue: current search query (optional)
$_sbValue = $searchBarValue ?? $_GET['query'] ?? '';
?>
<form class="site-search" method="GET" action="/search.php"
<form method="GET" action="/search.php"
role="search" aria-label="Recherche">
<label for="site-search-input" class="sr-only">Recherche</label>
<svg class="site-search__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
aria-hidden="true" focusable="false">
<circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
</svg>
<input
id="site-search-input"
class="site-search__input"
type="text"
name="query"
placeholder="Recherche..."