{"id":15022868,"url":"https://github.com/melsumner/ember-a11y-dropdown","last_synced_at":"2025-08-02T20:34:49.006Z","repository":{"id":40699888,"uuid":"440637426","full_name":"MelSumner/ember-a11y-dropdown","owner":"MelSumner","description":"A super simple, accessible dropdown component for use in Ember apps.","archived":false,"fork":false,"pushed_at":"2024-11-05T17:19:41.000Z","size":896,"stargazers_count":4,"open_issues_count":29,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-07T03:41:30.039Z","etag":null,"topics":["accessibility","addon","ember"],"latest_commit_sha":null,"homepage":"https://ember-a11y-dropdown.netlify.app/","language":"JavaScript","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/MelSumner.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","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-12-21T20:05:11.000Z","updated_at":"2025-01-29T18:04:57.000Z","dependencies_parsed_at":"2024-05-28T03:34:26.147Z","dependency_job_id":"67d5b978-f638-475c-9cb5-3b4a026493f1","html_url":"https://github.com/MelSumner/ember-a11y-dropdown","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/MelSumner/ember-a11y-dropdown","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MelSumner%2Fember-a11y-dropdown","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MelSumner%2Fember-a11y-dropdown/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MelSumner%2Fember-a11y-dropdown/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MelSumner%2Fember-a11y-dropdown/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MelSumner","download_url":"https://codeload.github.com/MelSumner/ember-a11y-dropdown/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MelSumner%2Fember-a11y-dropdown/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268448362,"owners_count":24252019,"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-02T02:00:12.353Z","response_time":74,"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","addon","ember"],"created_at":"2024-09-24T19:58:28.424Z","updated_at":"2025-08-02T20:34:48.983Z","avatar_url":"https://github.com/MelSumner.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ember-a11y-dropdown\n\n**Note: this is not to replace a `\u003cselect\u003e` element in a form.**\n\nThis is a very simple, accessible dropdown that you can use in your Ember app for something like a menu dropdown-- or [disclosure navigation menu])https://www.w3.org/TR/wai-aria-practices-1.2/examples/disclosure/disclosure-navigation.html)\n\nIt's pretty narrow in scope, and there are other addons that do fancier things.\n\nUse this addon if you:\n\n* want to stop using a `details` element (which is an interactive element so cannot contain other interactive elements)\n* need a dropdown menu to put in the header or nav of your site (like a user menu)\n* are okay with styling the CSS in your app's stylesheets\n\nWhatever else you may be able to force this component to do is coincidental.\n\n## Compatibility\n\n* Ember.js v3.24 or above\n* Ember CLI v3.24 or above\n* Node.js v12 or above\n\n## Installation\n\nI haven't released this addon yet, but once I do you can install it the same way you do other Ember addons:\n\n```bash\nember install ember-a11y-dropdown\n```\n\n## Usage\n\nThe component markup:\n\n* a `div` to wrap the entire component so it doesn't mess up your flex or grid layout\n* a `button` element to show/hide the dropdown\n* a `ul` element that contains the dropdown\n* the `LinkTo` components (link element) if a route is defined\n* a `li` with `role=\"separator\"` (if needed)\n\n### Styling\n\nThe specificity in the addon is kept at single level; it is explicitly only the class names that are attached to each element of the component. That means if you want to override on your own, you can. In fact, it is likely that you'll want to override the default styles.\n\n* the wrapping `\u003cdiv\u003e` has the class `ea-dropdown`\n* the `\u003cbutton\u003e` has the class `ea-dropdown__button`\n* the `\u003cul\u003e` has the class `ea-dropdown__list`\n* the `\u003cli\u003e` has the class `ea-dropdown__list-item`\n* the `\u003cli\u003e` as a separator has the class `ea-dropdown__list-item--separator`\n* the `\u003ca\u003e` inside of the `\u003cli\u003e` has the class `ea-dropdown__list-item--link`\n* to style the `\u003cli\u003e` that contains text-only, target `ea-dropdown__list-item--text-only`\n\nAccessibility Note: if you are going to override any borders or outlines, do it the accessible way! Here's what that means: outlines and border-colors need to stay transparent in _your_ code, so if a user has high-contrast mode turned on, they will be able to see the borders; in high-contrast mode, operating systems ignore all color definitions (and `transparent` is indeed considered a color).\n\nDo this:\n\n```css\n.my-element {\n  border-color: transparent;\n}\n```\n\nDo NOT do this:\n\n```css\n.my-element {\n  border: none;\n}\n```\n\nFinally, remember that styling pseudo-classes requires your CSS to stay in a specific order. I remember it with the mnemonic \"Lord Vader Hates Fluffy Animals\":\n\n* `:link`\n* `:visited`\n* `:hover`\n* `:focus`\n* `:active`\n\n\n### Use Case: the component and a controller \n\nIf you add the component directly to your page, you can add an array to a controller:\n\nAs a primitive example, here's the controller in this addon's demo app:\n\n```js\n// controllers/application.js\nimport Controller from '@ember/controller';\nimport { tracked } from '@glimmer/tracking';\n\nexport default class ApplicationController extends Controller {\n  @tracked someArray = [\n    {\n      route: 'index',\n      text: 'one',\n    },\n    {\n      route: 'alpha', // actual name of route in demo app\n      text: 'two',\n    },\n  ];\n}\n```\n\nAnd here it is invoked in the demo app's application template:\n\n```hbs\n\u003cEaDropdown @listItems={{this.someArray}} /\u003e\n```\n\n### Use Case: the nested component\n\nIt's far more likely that you'll use this component as part of your app's header or nav component. In this example, I've made a component in the demo app called `ea-header-demo` and used the dropdown component inside of that:\n\n```hbs\n{{!--tests/dummy/app/components/ea-header-demo.hbs--}}\n\u003cheader\u003e\n  \u003cNavigationNarrator /\u003e\n  \u003ch1\u003e\n    ember-a11y-dropdown\n  \u003c/h1\u003e\n  \u003cnav\u003e\n    \u003cEaDropdown @listItems={{this.listItems}} /\u003e\n  \u003c/nav\u003e\n\u003c/header\u003e\n```\n\nThis means that I can define the array for `@listItems` in my component instead of a controller:\n\n```js\n// tests/dummy/app/components/ea-header-demo.js\nimport Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\n\nexport default class EaHeaderDemoComponent extends Component {\n  @tracked listItems = [\n    {\n      route: 'index',\n      text: 'Home',\n    },\n    {\n      route: 'alpha',\n      text: 'Alpha Page',\n    },\n    {\n      type: 'separator',\n    },\n    {\n      text: 'We are happy to see you!'\n    }\n  ];\n}\n```\n\nYou'll notice a few things: \n\n* To create a separator in the list, use `type: 'separator'` - the component looks for `listitem.type` to be `separator`.\n* If you want something in the list that isn't a link, then don't define a `route` for that item, just `text`.\n\n## Keyboard Support\n\n* I have not done anything fancy with the keyboard support. \n* If a screen reader is active and the dropdown menu is open, users will already be able to navigate with arrow keys. \n* If a screen reader is not active, users can use the `TAB` key to navigate through the list.\n* If the dropdown is open and the user presses the `ESC` key, the menu will close.\n* If focus was on an item list, and the menu was closed by pressing the `ESC` key, focus will return to the `button` element trigger.\n\n## Contributing\n\nFile an issue if you think something is missing or should be added.\n\nPRs to fix issues are welcome.\n\nFeel free to ping me on Discord if I don't reply soon enough (and sorry in advance if that happens).\n\n## License\n\nThis project is licensed under the [MIT License](LICENSE.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmelsumner%2Fember-a11y-dropdown","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmelsumner%2Fember-a11y-dropdown","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmelsumner%2Fember-a11y-dropdown/lists"}