Conversation
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #2018 +/- ##
=========================================
Coverage 70.07% 70.07%
Complexity 1703 1703
=========================================
Files 34 34
Lines 4484 4484
=========================================
Hits 3142 3142
Misses 1342 1342 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
osma
left a comment
osma
left a comment
There was a problem hiding this comment.
There is a syntax error in the closing tag (you can simply apply my suggested fix), otherwise this looks OK and works fine.
This is an improvement for sure, but I don't think it covers the whole issue. I think we should still either leave the issue open or close it and open a follow-up issue about the HTML DOM order, which is still problematic for both screen reader and mobile users. I think it should be possible to change the DOM order while preserving the visual layout for sighted users (with the welcome box in the right column) if we use CSS Grid for the layout. Here is a minimal example of how it could work:
<html>
<head>
<style>
.landing-layout {
display: grid;
grid-template-columns: 1fr; /* mobile: single column */
gap: 1.5rem;
}
/* Desktop layout: 2 columns (8/4 split) */
@media (min-width: 768px) {
.landing-layout {
grid-template-columns: 2fr 1fr; /* left: 66.7%, right: 33.3% */
grid-template-areas:
"vocab welcome"
"vocab news";
}
.box-vocab {
grid-area: vocab;
}
.box-welcome {
grid-area: welcome;
}
.box-news {
grid-area: news;
}
}
</style>
<body>
<div class="container">
<div class="landing-layout">
<!-- 1. Welcome (top-right visually, first in DOM) -->
<section class="box box-welcome">
<h2>Welcome to Finto</h2>
<p>...</p>
</section>
<!-- 2. List of vocabularies (left column, second in DOM) -->
<section class="box box-vocab">
<h2>Vocabularies</h2>
<ul>...</ul>
</section>
<!-- 3. News (top-right visually, below welcome, third in DOM) -->
<section class="box box-news">
<h3>News</h3>
<ul>...</ul>
</section>
</div>
</div>
</body>
</html>
github-project-automation
Bot
moved this from Under review
to Issue/PR closed
in Skosmos 3.x Backlog
2 participants
Reasons for creating this PR
Screen reader reads hidden h1 element which has "Skosmos" in it. Also welcome text should not be visible with mobile view.
Link to relevant issue(s), if any
Description of the changes in this PR
h1 element has now long service name defined in config file. If the language version of name is missing it falls back to shorter name in config file, which does not have language version. If shorter name is missing, it falls back to "Skosmos".
Custom template for landing-end has been modified with Bootstrap calls to hide the welcome text from mobile view.
Known problems or uncertainties in this PR
According to Hahmo layout, Finto front page should have mobile navigation bar which opens a page with welcome text in it. This navigation bar is not implement yet.
Checklist
.sr-onlyclass, color contrast)