{"id":15542751,"url":"https://github.com/melsumner/test-details","last_synced_at":"2026-03-01T14:02:05.613Z","repository":{"id":78401444,"uuid":"459727877","full_name":"MelSumner/test-details","owner":"MelSumner","description":"test the details element","archived":false,"fork":false,"pushed_at":"2022-06-01T17:45:44.000Z","size":199,"stargazers_count":4,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-05T07:52:48.463Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://test-details.netlify.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MelSumner.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2022-02-15T19:51:20.000Z","updated_at":"2024-07-01T05:37:50.000Z","dependencies_parsed_at":"2023-06-12T09:30:21.973Z","dependency_job_id":null,"html_url":"https://github.com/MelSumner/test-details","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/MelSumner/test-details","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MelSumner%2Ftest-details","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MelSumner%2Ftest-details/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MelSumner%2Ftest-details/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MelSumner%2Ftest-details/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MelSumner","download_url":"https://codeload.github.com/MelSumner/test-details/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MelSumner%2Ftest-details/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29970543,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-01T13:32:00.443Z","status":"ssl_error","status_checked_at":"2026-03-01T13:32:00.084Z","response_time":124,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":[],"created_at":"2024-10-02T12:24:20.099Z","updated_at":"2026-03-01T14:02:05.601Z","avatar_url":"https://github.com/MelSumner.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# test-details\n\nThis is to test AT with the `\u003cdetails\u003e` element and various invocations\n\nHTML spec for the `\u003cdetails\u003e` element: https://html.spec.whatwg.org/#the-details-element\n\nFrom the spec:\nThe details element represents a disclosure widget from which the user can obtain additional information or controls.\n\nWhat about accessibility?\n\nThe `details` element:\n\n* has the implicit role of group.\n* is not eligible to receive any other role\n* may receive any aria-* attribute that is in the \"global\" list (https://www.w3.org/TR/wai-aria-1.1/#global_states)\n* may receive any aria-* attributes applicable to the group role\n\nThe `summary` element:\n\n* has the implicit role of button\n* this means that all child elements should be considered presentational by assistive technology (this is not necessarily true in practice, but may be considered either a bug or coincidental that it works, not purposefully allowed by spec)\n* is not eligible to receive any other role\n* may receive any global aria attribute (see above)\n* may receive any aria-* attributes applicable to the button role\n* can only be used as the first child of the `details` element\n\n## What really happens\n\nConsider this code:\n\n```html\n\u003cdetails\u003e\n  \u003csummary\u003eUser Menu\u003c/summary\u003e\n  \u003cul\u003e\n    \u003cli\u003e\u003ca href=\"/\"\u003eHome\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"./about\"\u003eAbout\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"./contact\"\u003eContact Us\u003c/a\u003e\u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/details\u003e\n```\n\nI tried this in these combinations:\n\n* VoiceOver and Chrome (MacOS)\n* VoiceOver and Safari (MacOS)\n* Firefox and NVDA (Windows)\n\nAssistive Tech (AT) will tell the user something like this:\n\n* \"User Menu, collapsed, summary button\"\n* \"User menu, collapsed, disclosure triangle\"\n* \"User Menu button collapsed\"\n\nOnce you press the button (technically here the summary element, although the entire elements stays focused), it will announce something like:\n\n* \"User menu, expanded, summary button\"\n* \"User Menu, expanded, disclosure triangle\"\n* \"User Menu button expanded\"\n\nYou can then press TAB (or VO + TAB in Safari) to navigate to the next interactive element, which in this case would be the \"Home\" link and would be read (in most cases) like, \"list with three items. home, link.\"\n\nTechnically this works, even if it's a bit confusing to use with a screen-reader. I expected a disclosure widget and now I'm in a list with links?\n\nIf I use my keyboard shortcuts (VO + U, then left/right arrow key through the lists)\n\n* I will see/hear the links inside of the `details` element in the \"links\" list\n* I will see/hear the summary inside of the form elements list but only if I am in Chrome- Safari does not have this same list.\n\n**Nothing associates the two or combines them.** This is, I think, the crux of the issue.\n\nUnfortunately, a11y testing is not throwing an error right now for no-nested-interactive elements, so there's no indication that doing this is harmful or undesired. /shrug\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmelsumner%2Ftest-details","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmelsumner%2Ftest-details","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmelsumner%2Ftest-details/lists"}