Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaOwnsElements below:

Element: ariaOwnsElements property - Web APIs

This example demonstrates how the aria-owns attribute and property are used.

The code defines a menu and its associated submenu in separate and non-nested <div> elements. Because these elements are not nested the ownership relationship between the menu and submenu is not captured by the DOM. Here we provide that information to accessibility tools using the aria-owns attribute, but we could also do it using the reflected property.

Note that we could construct a menu where the submenu was nested: the example has been contrived to make it easier to demonstrate a case where the relationship needs to be defined.

The HTML defines <div> elements for the menu, with id=parentMenu and the submenu with id="subMenu1". We've added a <div> in between just to make it even more obvious that there is no direct ownership model defined in the DOM.

The parent menu <div> includes the attribute aria-owns="subMenu1" to create this ownership relationship.

<div class="menu" id="parentMenu" role="menubar" aria-owns="subMenu1">
  Top level menu (hover over)
</div>

<div>Some other element</div>

<div class="submenu" id="subMenu1" role="menu">
  <a href="#" role="menuitem">Menu item 1</a>
  <a href="#" role="menuitem">Menu item 2</a>
  <a href="#" role="menuitem">Menu item 3</a>
</div>

The CSS styles the menu and submenu, and displays the submenu when the menu is hovered over.

.menu {
  position: relative;
  display: inline-block;
  color: purple;
}

.submenu {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 6px 14px 0px rgb(0 0 0 / 0.2);
  z-index: 1;
  top: 20px;
  left: 0;
}

.menu:hover ~ .submenu {
  display: block;
}

.submenu a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.submenu a:hover {
  background-color: #f1f1f1;
}

#log {
  height: 80px;
  overflow: scroll;
  padding: 0.5rem;
  margin: 5px;
  border: 1px solid black;
}

The code first checks whether the ariaOwnsElements is supported. If it is, we log the attribute, the elements in the property, and the id value for each element.

const logElement = document.querySelector("#log");
function log(text) {
  logElement.innerText = `${logElement.innerText}${text}\n`;
  logElement.scrollTop = logElement.scrollHeight;
}

// Feature test for ariaOwnsElements
if ("ariaOwnsElements" in Element.prototype) {
  const parentMenu = document.querySelector("#parentMenu");
  log(`parentMenu.getAttribute(): ${parentMenu.getAttribute("aria-owns")}`);
  log(`parentMenu.ariaOwnsElements: ${parentMenu.ariaOwnsElements}`);
  parentMenu.ariaOwnsElements?.forEach((elem) => {
    log(`  id: ${elem.id}`);
  });
} else {
  log("element.ariaOwnsElements: not supported by browser");
}

The result of running the code is shown below. The log shows that the relationship defined using the aria-owns attribute is reflected in the ariaOwnsElements property (elements in the array match the attribute element references).

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4