Update sr-only to visually-hidden

Author: rohandebsarkar

_includes/header.html

@@ -16,7 +16,7 @@
           {% endif %}
           <!-- Navbar Toggle -->
           <button class="navbar-toggler collapsed ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
-            <span class="sr-only">Toggle navigation</span>
+            <span class="visually-hidden">Toggle navigation</span>
             <span class="icon-bar top-bar"></span>
             <span class="icon-bar middle-bar"></span>
             <span class="icon-bar bottom-bar"></span>
@@ -35,7 +35,7 @@
               <li class="nav-item {% if page.permalink == '/' %}active{% endif %}">
                 <a class="nav-link" href="{{ '/' | relative_url }}">{{ about_title }}
                   {%- if page.permalink == '/' -%}
-                  <span class="sr-only">(current)</span>
+                  <span class="visually-hidden">(current)</span>
                   {%- endif -%}
                 </a>
               </li>
@@ -44,7 +44,7 @@
               <li class="nav-item {% if page.url contains 'blog' %}active{% endif %}">
                 <a class="nav-link" href="{{ '/blog/' | relative_url }}">{{ site.blog_nav_title }}
                   {%- if page.url contains 'blog' -%}
-                  <span class="sr-only">(current)</span>
+                  <span class="visually-hidden">(current)</span>
                   {%- endif -%}
                 </a>
               </li>
@@ -58,7 +58,7 @@
               <li class="nav-item dropdown {% if page.title == p.title %}active{% endif %}">
                 <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{ p.title }}
                   {%- if page.title == p.title -%}
-                  <span class="sr-only">(current)</span>
+                  <span class="visually-hidden">(current)</span>
                   {%- endif -%}
                 </a>
                 <div class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
@@ -75,7 +75,7 @@
               <li class="nav-item {% if page.title == p.title %}active{% endif %}">
                 <a class="nav-link" href="{{ p.url | relative_url }}">{{ p.title }}
                   {%- if page.title == p.title -%}
-                  <span class="sr-only">(current)</span>
+                  <span class="visually-hidden">(current)</span>
                   {%- endif -%}
                 </a>
               </li>