docs(catalog): hide the nav bar's default dots in ff and fix tab navi…

…gation PiperOrigin-RevId: 563257951
material-components · Sep 7, 2023 · 8d3abd4 · 8d3abd4
1 parent 2e25bf8
commit 8d3abd4
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/catalog/site/_includes/default.html b/catalog/site/_includes/default.html
@@ -56,15 +56,15 @@
           <!-- unrelated change to components -->
           {% block content %}{{ content | safe }}{% endblock %}
         </main>
-          <md-list listtabindex="-1">
+          <md-list list-tabindex="-1">
             {% for component in collections.component|filtersort('data.name') %}
               <li>
                 <md-list-item
                   href="{{ component.url }}"
                   headline="{{ component.data.name }}"
                   {% if component.url == page.url %}selected{% endif %}
                   data-role=""
-                  itemtabindex="0"
+                  item-tabindex="0"
                 ></md-list-item>
               </li>
             {% endfor %}

diff --git a/catalog/site/css/global.css b/catalog/site/css/global.css
@@ -92,6 +92,15 @@ nav-drawer md-list-item[href][selected] {
   );
 }
 
+nav-drawer md-list li {
+  /* Hide <li> dots in Firefox */
+  list-style-type: none;
+}
+
+nav-drawer md-list md-list-item::part(focus-ring) {
+  --md-focus-ring-shape: var(--catalog-shape-xl);
+}
+
 @media (forced-colors: active) {
   nav-drawer md-list-item[href][selected] {
     border: 4px double CanvasText;