feat(SCSS module): Add sr-only SCSS module

Author: jackdomleo7

src/docs/scss_modules.mdx

@@ -0,0 +1,25 @@
+import { Meta, Title } from '@storybook/blocks';
+
+<Meta title="Docs/SCSS Modules" />
+
+<Title>SCSS Modules</Title>
+
+This library comes with a set of SCSS modules that you can `@use` into your project. These do not come bundled as default, they need to be imported manually.
+
+
+## `_sr-only.scss`
+
+```ts
+@use '@jackdomleo7/vue3-library/src/styles/modules/sr-only' as *;
+```
+
+This module contains 2 classes that can be used to hide elements visually but keep them accessible to screen readers.
+
+- `.sr-only`: Hides the element visually but keeps it accessible to screen readers.
+- `.sr-only--focusable`: Hides the element visually but keeps it accessible to screen readers. It will be visible when focused.
+
+```html
+<button class="icon-only"><span class="sr-only">Close</span> &times;</button>
+
+<button class="sr-only--focusable">Skip to main content</button>
+```

src/styles/modules/_sr-only.scss

@@ -0,0 +1,30 @@
+// This is a class to visually hide text from the UI, but will still be read by a screenreader
+// Use .sr-only.sr-only--focusable for elements such as a nav skip link
+
+.sr-only {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  overflow: hidden !important;
+  margin: -1px !important;
+  padding: 0 !important;
+  position: absolute !important;
+  width: 1px !important;
+  white-space: nowrap !important;
+
+  &--focusable {
+    &:focus,
+    &:focus-within,
+    &:active {
+      clip: auto !important;
+      clip-path: none !important;
+      height: auto !important;
+      margin: auto !important;
+      overflow: visible !important;
+      position: static !important;
+      width: auto !important;
+      white-space: normal !important;
+    }
+  }
+}