The resource finder returns Map symbols for Grade 3 plus Printable. Closing the panel preserves that one-result selection and its visible summary. Reset clears criteria while leaving the panel open. The native toggle exposes expanded state and the controlled panel ID.
Work through the example
Open More filters, choose Grade 3 and Printable, then Apply filters. Map symbols is the only match. Close filters to hide the controls; the count and active-criteria summary stay visible. Reopen and Reset filters to restore all four resources without collapsing the controls.
Put aria-expanded on the interactive button and aria-controls on the same button, referencing the panel’s unique ID. Closing from inside the panel returns focus to the external toggle before hiding the internal control. Expanded describes visibility, not whether filters are active. Check native keyboard activation and the exposed state separately from the visible result.
Separate open state from selected values
Use four fictional resources: Map symbols, grade 3, printable; Weather journal, grade 3, interactive; State capitals, grade 4, printable; and Energy sources, grade 4, interactive. With no filters selected, all four appear. Grade 3 returns two, printable returns two, and combining grade 3 with printable returns Map symbols alone.
Opening the panel exposes Grade and Format controls. Closing it hides those controls while retaining their selections. A reader who closes the panel after selecting grade 3 should still see two resources. Add an always visible "Active filters: Grade 3" summary beside the results, so a collapsed panel does not conceal why the list is shorter.
That is a different state from "More filters, expanded." One describes selected criteria. The other describes whether the related controls are visible. Give each its own text and avoid making a single flag stand for both.
Make one function own the transition
Give the button aria-controls="resource-filters" and aria-expanded="false". Give the panel that exact ID and start it with the hidden attribute. A single function can then set the expanded string to true or false and set the panel's hidden property to the opposite Boolean.
The attribute communicates state; it does not create the interaction. A button click still needs code that changes the panel. Keep the state on the control rather than placing aria-expanded on an unrelated heading or the whole page.
For this custom panel, a native button supplies Enter and Space activation. Retain its visible focus outline. A plain collection of filters is not an application menu, so it does not need menu roles or arrow-key navigation. Use ordinary labeled filter buttons.
Decide how closing works before adding more controls
Opening can leave focus on More filters, with the next Tab moving to Grade. That simple sequence makes the new controls available without an unexpected jump. A Close filters button inside the panel should close it and return focus to the external toggle before its own element becomes hidden.
Reset filters clears Grade and Format and restores four results. It should leave the panel open so the reader can continue choosing. Closing and resetting are separate actions with separate labels.
The native details and summary elements remain a good choice for a straightforward disclosure. This example uses a custom button because it has an internal close action and a persistent criteria summary. If those requirements disappear, reconsider whether the custom state management is useful.
Recreate this example
Build one self-contained responsive HTML example titled “aria-expanded: open state is not filter state” for readers completing the stated task. Return the complete HTML with embedded CSS and JavaScript. Use no remote fonts, libraries, images, requests, account connections, or saved-state claims.
Resources Map symbols grade3 printable; Weather journal grade3 interactive; State capitals grade4 printable; Energy sources grade4 interactive. More filters native button aria-controls resource-filters aria-expanded false; panel hidden initially. Panel contains Grade3/Grade4/Any grade and Printable/Interactive/Any format buttons, Apply filters, Reset filters, Close filters. Applying both3+printable shows Map symbols alone. Closing preserves criteria; visible summary outside panel shows them. Internal close returns focus to toggle before hiding; reset clears criteria but keeps panel open. Set hidden and expanded through one function. No menu roles or persistence.
Use a resource finder with a compact disclosure and always-visible active-criteria summary design with a compact header. Keep the actual sample data, controls, and useful default result visible early on a 360px-wide screen. Use readable text at least 16px, generous paragraph spacing, strong contrast, semantic labels, visible keyboard focus, and wrapping source blocks. Stack records on narrow screens rather than forcing a wide table.
Wire each action to an explicit type=button click handler using element selectors; the host permits scripts but blocks form submission. Update the visible result when the described action occurs. Show specific error feedback for invalid or missing input and clear stale feedback after dependent inputs change. Use plain text when displaying user values.
Visible disclosure state and attributes still need native keyboard and assistive-technology review. Keep the source fixture and worked teacher or developer example distinct from actual user records. Include the domain-specific explanation and next check beside the result. Provide no fake download, send, deployment, approval, or persistence button. Everything operates locally for the current page session.
Review the prepared copy in NOS
Close the panel with a filter active and confirm that the summary still explains the one remaining resource. NOS can render a prepared HTML behavior note and support visual revisions to eligible static instructions. Verify the final toggle, focus return and exposed state in the native accessibility review.