kimendisch/sbgg.jetzt
kimendisch
/
sbgg.jetzt
1
3
Fork 1
Code Issues 6 Pull Requests Projects Activity

♿ make sure all buttons are focusable/clickable (fix #55)

This commit is contained in:
DrMaxNix 2024-02-08 13:36:30 +01:00
parent 9c401fa99f
commit faeedc0c1e
2 changed files with 28 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
page/start/index.php
View File

@ -80,7 +80,7 @@
<div class="section">
<div id="why" class="content">
<div class="box">
<span class="title"><span class="copylink ti ti-link"></span><?= $dict->get("why_title") ?></span>
<span class="title"><button class="copylink ti ti-link"></button><?= $dict->get("why_title") ?></span>
<?php
$why_text = $dict->get("why_text");
@ -96,7 +96,7 @@
<div class="header">
<span class="icon ti ti-clock"></span>
<span class="text"><?= $dict->get("timeline_title") ?></span>
<span class="copylink ti ti-link"></span>
<button class="copylink ti ti-link"></button>
</div>
<div class="content">
<div class="timeline">
@ -112,7 +112,7 @@
<span class="extra"><i class="ti ti-calendar"></i><?= $timeline_date ?></span>
<?php } ?>
<span class="title"><span class="copylink ti ti-link"></span><?= $dict->get("timeline_koalitionsvertrag_title") ?></span>
<span class="title"><button class="copylink ti ti-link"></button><?= $dict->get("timeline_koalitionsvertrag_title") ?></span>
<?php
$timeline_koalitionsvertrag_text = $dict->get("timeline_koalitionsvertrag_text");
@ -142,7 +142,7 @@
<span class="extra"><i class="ti ti-calendar"></i><?= $timeline_date ?></span>
<?php } ?>
<span class="title"><span class="copylink ti ti-link"></span><?= $dict->get("timeline_eckpunktepapier_title") ?></span>
<span class="title"><button class="copylink ti ti-link"></button><?= $dict->get("timeline_eckpunktepapier_title") ?></span>
<?php
$timeline_eckpunktepapier_text = $dict->get("timeline_eckpunktepapier_text");
@ -172,7 +172,7 @@
<span class="extra"><i class="ti ti-calendar"></i><?= $timeline_date ?></span>
<?php } ?>
<span class="title"><span class="copylink ti ti-link"></span><?= $dict->get("timeline_referentenentwurf_title") ?></span>
<span class="title"><button class="copylink ti ti-link"></button><?= $dict->get("timeline_referentenentwurf_title") ?></span>
<?php
$timeline_referentenentwurf_text = $dict->get("timeline_referentenentwurf_text");
@ -206,7 +206,7 @@
<span class="extra"><i class="ti ti-calendar"></i><?= $timeline_date ?></span>
<?php } ?>
<span class="title"><span class="copylink ti ti-link"></span><?= $dict->get("timeline_regierungsentwurf_title") ?></span>
<span class="title"><button class="copylink ti ti-link"></button><?= $dict->get("timeline_regierungsentwurf_title") ?></span>
<?php
$timeline_regierungsentwurf_text = $dict->get("timeline_regierungsentwurf_text");
@ -236,7 +236,7 @@
<span class="extra"><i class="ti ti-calendar"></i><?= $timeline_date ?></span>
<?php } ?>
<span class="title"><span class="copylink ti ti-link"></span><?= $dict->get("timeline_bundesrat_title") ?></span>
<span class="title"><button class="copylink ti ti-link"></button><?= $dict->get("timeline_bundesrat_title") ?></span>
<?php
$timeline_bundesrat_text = $dict->get("timeline_bundesrat_text");
@ -270,7 +270,7 @@
<span class="extra"><i class="ti ti-calendar"></i><?= $timeline_date ?></span>
<?php } ?>
<span class="title"><span class="copylink ti ti-link"></span><?= $dict->get("timeline_lesung_1_title") ?></span>
<span class="title"><button class="copylink ti ti-link"></button><?= $dict->get("timeline_lesung_1_title") ?></span>
<?php
$timeline_lesung_1_text = $dict->get("timeline_lesung_1_text");
@ -300,7 +300,7 @@
<span class="extra"><i class="ti ti-calendar"></i><?= $timeline_date ?></span>
<?php } ?>
<span class="title"><span class="copylink ti ti-link"></span><?= $dict->get("timeline_ausschuss_anhoerung_title") ?></span>
<span class="title"><button class="copylink ti ti-link"></button><?= $dict->get("timeline_ausschuss_anhoerung_title") ?></span>
<?php
$timeline_ausschuss_anhoerung_text = $dict->get("timeline_ausschuss_anhoerung_text");
@ -330,7 +330,7 @@
<span class="extra"><i class="ti ti-calendar"></i><?= $timeline_date ?></span>
<?php } ?>
<span class="title"><span class="copylink ti ti-link"></span><?= $dict->get("timeline_lesung_2_title") ?></span>
<span class="title"><button class="copylink ti ti-link"></button><?= $dict->get("timeline_lesung_2_title") ?></span>
<?php
$timeline_lesung_2_text = $dict->get("timeline_lesung_2_text");
@ -353,7 +353,7 @@
<span class="extra"><i class="ti ti-calendar"></i><?= $timeline_date ?></span>
<?php } ?>
<span class="title"><span class="copylink ti ti-link"></span><?= $dict->get("timeline_lesung_3_title") ?></span>
<span class="title"><button class="copylink ti ti-link"></button><?= $dict->get("timeline_lesung_3_title") ?></span>
<?php
$timeline_lesung_3_text = $dict->get("timeline_lesung_3_text");
@ -376,7 +376,7 @@
<span class="extra"><i class="ti ti-calendar"></i><?= $timeline_date ?></span>
<?php } ?>
<span class="title"><span class="copylink ti ti-link"></span><?= $dict->get("timeline_inkrafttreten_title") ?></span>
<span class="title"><button class="copylink ti ti-link"></button><?= $dict->get("timeline_inkrafttreten_title") ?></span>
<?php
$timeline_inkrafttreten_text = $dict->get("timeline_inkrafttreten_text");
@ -394,11 +394,11 @@
<div class="header">
<span class="icon ti ti-bell"></span>
<span class="text"><?= $dict->get("news_title") ?></span>
<span class="copylink ti ti-link"></span>
<button class="copylink ti ti-link"></button>
</div>
<div class="content rows">
<div id="newsletter" class="box">
<span class="title"><span class="copylink ti ti-link"></span><?= $dict->get("news_newsletter_title") ?></span>
<span class="title"><button class="copylink ti ti-link"></button><?= $dict->get("news_newsletter_title") ?></span>
<div id="newsletter-signup-form-container">
<div id="newsletter-signup-form">
@ -420,18 +420,18 @@
<div class="value-list">
<div id="newsletter-signup-form-language" class="value switch" data-selected="<?= $lang->get() ?>">
<?php foreach(["de", "en"] as $one_lang){ ?>
<div class="option" data-value="<?= $one_lang ?>">
<button class="option" data-value="<?= $one_lang ?>">
<span class="text"><?= strtoupper($one_lang) ?></span>
</div>
</button>
<?php } ?>
</div>
</div>
</div>
<div id="newsletter-signup-form-submit" class="button primary">
<button id="newsletter-signup-form-submit" class="button primary">
<span class="text"><?= $dict->get("news_newsletter_subscribe") ?></span>
<span class="icon ti ti-chevron-right"></span>
</div>
</button>
</div>
<div id="newsletter-signup-form-feedback" class="gone">
@ -454,7 +454,7 @@
</div>
<div id="social-media" class="box">
<span class="title"><span class="copylink ti ti-link"></span><?= $dict->get("news_social_media_title") ?></span>
<span class="title"><button class="copylink ti ti-link"></button><?= $dict->get("news_social_media_title") ?></span>
<div class="button-list">
<a href="https://www.instagram.com/sbgg.jetzt" target="_blank" class="button">
@ -474,7 +474,7 @@
<div class="header">
<span class="icon ti ti-heart"></span>
<span class="text"><?= $dict->get("about_title") ?></span>
<span class="copylink ti ti-link"></span>
<button class="copylink ti ti-link"></button>
</div>
<div class="content">
<div class="box">

9
page/start/style.css
View File

@ -84,6 +84,12 @@ span {
a {
text-decoration: none;
}
button {
all: unset;
}
button:focus {
outline: revert;
}
.link {
color: var(--theme);
}
@ -535,6 +541,7 @@ span.inline {
position: absolute;
padding: 0.5rem;
font-size: 1rem;
color: #0000;
}
.title .copylink {
@ -548,7 +555,7 @@ span.inline {
*:hover > .copylink {
color: var(--color-gray);
}
.copylink:hover {
.copylink:hover, .copylink:focus-visible {
color: var(--color-white);
cursor: pointer;
}