{"id":29970765,"url":"https://github.com/chrisnajman/tabs","last_synced_at":"2025-08-04T06:03:02.068Z","repository":{"id":305329616,"uuid":"1022595016","full_name":"chrisnajman/tabs","owner":"chrisnajman","description":"Responsive, accessible tabs with full keyboard support and ARIA semantics.","archived":false,"fork":false,"pushed_at":"2025-07-19T12:30:23.000Z","size":235,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-07-19T16:56:45.125Z","etag":null,"topics":["accessibility","aria-attributes","css-flexbox","css-grid","css-nesting","cssnano","es6-modules","esbuild","html-css-javascript","html-minifier-terser","loading-spinner","postcss","theme-switcher"],"latest_commit_sha":null,"homepage":"https://chrisnajman.github.io/tabs/","language":"HTML","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/chrisnajman.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,"zenodo":null}},"created_at":"2025-07-19T12:12:21.000Z","updated_at":"2025-07-19T12:30:27.000Z","dependencies_parsed_at":"2025-07-19T16:56:50.086Z","dependency_job_id":"d9ee2151-3468-445e-b7df-c0a1510537d0","html_url":"https://github.com/chrisnajman/tabs","commit_stats":null,"previous_names":["chrisnajman/tabs"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/chrisnajman/tabs","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisnajman%2Ftabs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisnajman%2Ftabs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisnajman%2Ftabs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisnajman%2Ftabs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chrisnajman","download_url":"https://codeload.github.com/chrisnajman/tabs/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisnajman%2Ftabs/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268656552,"owners_count":24285339,"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","status":"online","status_checked_at":"2025-08-04T02:00:09.867Z","response_time":79,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["accessibility","aria-attributes","css-flexbox","css-grid","css-nesting","cssnano","es6-modules","esbuild","html-css-javascript","html-minifier-terser","loading-spinner","postcss","theme-switcher"],"created_at":"2025-08-04T06:00:54.205Z","updated_at":"2025-08-04T06:03:02.054Z","avatar_url":"https://github.com/chrisnajman.png","language":"HTML","readme":"# Tabs\n\nA fully accessible, keyboard-navigable tab interface with responsive layout, built with semantic HTML, ARIA roles, and JavaScript.\n\n[View on GitPage](https://chrisnajman.github.io/tabs)\n\n---\n\n## JavaScript\n\nBuilt with **vanilla ES6 JavaScript**, focusing on modern syntax and browser APIs, , then bundled, transpiled to ES2015, and minified for broad browser compatibility.\n\nThe JavaScript has been split into separate modules, improving code modularity:\n\n### Main\n\n- `tabs.js`: Handles the tabbed interface (selection, panel switching).\n- `reset-all-tab-panels.js`: Hides all tab panels.\n- `reset-all-tabs.js`: Deselects all tabs.\n\n### Helpers\n\n- `set-multiple-attributes.js`: Utility function to efficiently assign multiple attributes to a single DOM element.\n\n### Other\n\n- `loader.js`: Displays a loader animation until the page is fully rendered, then removes the loader and announces readiness for screen readers.\n- `theme.js`: Handles theme toggling (light/dark mode) and local storage management.\n\n---\n\n## Accessibility\n\nThe site includes the following accessibility enhancements:\n\n- Fully keyboard-navigable using tab keys and arrow keys.\n- ARIA roles and attributes are implemented throughout (e.g. for tabs and panels).\n- A visually hidden skip link is provided for screen reader users.\n\n---\n\n## Theme Toggling\n\nThe application includes a dark mode and light mode toggle:\n\n- The current theme state is stored in **local storage** and applied automatically on page reload.\n- Accessible buttons with appropriate ARIA attributes are used to improve usability.\n\n---\n\n## Testing and Compatibility\n\nThe application has been tested on the following platforms and browsers:\n\n- **Operating System**: Windows 10\n- **Browsers**:\n  - Google Chrome\n  - Mozilla Firefox\n  - Microsoft Edge\n\n### Device View Testing\n\nThe layout and functionality have been verified in both browser and device simulation views to ensure responsiveness and usability.\n\n---\n\n## How to Run\n\n1. Clone or download the repository to your local machine.\n2. Open the project folder and start a simple HTTP server (e.g., using `Live Server` in VS Code or Python's `http.server` module).\n3. Open the project in a modern browser (e.g., Chrome, Firefox, or Edge).\n\n---\n\n## Build \u0026 Deployment Setup for `/docs` Folder\n\nIf you want to deploy a minified version of this project to **GitHub Pages**, read on.\n\n### 1. Install Required Packages\n\nRun this once in your project root to install dev dependencies:\n\n```bash\nnpm install\n```\n\n### 2. Run the full build process\n\nIn the terminal, run:\n\n```bash\nnpm run build\n```\n\n### 3. Deploy to GitHub Pages\n\nOnce you've created a repository and pushed the files,\n\n- go to `https://github.com/[your-name]/[your-project-name]/settings/pages`.\n- Under \"Build and deployment \u003e Branch\" make sure you set the branch to `main` and folder to `/docs`.\n- Click \"Save\".\n\n\u003e [!NOTE]\n\u003e For a detailed description of the build process, configuration files and npm packages see my [GitHub Pages Optimised Build](https://github.com/chrisnajman/github-pages-optimised-build).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchrisnajman%2Ftabs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchrisnajman%2Ftabs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchrisnajman%2Ftabs/lists"}