{"_id":"@a11y-ngx/sr-only","_rev":"2-1cd12698feee637da45610e39a61ca68","name":"@a11y-ngx/sr-only","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@a11y-ngx/sr-only","version":"1.0.0","keywords":["screen reader","visuall hidden","accessibility","a11y","component","angular"],"author":{"url":"https://github.com/LDV2k3/","name":"Luciano Del Vacchio","email":"lucho.development@gmail.com"},"license":"MPL-2.0","_id":"@a11y-ngx/sr-only@1.0.0","maintainers":[{"name":"ldv","email":"lucho.development@gmail.com"}],"homepage":"https://github.com/LDV2k3/a11y-libraries/tree/master/projects/a11y-ngx/sr-only#readme","bugs":{"url":"https://github.com/LDV2k3/a11y-libraries/issues","email":"lucho.development@gmail.com"},"dist":{"shasum":"569c44a5cfc5ceb4633ddfa08128e1cf7d90eb95","tarball":"https://registry.npmjs.org/@a11y-ngx/sr-only/-/sr-only-1.0.0.tgz","fileCount":16,"integrity":"sha512-DmTJ+3Iebh5Y0sgTFKWE4q+FPRMAKECbb8kM80h/52iBUoTj2/AL3clpYqWks1DA3VeQ4SmESS5IAq61uYUx0Q==","signatures":[{"sig":"MEUCIDVy9L15MlPdsBUdY75J1vADi7F3GQKH6zGarLedt6zsAiEAkVTs9wkMvI7Q7MhtZNO9NB1EaoB63sTW0d8qbHBv2RU=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":105939},"main":"bundles/a11y-ngx-sr-only.umd.js","es2015":"fesm2015/a11y-ngx-sr-only.js","module":"fesm2015/a11y-ngx-sr-only.js","esm2015":"esm2015/a11y-ngx-sr-only.js","gitHead":"d313d56203dd48883f2675606909ff2761188ce9","typings":"a11y-ngx-sr-only.d.ts","_npmUser":{"name":"ldv","email":"lucho.development@gmail.com"},"fesm2015":"fesm2015/a11y-ngx-sr-only.js","_npmVersion":"8.19.4","description":"A component and CSS rule that provides a way to insert visually hidden text that is still reached and announced by screen reader","directories":{},"sideEffects":false,"_nodeVersion":"16.20.2","dependencies":{"tslib":"^1.10.0"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":">=12.2.0","@angular/common":">=12.2.0"},"_npmOperationalInternal":{"tmp":"tmp/sr-only_1.0.0_1761072525452_0.2076098344152444","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@a11y-ngx/sr-only","version":"1.0.1","description":"A component and CSS rule that provides a way to insert visually hidden text that is still reached and announced by screen reader","keywords":["screen reader","visuall hidden","accessibility","a11y","component","angular"],"homepage":"https://github.com/LDV2k3/a11y-libraries/tree/master/projects/a11y-ngx/sr-only#readme","bugs":{"url":"https://github.com/LDV2k3/a11y-libraries/issues","email":"lucho.development@gmail.com"},"license":"MPL-2.0","author":{"name":"Luciano Del Vacchio","email":"lucho.development@gmail.com","url":"https://github.com/LDV2k3/"},"peerDependencies":{"@angular/common":">=12.2.0 <21.0.0","@angular/core":">=12.2.0 <21.0.0"},"dependencies":{"tslib":"^1.10.0"},"main":"bundles/a11y-ngx-sr-only.umd.js","module":"fesm2015/a11y-ngx-sr-only.js","es2015":"fesm2015/a11y-ngx-sr-only.js","esm2015":"esm2015/a11y-ngx-sr-only.js","fesm2015":"fesm2015/a11y-ngx-sr-only.js","typings":"a11y-ngx-sr-only.d.ts","sideEffects":false,"gitHead":"0943b42a1333a74cbda740380ef033e73c182dd5","_id":"@a11y-ngx/sr-only@1.0.1","_nodeVersion":"16.20.2","_npmVersion":"8.19.4","dist":{"integrity":"sha512-lpIr3IfqTonun+oo0epbPBARqWs9ehNstZ1M5xELs6eB9WzFBgtZjJk4mMqhmWgWaxAGDY52v8nUj6IyoPZzJw==","shasum":"7fc1a7b14c7a11eb357b0ef6307724435eefae60","tarball":"https://registry.npmjs.org/@a11y-ngx/sr-only/-/sr-only-1.0.1.tgz","fileCount":16,"unpackedSize":105955,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIHtOV55zvsyXo98rAe4ONOEn9n02ZY/pjU86Jm7kNYhGAiEAgFxx/bKzwvR8HJouiXrFxn9uSphp4foE2gDc4XCP5f8="}]},"_npmUser":{"name":"ldv","email":"lucho.development@gmail.com"},"directories":{},"maintainers":[{"name":"ldv","email":"lucho.development@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/sr-only_1.0.1_1761916781799_0.4782776322797473"},"_hasShrinkwrap":false}},"time":{"created":"2025-10-21T18:48:45.383Z","modified":"2025-10-31T13:19:42.219Z","1.0.0":"2025-10-21T18:48:45.638Z","1.0.1":"2025-10-31T13:19:41.986Z"},"bugs":{"url":"https://github.com/LDV2k3/a11y-libraries/issues","email":"lucho.development@gmail.com"},"author":{"name":"Luciano Del Vacchio","email":"lucho.development@gmail.com","url":"https://github.com/LDV2k3/"},"license":"MPL-2.0","homepage":"https://github.com/LDV2k3/a11y-libraries/tree/master/projects/a11y-ngx/sr-only#readme","keywords":["screen reader","visuall hidden","accessibility","a11y","component","angular"],"description":"A component and CSS rule that provides a way to insert visually hidden text that is still reached and announced by screen reader","maintainers":[{"name":"ldv","email":"lucho.development@gmail.com"}],"readme":"# Screen Reader Only / Visually Hidden\r\n\r\nA simple component & CSS rules that provides a way to insert visually hidden text that is still reached and announced by screen readers. It helps improve accessibility by conveying additional context, labels, or instructions to users relying on assistive technologies.\r\n\r\nThis library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 12.2.0.\r\n\r\n## Index\r\n\r\n- [Installation](#installation)\r\n- [Use / Example](#use--example)\r\n\r\n## Installation\r\n\r\n1. Install npm package:\r\n\r\n   `npm install @a11y-ngx/sr-only --save`\r\n\r\n2. Import `A11ySROnlyModule` into your module or standalone component:\r\n\r\n```typescript\r\nimport { A11ySROnlyModule } from '@a11y-ngx/sr-only';\r\n\r\n@NgModule({\r\n    declarations: [...],\r\n    imports: [\r\n        ...\r\n        A11ySROnlyModule,\r\n    ],\r\n})\r\nexport class AppModule { }\r\n```\r\n\r\n## Use / Example\r\n\r\nYou can make use on one of the available items:\r\n\r\n- `<a11y-sr-only>` (component)\r\n- `<a11y-visually-hidden>` (component)\r\n- `.a11y-sr-only` (CSS class)\r\n- `.a11y-visually-hidden` (CSS class)\r\n\r\nBy using the components, you can insert any text you want to provide extra context, either by using:\r\n\r\n- **Input:** `text` of type `string`, or\r\n- **Content Projection**\r\n\r\n> **NOTE:** To make use of the CSS classes, you have to import `A11ySROnlyModule` at least once at a root level in your app so the CSS is available.\r\n\r\nEverything inside any of those elements will be visually hidden but reachable by the screen reader.\r\n\r\n```html\r\n<a href=\"/settings\">\r\n    <span>Settings</span>\r\n    <sup><i class=\"fa-solid fa-up-right-from-square ms-1\" aria-hidden=\"true\"></i></sup>\r\n    <a11y-sr-only>(opens in a new tab)</a11y-sr-only>\r\n</a>\r\n\r\n<a href=\"/policies\">\r\n    <span>Policies</span>\r\n    <sup><i class=\"fa-solid fa-up-right-from-square ms-1\" aria-hidden=\"true\"></i></sup>\r\n    <a11y-visually-hidden text=\"(opens in a new tab)\"></a11y-visually-hidden>\r\n</a>\r\n\r\n<a href=\"/cookies\">\r\n    <span>Cookies</span>\r\n    <span class=\"a11y-sr-only\">(opens in a dialog)</span>\r\n</a>\r\n```\r\n\r\nYou can see how it is announced by the NVDA screen reader:\r\n\r\n- `link` 👉 the element\r\n- `Settings` 👉 the visible text\r\n- `(opens in a new tab)` 👉 the visually hidden text _(💡 the use of parentheses is just for the screen reader to give a small pause)_\r\n\r\n![\"\"](https://raw.githubusercontent.com/LDV2k3/a11y-libraries/refs/heads/master/projects/a11y-ngx/sr-only/src/lib/images/example-screen-reader.jpg)\r\n","readmeFilename":"README.md"}