Reapply "Fixed page header structure and used semantic HTML."

This reverts commit f1fca5e.

Author: bmispelon

blog/views.py

@@ -12,6 +12,7 @@
 class BlogViewMixin:
     date_field = "pub_date"
     paginate_by = 10
+    banner_is_title = True
 
     def get_allow_future(self):
         return self.request.user.is_staff
@@ -28,6 +29,7 @@ def get_context_data(self, **kwargs):
         events_queryset = Event.objects.future().published()
 
         context["events"] = events_queryset[:3]
+        context["banner_is_title"] = self.banner_is_title
 
         return context
 
@@ -49,4 +51,4 @@ class BlogDayArchiveView(BlogViewMixin, DayArchiveView):
 
 
 class BlogDateDetailView(BlogViewMixin, DateDetailView):
-    pass
+    banner_is_title = False

dashboard/templates/base_dashboard.html

@@ -6,6 +6,5 @@
 {% block title %}{% translate 'Development dashboard' %}{% endblock %}
 {% block layout_class %}full-width{% endblock %}
 {% block header %}
-  <h1 class="visuallyhidden">Development dashboard</h1>
-  <p>Development <em>dashboard</em></p>
+  <h1>Development <em>dashboard</em></h1>
 {% endblock %}

djangoproject/scss/_dark-mode.scss

@@ -149,7 +149,7 @@ html[data-theme="light"],
         }
     }
 
-    body [role="contentinfo"] {
+    body footer {
         background: darken($green, 10%);
     }
 
@@ -256,7 +256,7 @@ html[data-theme="dark"] {
         }
     }
 
-    [role="contentinfo"] {
+    footer {
         background: darken($green, 10%);
     }
 }
@@ -352,7 +352,7 @@ html[data-theme="light"] .theme-toggle .theme-label-when-light {
     }
 }
 
-[role="banner"] [role="navigation"] li:last-child {
+header nav li:last-child {
     @include respond-max(768px) {
         display: none;
     }

djangoproject/scss/_dashboard.scss

@@ -1,5 +1,5 @@
 #dashboard {
-    .full-width [role="main"] {
+    .full-width main {
         margin: 0 auto;
         text-align: center;
     }

djangoproject/scss/_print.scss

@@ -62,11 +62,11 @@
     .news-search,
     .backtotop,
     .nav-pagination,
-    [role="contentinfo"]>.container,
-    [role="contentinfo"] .logo,
+    footer>.container,
+    footer .logo,
     .thanks,
     [role="complementary"],
-    [role="navigation"],
+    nav,
     .form-input {
         display: none !important;
     }
@@ -75,8 +75,8 @@
         text-indent: 0 !important;
     }
 
-    [role="contentinfo"],
-    [role="contentinfo"] .copyright {
+    footer,
+    footer .copyright {
         margin: 0 !important;
         padding: 0 !important;
     }

djangoproject/scss/_style.scss

@@ -122,7 +122,7 @@ h1 {
         color: var(--body-fg);
     }
 
-    [role="main"] & {
+    main & {
         @include font-size(32);
         margin: 40px 0px 30px;
         color: var(--body-fg);
@@ -159,7 +159,7 @@ h2 {
         }
     }
 
-    [role="main"] & {
+    main & {
         margin-top: 40px;
         margin-bottom: 15px;
     }
@@ -174,20 +174,24 @@ h3 {
 
     [role="complementary"] &,
     .layout-secondary & {
-        @include font-size(18);
+        @include font-size(20);
+        border-bottom: 1px solid var(--hairline-color);
         font-weight: 400;
         padding-bottom: 15px;
+        margin-top: 30px;
+
+        &:first-of-type {
+            margin-top: inherit;
+        }
 
         &:first-child {
             @include respond-min(768px) {
-                margin-top: 12px;
+                margin-top: 20px;
             }
         }
-    }
-
-    [role="complementary"] & {
-        @include font-size(18);
-        border-bottom: 1px solid var(--hairline-color);
+        .full-width & {
+            @include font-size(24);
+        }
     }
 }
 
@@ -236,7 +240,7 @@ a:focus {
 p {
 
     //increase top margin if first item in container
-    [role="main"]>&:first-child {
+    main>&:first-child {
         margin-top: 30px;
     }
 }
@@ -274,7 +278,7 @@ blockquote {
 //------------------- Layout
 
 
-[role="main"] {
+main {
     //Main column. Left aligned by default. See /styleguide for explanation.
     background: var(--white-color);
     padding: 1px 10px 40px;
@@ -447,7 +451,7 @@ blockquote {
 
 //-------------------  Site Chrome (Header/Footer)
 
-[role="banner"] {
+header {
     // Includes global navigation, logo, and tagline at top of document
     @include clearfix;
     background: $green-dark;
@@ -529,7 +533,7 @@ blockquote {
         }
     }
 
-    [role="navigation"] {
+    nav {
         width: 100%;
         background: $green-dark;
         transition: max-height 0.3s ease-out;
@@ -584,6 +588,10 @@ blockquote {
             display: block;
             text-decoration: none;
 
+            &:visited {
+              color: var(--menu);
+            }
+
             &:active,
             &:hover {
                 color: var(--secondary-accent);
@@ -697,6 +705,7 @@ blockquote {
         line-height: 1.3;
         padding: 1px 0 6px;
         margin: .45em 0 .35em;
+        letter-spacing: -1px;
 
         em {
             font-style: normal;
@@ -715,6 +724,7 @@ blockquote {
         a {
             font-weight: 300;
             color: var(--secondary-accent);
+            text-decoration: none;
         }
 
         a.cta,
@@ -864,7 +874,7 @@ blockquote {
 
 }
 
-[role="contentinfo"] {
+footer {
     // Global Footer at bottom of page
     @include clearfix;
     @include sans-serif;
@@ -912,7 +922,7 @@ blockquote {
 
     }
 
-    h2 {
+    h3 {
         @include font-size(16);
         border-top: 1px solid var(--hairline-color);
         color: var(--menu);
@@ -942,10 +952,15 @@ blockquote {
             color: var(--menu);
             text-decoration: none;
 
+            &:visited {
+              color: var(--menu);
+            }
+
             &:hover,
             &:active,
             &:focus {
                 text-decoration: underline;
+                color: var(--menu);
             }
         }
     }
@@ -2558,7 +2573,7 @@ table.docutils th {
         }
     }
 
-    +h2 {
+    +h3 {
         margin-top: 34px;
     }
 }
@@ -3582,7 +3597,9 @@ ul.corporate-members li {
         border-radius: 20px;
     }
 
-    .community-cta svg, h3 {
-        color: var(--community-img-fg);
+    .community-cta {
+        svg, h3 {
+            color: var(--community-img-fg);
+        }
     }
 }

djangoproject/templates/accounts/edit_profile.html

@@ -34,9 +34,8 @@ <h1>{% translate "Edit your profile" %}</h1>
 {% endblock %}
 
 {% block content-related %}
-    <h1 class="visuallyhidden">{% translate "Additional Information" %}</h1>
     <div role="complementary">
-        <h2>{% translate "Help" %}</h2>
+        <h2 id="aside-header">{% translate "Help" %}</h2>
 
         <p>{% translate "Use this form to edit your profile." %}</p>
 

djangoproject/templates/accounts/user_profile.html

@@ -4,9 +4,8 @@
 {% block title %}{% firstof user_obj.profile.name user_obj.username %}{% endblock %}
 
 {% block content-related %}
-    <h1 class="visuallyhidden">{% translate "Additional Information" %}</h1>
     <div role="complementary">
-        <h2>
+        <h2 id="aside-header">
             {% if user_obj == user %}
                 {% translate "This is you!" %}
             {% else %}

djangoproject/templates/aggregator/index.html

@@ -4,7 +4,7 @@
 {% block layout_class %}column-container sidebar-right{% endblock %}
 
 {% block content %}
-
+  <h1>{% translate "Community" %}</h1>
   <h2 class="community-title">{% translate "Get Help" %}</h2>
   <div class="community-cta-wrapper">
     <a href="https://forum.djangoproject.com/" class="community-cta-a">

djangoproject/templates/aggregator/local-django-community.html

@@ -7,7 +7,7 @@
   {% regroup django_communities|dictsort:"continent" by continent as grouped_django_communities %}
 
 
-  <h2>{% translate "Local Django Communities" %}</h2>
+  <h1>{% translate "Local Django Communities" %}</h1>
 
   <p>{% blocktranslate trimmed %}Something missing? <a href="https://github.com/django/djangoproject.com/issues/new?assignees=&amp;labels=type%3Acommunity&amp;projects=&amp;template=community_request.md">Suggest your community{% endblocktranslate %}</a>.</p>
 

djangoproject/templates/base.html

@@ -49,11 +49,11 @@
 
     {% include "includes/header.html" %}
 
-    <div class="copy-banner">
+    <section class="copy-banner">
       <div class="container {% block header-classes %}{% endblock %}">
         {% block header %}{% endblock %}
       </div>
-    </div>
+    </section>
 
     {% comment %}
     Replace the div#billboard below with banner using the skeleton here to
@@ -72,7 +72,7 @@
     <div id="billboard">{% block billboard %}{% endblock %}</div>
 
     <div class="container {% block layout_class %}{% endblock %}">
-      <div role="main">
+      <main>
 
         {% block messages %}
           {% if messages %}
@@ -89,7 +89,7 @@
 
         {% block content %}{% endblock %}
         <a href="#top" class="backtotop"><i class="icon icon-chevron-up"></i> Back to Top</a>
-      </div>
+      </main>
 
       {% block content-related %}{% endblock %}
       {% block content-extra %}{% endblock %}

djangoproject/templates/base_2col.html

@@ -6,9 +6,9 @@
     {% endblock %}
   </div>
   <!-- END #content-main -->
-  <div id="content-related" class="sidebar">
+  <aside id="content-related" class="sidebar" aria-labelledby="aside-header">
     {% block content-related %}
     {% endblock %}
-  </div>
+  </aside>
   <!-- END #content-related -->
 {% endblock %}

djangoproject/templates/base_3col.html

@@ -6,9 +6,9 @@
       {% block content %}{% endblock %}
     </div>
     <!-- END #content-main -->
-    <div id="content-related" class="sidebar">
+    <aside id="content-related" class="sidebar" aria-labelledby="aside-header">
       {% block content-related %}{% endblock %}
-    </div>
+    </aside>
     <!-- END #content-related -->
   </div>
   <!-- END #subwrap -->

djangoproject/templates/base_community.html

@@ -8,7 +8,6 @@
 {% block title %}{% translate "Django Community" %}{% endblock %}
 
 {% block header %}
-  <h1 class="visuallyhidden">{% translate "Community" %}</h1>
   <p>
     {% if community_stats.age %}
       {% blocktranslate trimmed with age=community_stats.age %}
@@ -22,11 +21,11 @@ <h1 class="visuallyhidden">{% translate "Community" %}</h1>
 {% endblock %}
 
 {% block content-related %}
-  <h1 class="visuallyhidden">{% translate "Additional Information" %}</h1>
   <div role="complementary">
+    <h2 class="visuallyhidden" id="aside-header">{% translate "Additional Information" %}</h2>
     {% donation_snippet %}
 
-    <h2>{% translate "More Help" %}</h2>
+    <h3>{% translate "More Help" %}</h3>
     <dl class="list-links">
       <dt>
         <a href="{% url 'document-detail' lang='en' version='stable' url='faq' host 'docs' %}">
@@ -42,7 +41,7 @@ <h2>{% translate "More Help" %}</h2>
       <dd>{% translate "Chat with other Django users like it's 1999" %}</dd>
     </dl>
 
-    <h2>{% translate "Dive In" %}</h2>
+    <h3>{% translate "Dive In" %}</h3>
     <dl class="list-links">
       <dt><a href="https://code.djangoproject.com/">{% translate "Ticket System" %}</a></dt>
       <dd>{% translate "View and update bug reports" %}</dd>
@@ -52,7 +51,7 @@ <h2>{% translate "Dive In" %}</h2>
       <dd>{% translate "Get updated for each code and ticket change" %}</dd>
     </dl>
 
-    <h2>{% translate "More Links" %}</h2>
+    <h3>{% translate "More Links" %}</h3>
     <dl class="list-links">
       <dt><a href="https://www.djangopackages.com/" rel="nofollow">{% translate "Django Packages" %}</a></dt>
       <dd>{% translate "Find third-party packages to supercharge your project" %}</dd>