Calcite Design System

In React 18 and earlier, the synthetic event system does not support custom events emitted by web components.

Option 1: Using @esri/calcite-components-react (Recommended) The React wrappers bridge these events for you, allowing you to use them as standard props (e.g., onCalciteSliderUpdate).

Option 2: Using Web Components directly If you use the raw web components instead of the wrappers, you must manually manage a ref and add an event listener inside a useEffect hook.

// Using the React wrapper (Recommended)
const [sliderValue, setSliderValue] = useState(50);
<CalciteSlider onCalciteSliderUpdate={(e) => setSliderValue(e.target.value)} />

// Using raw web components (Manual approach)
const sliderEl = useRef(null);
const [sliderValue, setSliderValue] = useState(50);

function onUpdate(event) {
  setSliderValue(event.target.value);
}

useEffect(() => {
  sliderEl.current.addEventListener("calciteSliderUpdate", onUpdate);
}, [sliderEl]);

The menu role provides a list of choices, typically common actions or functions. It is appropriate when items are presented similarly to a desktop application menu. Elements within a menu have an implicit aria-orientation of vertical.

Note: Authors should manage the focus of descendants for all instances of this role.

Keyboard Functionality

<!-- Menu role example -->
<div class="dropdown">
  <button type="button" id="dropdown-menu">
    Actions
    <span class="caret"></span>
  </button>
  <!-- Selection mode: Single -->
  <ul role="menu">
    Create
    <li role="menuitemradio" class="dropdown-item">Event</li>
    <li role="menuitemradio" class="dropdown-item" aria-checked="true">Survey</li>
    <li role="menuitemradio" class="dropdown-item">Poll</li>
  </ul>
  <ul class="dropdown-separator" role="separator"></ul>
  <!-- Selection mode: Multi -->
  <ul role="menu">
    Save
    <li role="menuitemcheckbox" class="dropdown-item">Save</li>
    <li role="menuitemcheckbox" class="dropdown-item">Duplicate</li>
  </ul>
</div>

The treegrid role identifies a grid where rows can be expanded and collapsed, similar to a tree. This is useful for complex data sets that have hierarchical relationships.

Implementation Requirements

• The container element (e.g., <table>) must have role="treegrid".
• Rows must use role="row".
• Cells must use role="gridcell".
• To support hierarchy, rows must use:
  • aria-level: The depth of the row in the hierarchy.
  • aria-posinset: The position of the row within its parent.
  • aria-setsize: The total number of siblings at this level.
  • aria-expanded="true"|"false": To indicate if the row can be expanded/collapsed.

Note: It is critical that all cells are capable of receiving or containing keyboard focus. Because screen readers often operate in 'application mode' when interacting with grids, they may only announce focusable elements. If content is not focusable, it may be skipped by screen reader users.

<!-- Treegrid role example -->
<table id="treegrid" role="treegrid" aria-label="Project hours">
  <colgroup>
    <col id="treegrid-column1" />
    <col id="treegrid-column2" />
  </colgroup>
  <thead>
    <tr>
      <th scope="col">Project Name</th>
      <th scope="col">Hours Done</th>
    </tr>
  </thead>
  <tbody>
    <tr role="row" aria-level="1" aria-posinset="1" aria-setsize="1" aria-expanded="true">
      <td role="gridcell">All Projects</td>
      <td role="gridcell">360</td>
    </tr>
    <tr role="row" aria-level="2" aria-posinset="1" aria-setsize="3" aria-expanded="false">
      <td role="gridcell">Year 2010</td>
      <td role="gridcell">56</td>
    </tr>
    <tr role="row" aria-level="2" aria-posinset="1" aria-setsize="3" aria-expanded="true">
      <td role="gridcell">Year 2011</td>
      <td role="gridcell">188</td>
    </tr>
    <tr role="row" aria-level="3" aria-posinset="1" aria-setsize="3" aria-expanded="false">
      <td role="gridcell">Q1</td>
      <td role="gridcell">30</td>
    </tr>
    <tr role="row" aria-level="3" aria-posinset="1" aria-setsize="3" aria-expanded="true">
      <td role="gridcell">Q2</td>
      <td role="gridcell">95</td>
    </tr>
    <tr role="row" aria-level="4" aria-posinset="1" aria-setsize="1">
      <td role="gridcell">Website Re-brand</td>
      <td role="gridcell">95</td>
    </tr>
  </tbody>
</table>