Clean up announcement banner implementation (#6408)

Better aligns the banner with docs.flutter.dev and also places the "skip to main content" button before the banner in the tab order for improved accessibility. Contributes to #6406
dart-lang · Feb 12, 2025 · e7a0e65 · e7a0e65
1 parent bf35e18
commit e7a0e65
Show file tree

Hide file tree

Showing 7 changed files with 38 additions and 30 deletions.
diff --git a/src/_data/site.yml b/src/_data/site.yml
@@ -33,7 +33,7 @@ yt:
   watch: 'https://www.youtube.com/watch'
   playlist: 'https://www.youtube.com/playlist?list='
 
-show_banner: false
+showBanner: false
 
 # Increment this global og:image URL version number (used as a query parameter)
 # when you update any og:image file. (Also increment the corresponding number

diff --git a/src/_includes/banner.html b/src/_includes/banner.html
@@ -1,7 +1,2 @@
-<div class="banner">
-  <p>
-    Dart 3.6 is here! Read the
-    <a href="https://medium.com/dartlang/announcing-dart-3-6-778dd7a80983" target="_blank">blog post</a>
-    to learn about new features in pub and the language.
-  </p>
-</div>
+Dart 3.6 is here!
+<a href="https://medium.com/dartlang/announcing-dart-3-6-778dd7a80983" target="_blank">Learn more</a>
diff --git a/src/_includes/page-header.html b/src/_includes/page-header.html
@@ -1,4 +1,8 @@
-{% if site.show_banner -%} {% render 'banner.html' %} {%- endif -%}
+{%- if site.showBanner and showBanner != false -%}
+<div id="site-banner" role="alert">
+  <p>{% render 'banner.html' %}</p>
+</div>
+{% endif -%}
 <header id="page-header" class="site-header">
   {% include 'navigation-main.html' %}
   {% if obsolete -%}

diff --git a/src/_layouts/default.html b/src/_layouts/default.html
@@ -7,8 +7,8 @@
       {% assign toc = false %}
     {% endif -%}
   {% endif -%}
-  <body class="{{layout}}{% if toc %}{% if toc == false %} hide_toc{% endif %}{% endif %}{% if obsolete %}{% if obsolete == true %} obsolete{% endif %}{% endif %}{% if site.show_banner == true %} show_banner{% endif %}{% if body_class %} {{ body_class }}{% endif %}">
-    <a id="skip" href="#site-content-title">Skip to main content</a>
+  <body class="{{layout}}{% if toc %}{% if toc == false %} hide_toc{% endif %}{% endif %}{% if obsolete %}{% if obsolete == true %} obsolete{% endif %}{% endif %}{% if body_class %} {{ body_class }}{% endif %}">
+    <a id="skip" href="#site-content-title" tabindex="1">Skip to main content</a>
     {% render 'cookie-notice.html' %}
     {% render 'gtags.html' %}
     {% include 'page-header.html', obsolete:obsolete %}

diff --git a/src/_sass/components/_banner.scss b/src/_sass/components/_banner.scss
@@ -1,28 +1,37 @@
+@use 'sass:color';
+
 @use '../core/variables' as *;
 
-.banner {
-  position: relative;
-  background-color: $dash-callout;
-  padding: 12px 0;
+#site-banner {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  font-family: $site-font-family-alt;
+  font-size: 1rem;
+
+  gap: 0.5rem;
+  padding: 0.75rem;
   text-align: center;
-  z-index: 500;
+  background-color: $dash-callout;
+  color: $site-color-white;
 
   p {
-    font-family: $site-font-family-alt;
-    font-size: 16px;
-
-    color: white;
-
+    overflow-wrap: anywhere;
+    word-break: normal;
     margin: 0;
-    padding-left: 1em;
-    padding-right: 1em;
+    flex-grow: 1;
+  }
 
-    a {
-      color: $site-color-card-link;
+  a, button {
+    color: $site-color-card-link;
+
+    &:hover {
+      color: color.mix($site-color-white, $site-color-card-link, 25%);
+    }
 
-      &:hover, &:focus, &:active {
-        color: darken($site-color-card-link, 20%);
-      }
+    &:active {
+      color: color.mix($site-color-white, $site-color-card-link, 50%);
     }
   }
 }
diff --git a/tool/config/site_variable_scanner.yaml b/tool/config/site_variable_scanner.yaml
@@ -20,7 +20,7 @@ yaml_variable_scanner:
     - ^site\.description$
     - ^site\.url$
     - ^site\.branch$
-    - ^site\.show_banner$
+    - ^site\.showBanner$
     - ^site\.sdkVersion$
     - ^site\.og_image_vers$
 

diff --git a/tool/get-dart/dart_sdk_archive/web/index.html b/tool/get-dart/dart_sdk_archive/web/index.html
@@ -9,7 +9,7 @@
     <link rel="icon" href="favicon.ico">
     <script defer src="main.dart.js"></script>
 </head>
-<body class="default show_banner">
+<body class="default">
 <main id="page-content">
     <form class="form-inline">
         <div class="form-group select">