From a790586b8b3e3d75cd714a9fb554e25759c0318a Mon Sep 17 00:00:00 2001
From: Konstantinos Norgias <Konstantinos.Norgias@ing.com>
Date: Mon, 4 Apr 2022 16:39:37 +0200
Subject: [PATCH] chore: add eg for label-sr-only attribute on input element

---
 docs/components/input/use-cases.md | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/docs/components/input/use-cases.md b/docs/components/input/use-cases.md
index 67d80aca2..9fd4d3102 100644
--- a/docs/components/input/use-cases.md
+++ b/docs/components/input/use-cases.md
@@ -13,6 +13,19 @@ Can be provided via the `label` attribute or via the `slot="label"`.
 export const label = () => html` <lion-input label="Input" name="input"></lion-input> `;
 ```
 
+## Label sr-only (a11y)
+
+Can be provided via the `label-sr-only` boolean attribute.
+
+The label will be hidden, but still readable by screen readers.
+
+```js preview-story
+export const labelSrOnly = () =>
+  html` <lion-input label-sr-only label="Input" name="input"></lion-input> `;
+```
+
+> Note: Once we support the ElementInternals API, the equivalent will be `<lion-input aria-label="Input" name="input"></lion-input>`
+
 ## Help-text
 
 A helper text shown below the label to give extra clarification.