fix a11y bug of aria-expanded

[Stefan3002]

Done

• Changed the aria-expanded attribute used in searchAndFilter components to data-expanded
• This is because aria-expanded was wrongly used for historical reasons
• It should have been used on the button that triggers the opening of the search bar, not on the search bar itself.

This is **closely related to this ** PR.

QA

• Open demo
• [Add QA steps]
• Review updated documentation:
  • [List any updated documentation for review]

This is the dummy app I used in testing:

{% extends "_layouts/examples.html" %}
{% block title %}Sandbox / Search and filter chip overflow{% endblock %}

{% block standalone_css %}patterns_search-and-filter{% endblock %}

{% block content %}
<div style="max-width: 760px; padding: 24px;">
  <h2 style="margin-top: 0;">Search bar with preselected chips</h2>
  <p class="u-text--muted">Click <code>+N</code> to expand and reveal all selected chips.</p>

  <div class="p-search-and-filter" id="search-filter-demo">
    <div class="p-search-and-filter__search-container" data-expanded="false" data-active="true" data-empty="false">
	  <span class="p-chip"><span class="p-chip__lead">OWNER</span><span class="p-chip__value">me</span><button class="p-chip__dismiss" type="button">Dismiss</button></span>
	  <span class="p-chip"><span class="p-chip__lead">STATUS</span><span class="p-chip__value">open</span><button class="p-chip__dismiss" type="button">Dismiss</button></span>
	  <span class="p-chip"><span class="p-chip__lead">TAG</span><span class="p-chip__value">frontend</span><button class="p-chip__dismiss" type="button">Dismiss</button></span>
	  <span class="p-chip"><span class="p-chip__lead">TAG</span><span class="p-chip__value">ui</span><button class="p-chip__dismiss" type="button">Dismiss</button></span>
	  <span class="p-chip"><span class="p-chip__lead">TAG</span><span class="p-chip__value">accessibility</span><button class="p-chip__dismiss" type="button">Dismiss</button></span>
	  <span class="p-chip"><span class="p-chip__lead">PRIORITY</span><span class="p-chip__value">high</span><button class="p-chip__dismiss" type="button">Dismiss</button></span>
	  <span class="p-chip"><span class="p-chip__lead">ENV</span><span class="p-chip__value">prod</span><button class="p-chip__dismiss" type="button">Dismiss</button></span>
	  <span class="p-chip"><span class="p-chip__lead">REGION</span><span class="p-chip__value">eu</span><button class="p-chip__dismiss" type="button">Dismiss</button></span>
	  <span class="p-chip"><span class="p-chip__lead">TYPE</span><span class="p-chip__value">bug</span><button class="p-chip__dismiss" type="button">Dismiss</button></span>
	  <span class="p-chip"><span class="p-chip__lead">TEAM</span><span class="p-chip__value">design-systems</span><button class="p-chip__dismiss" type="button">Dismiss</button></span>
	  <span class="p-chip"><span class="p-chip__lead">COMPONENT</span><span class="p-chip__value">search</span><button class="p-chip__dismiss" type="button">Dismiss</button></span>
	  <span class="p-chip"><span class="p-chip__lead">COMPONENT</span><span class="p-chip__value">filter</span><button class="p-chip__dismiss" type="button">Dismiss</button></span>

	  <span class="p-search-and-filter__selected-count" role="button" tabindex="0">+6</span>

	  <form class="p-search-and-filter__box" data-overflowing="false">
		<label class="u-off-screen" for="search-demo">Search and filter</label>
		<input autocomplete="off" class="p-search-and-filter__input" id="search-demo" name="search" placeholder="Search and filter" type="search" value="">
		<button alt="search" class="p-search-and-filter__search-button" type="submit">Search</button>
	  </form>
	</div>
	<div class="p-search-and-filter__panel" aria-hidden="true"></div>
  </div>
</div>

<script>
  (function () {
	var pattern = document.getElementById("search-filter-demo");
	var selectedCount = pattern.querySelector(".p-search-and-filter__selected-count");
	var searchContainer = pattern.querySelector(".p-search-and-filter__search-container");
	var searchBox = pattern.querySelector(".p-search-and-filter__box");
	var panel = pattern.querySelector(".p-search-and-filter__panel");

	function expandSelectedChips() {
	  searchContainer.dataset.expanded = "true";
	  searchBox.dataset.overflowing = "true";
	  panel.setAttribute("aria-hidden", "false");
	}

	selectedCount.addEventListener("click", expandSelectedChips);
	selectedCount.addEventListener("keydown", function (event) {
	  if (event.key === "Enter" || event.key === " ") {
		event.preventDefault();
		expandSelectedChips();
	  }
	});
  })();
</script>
{% endblock %}

Check if PR is ready for release

If this PR contains Vanilla SCSS or macro code changes, it should contain the following changes to make sure it's ready for the release:

• PR should have one of the following labels to automatically categorise it in release notes:
  • Feature 🎁, Breaking Change 💣, Bug 🐛, Documentation 📝, Maintenance 🔨.
• Vanilla version in package.json should be updated relative to the most recent release, following semver convention
  • if existing APIs (CSS classes & macro APIs) are not changed it can be a bugfix release (x.x.X)
  • if existing APIs (CSS classes & macro APIs) are changed/added/removed it should be a minor version (x.X.0)
  • see the wiki for more details
• Any changes to component class names (new patterns, variants, removed or added features) or macros should be listed on the what's new page.

[webteam-app]

Demo

Jenkins

demos.haus

[Copilot]

Pull request overview

This PR updates the Search and Filter pattern’s “expanded” styling state to stop (mis)using aria-expanded on the search container, replacing it with a data-expanded attribute, and publishes the change via a new release entry/version bump.

Changes:

• Updated Search and Filter SCSS selectors to use data-expanded instead of aria-expanded.
• Added a 4.47.0 release note describing the attribute change.
• Bumped the package version to 4.47.0.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.

File	Description
scss/_patterns_search-and-filter.scss	Switches styling hooks from aria-expanded to data-expanded for the search container.
releases.yml	Adds release-note entry documenting the attribute change.
package.json	Bumps version from 4.46.0 to 4.47.0.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Stefan3002]

There is also one more thing here: in the docs, we still set aria-expanded on individual chips. This is incorrect, and is removed from react-components here. It is however out of scope for this PR, but could still be corrected.