From 69b3c464839ae09b2681451dfac978352e726e14 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Fri, 3 Jul 2020 20:31:44 +0100
Subject: [PATCH] Rename `sr-only` to `visually-hidden` in new/renamed helper
 doc file

---
 site/content/docs/5.0/helpers/visually-hidden.md | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/site/content/docs/5.0/helpers/visually-hidden.md b/site/content/docs/5.0/helpers/visually-hidden.md
index 5392b801b182..987d23b666ed 100644
--- a/site/content/docs/5.0/helpers/visually-hidden.md
+++ b/site/content/docs/5.0/helpers/visually-hidden.md
@@ -6,21 +6,21 @@ group: helpers
 aliases: "/docs/5.0/helpers/screen-readers/"
 ---
 
-Visually hide an element while still allowing it to be exposed to assistive technologies (such as screen readers) with `.sr-only`. Use `.sr-only-focusable` to visually hide an element by default, but to display it when it's focused (e.g. by a keyboard-only user). Can also be used as mixins.
+Visually hide an element while still allowing it to be exposed to assistive technologies (such as screen readers) with `.visually-hidden`. Use `.visually-hidden-focusable` to visually hide an element by default, but to display it when it's focused (e.g. by a keyboard-only user). Can also be used as mixins.
 
 {{< example >}}
-<h2 class="sr-only">Title for screen readers</h2>
-<a class="sr-only-focusable" href="#content">Skip to main content</a>
+<h2 class="visually-hidden">Title for screen readers</h2>
+<a class="visually-hidden-focusable" href="#content">Skip to main content</a>
 {{< /example >}}
 
 {{< highlight scss >}}
 // Usage as a mixin
 
-.sr-only-title {
-  @include sr-only;
+.visually-hidden-title {
+  @include visually-hidden;
 }
 
 .skip-navigation {
-  @include sr-only-focusable;
+  @include visually-hidden-focusable;
 }
 {{< /highlight >}}