{"id":13635410,"url":"https://github.com/yamanoku/vue-visually-hidden","last_synced_at":"2025-03-19T04:30:48.184Z","repository":{"id":36976221,"uuid":"391342115","full_name":"yamanoku/vue-visually-hidden","owner":"yamanoku","description":"Vue.js visually hidden component (Vue 3 Support Only)","archived":false,"fork":false,"pushed_at":"2024-05-01T06:47:07.000Z","size":2836,"stargazers_count":7,"open_issues_count":2,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-05-01T12:27:07.603Z","etag":null,"topics":["a11y","accessibility","typescript","visually-hidden","vite","vue3","vuejs"],"latest_commit_sha":null,"homepage":"https://vue-visually-hidden.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yamanoku.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-07-31T11:52:30.000Z","updated_at":"2024-05-03T02:59:03.785Z","dependencies_parsed_at":"2023-12-22T03:45:33.825Z","dependency_job_id":"1e359b95-dc06-46b3-bd01-ff8634660ae5","html_url":"https://github.com/yamanoku/vue-visually-hidden","commit_stats":{"total_commits":528,"total_committers":3,"mean_commits":176.0,"dds":0.5397727272727273,"last_synced_commit":"9eae9ec0a249997eefd51cdb5b48ce55f6fb369c"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yamanoku%2Fvue-visually-hidden","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yamanoku%2Fvue-visually-hidden/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yamanoku%2Fvue-visually-hidden/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yamanoku%2Fvue-visually-hidden/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yamanoku","download_url":"https://codeload.github.com/yamanoku/vue-visually-hidden/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243968567,"owners_count":20376415,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["a11y","accessibility","typescript","visually-hidden","vite","vue3","vuejs"],"created_at":"2024-08-02T00:00:45.261Z","updated_at":"2025-03-19T04:30:47.713Z","avatar_url":"https://github.com/yamanoku.png","language":"TypeScript","funding_links":[],"categories":["Components and plugins"],"sub_categories":["Courses"],"readme":"# vue-visually-hidden\n[![npm](https://img.shields.io/npm/v/vue-visually-hidden.svg)](https://www.npmjs.com/package/vue-visually-hidden)\n\nVue.js visually hidden component\n(Vue 3 Only)\n\n## What is visually-hidden component ?\n\nIn the case of visual content, users using assistive technologies (e.g. screen readers) may not always know what the content means.\n\nIn most cases, accessible content can be provided by semantic markup, but there is currently no markup that can provide content that is not visually visible but can be read out loud.\n\nFor example, when a button is displayed with only pictograms, the description of the button may be visually discernible, but the screen reader may not know what it means.\n\n```html\n\u003cbutton type=\"submit\"\u003e\n  \u003cspan\u003e\n    📧\n  \u003c/span\u003e\n\u003c/button\u003e\n```\n\nIn such cases, `\u003cVisuallyHidden\u003e` is a good choice.\n\n```html\n\u003cbutton type=\"submit\"\u003e\n  \u003cspan aria-hidden=\"true\"\u003e\n    📧\n  \u003c/span\u003e\n  \u003cVisuallyHidden\u003e\n    Send email\n  \u003c/VisuallyHidden\u003e\n\u003c/button\u003e\n```\n*Use `aria-hidden=\"true\"` to prevent screen readers from emoji.*\n\nIt used to be used in [Bootstrap](https://getbootstrap.com/) in the form of `sr-only`.\n\n### Reference\n[WebAIM: CSS in Action - Invisible Content Just for Screen Reader Users](https://webaim.org/techniques/css/invisiblecontent/)\n\n## Demo\nhttps://vue-visually-hidden.vercel.app/\n\n## Installation\n\n```bash\nnpm install -D vue-visually-hidden\n```\n\n```bash\nyarn add -D vue-visually-hidden\n```\n\n## Usage\n\n```html:App.vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cVisuallyHidden\u003e\n      Visually Hidden Text\n    \u003c/VisuallyHidden\u003e\n    \u003cVisuallyHidden :isFocusable=\"true\"\u003e\n      \u003ca href=\"http://example.com\"\u003eexample\u003c/a\u003e\n    \u003c/VisuallyHidden\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\n  import { VisuallyHidden } from 'vue-visually-hidden'\n\u003c/script\u003e\n```\n\n### style setting (vue-cli)\n\n```js:main.js\nimport 'vue-visually-hidden/dist/style.css'\n```\n\n### style setting (vite)\n\n```js:main.js\nimport 'vue-visually-hidden/style'\n```\n\n## isFocusable\n\nprop        | type      | default\n----------- | --------- | ---------\nisFocusable | `Boolean` | `false`\n\nInspired by [Bootstrap visually-hidden helper](https://getbootstrap.com/docs/5.0/helpers/visually-hidden/)\n\n`.visually-hidden-focusable` can be show by any child element of the container receives focus.\n\n```html:example.vue\n\u003ctemplate\u003e\n  \u003cVisuallyHidden :isFocusable=\"true\"\u003e\n    \u003ca href=\"http://example.com\"\u003eexample\u003c/a\u003e\n  \u003c/VisuallyHidden\u003e\n\u003c/template\u003e\n```\n\nThis can be used primarily for a feature called skip link.\nA skip link is link that allow keyboard users to quickly access the main content, and the links are visible upon focus.\n\n### Reference\n- [Basics | Vue.js](https://v3.vuejs.org/guide/a11y-basics.html#skip-link)\n- [vue-a11y/vue-skip-to](https://github.com/vue-a11y/vue-skip-to)\n\n## Resolve Setting\n\nIf you get the error `Invalid VNode type: Symbol(Fragment) (symbol)`, try setting `resolve` in the configuration file as follows.\n\nSee: https://github.com/vuejs/vue-next/issues/2064\n\n### vue.config.js\n\n```js:vue.config.js\nconst path = require('path')\n\nmodule.exports = {\n  configureWebpack: {\n    resolve: {\n      symlinks: false,\n      alias: {\n        vue: path.resolve('./node_modules/vue')\n      }\n    }\n  }\n}\n```\n\n### vite.config.js\n\n```js:vite.config.js\nimport { defineConfig } from 'vite'\nimport vue from '@vitejs/plugin-vue'\n\nexport default defineConfig({\n  plugins: [vue()],\n  resolve: {\n    dedupe: ['vue']\n  }\n})\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyamanoku%2Fvue-visually-hidden","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyamanoku%2Fvue-visually-hidden","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyamanoku%2Fvue-visually-hidden/lists"}