# Feature DREAM-608 - Improve accessibility of shared no-result components

Project: Stream Design System
Status: specified
URL: https://community.openproject.org/work_packages/DREAM-608

## Planning

| Attribute | Value |
| --- | --- |
| Date |  |
| Priority | Medium |
| Target versions | 18.1.0 |
| Sprint |  |
| Backlog bucket |  |
| Votes |  |
| List | a11y report 2026 |
| Roadmap |  |
| Relevance |  |

## OPEN POINTS / FEEDBACK

_No work packages_

## Features and Chunks

_No work packages_

## Bugs and other work packages

_No work packages_

## Technical Details

| Attribute | Value |
| --- | --- |
| Module | Accessibility |
| Feature Flag |  |
| Requires doc change | No |
| Enterprise plan |  |

## Details

| Attribute | Value |
| --- | --- |
| Pull preview |  |
| Mockups |  |
| Accessibility | Yes |

## People

| Attribute | Value |
| --- | --- |
| Assignee |  |
| Accountable |  |
| Product manager |  |
| Developers |  |
| Designer |  |
| Ordered by |  |
| Signed off by |  |
| Interest by |  |

## Estimates and progress

| Attribute | Value |
| --- | --- |
| PD (min) |  |
| PD (max) |  |
| Work |  |
| Labor costs |  |

## Description

**As** a screen reader and keyboard user,

**I want to** understand no-result messages and access their available actions.

**Acceptance criteria**

Implement the changes in the shared helpers/components.

<figure class="table op-uc-figure_align-center op-uc-figure"><table class="op-uc-table"><thead class="op-uc-table--head"><tr class="op-uc-table--row"><th class="op-uc-table--cell op-uc-table--cell_head"><p class="op-uc-p">Component</p></th><th class="op-uc-table--cell op-uc-table--cell_head"><p class="op-uc-p">Required changes</p></th></tr></thead><tbody><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">Rails <code class="op-uc-code">no_results_box</code></p></td><td class="op-uc-table--cell"><p class="op-uc-p">Render the title as <code class="op-uc-code">&lt;h3&gt;</code>, or <code class="op-uc-code">&lt;h4&gt;</code> inside a section headed by <code class="op-uc-code">&lt;h3&gt;</code>. Render the optional description as <code class="op-uc-code">&lt;p&gt;</code> after the heading. Add <code class="op-uc-code">aria-hidden="true"</code> to the decorative icon.</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">Legacy Angular <code class="op-uc-code">op-no-results</code></p></td><td class="op-uc-table--cell"><p class="op-uc-p">Render the title as <code class="op-uc-code">&lt;h4&gt;</code>. Render the optional description as a sibling after the heading, replacing the current <code class="op-uc-code">&lt;div&gt;</code> inside <code class="op-uc-code">&lt;span&gt;</code>.</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">Blankslate Angular <code class="op-uc-code">op-no-results</code></p></td><td class="op-uc-table--cell"><p class="op-uc-p">Add <code class="op-uc-code">aria-hidden="true"</code> to the decorative graph SVG.</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><code class="op-uc-code">BorderBoxListComponent</code></p></td><td class="op-uc-table--cell"><p class="op-uc-p">When <code class="op-uc-code">interactive</code> is omitted, default it to <code class="op-uc-code">true</code> for <code class="op-uc-code">:dynamic</code> and <code class="op-uc-code">false</code> otherwise. Preserve explicit overrides. Use the existing <code class="op-uc-code">role="status"</code> and <code class="op-uc-code">aria-live="polite"</code> behavior.</p></td></tr></tbody></table></figure>

*   Preserve existing text, action destinations, and permission checks. Existing navigation actions must remain `<a href="…">` elements after the message.
    

**Validations**

*   Verify the resulting heading structure and decorative-icon handling with a screen reader.
    
*   Verify existing actions remain keyboard accessible.
    
*   Verify dynamically appearing empty states are announced without moving focus.
    

**WCAG 2.1** **criteria:**

<figure class="table op-uc-figure_align-center op-uc-figure"><table class="op-uc-table"><thead class="op-uc-table--head"><tr class="op-uc-table--row"><th class="op-uc-table--cell op-uc-table--cell_head"><p class="op-uc-p">Criterion</p></th><th class="op-uc-table--cell op-uc-table--cell_head"><p class="op-uc-p">Requirement in this WP</p></th></tr></thead><tbody><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><a class="op-uc-link" href="https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html">1.3.1 Info and Relationships — Level A</a></p></td><td class="op-uc-table--cell"><p class="op-uc-p">Use semantic headings and paragraphs to expose the no-result message’s structure.</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><a class="op-uc-link" href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-content.html">1.1.1 Non-text Content — Level A</a></p></td><td class="op-uc-table--cell"><p class="op-uc-p">Hide decorative icons and SVGs from assistive technology.</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><a class="op-uc-link" href="https://www.w3.org/WAI/WCAG21/Understanding/status-messages.html">4.1.3 Status Messages — Level AA</a></p></td><td class="op-uc-table--cell"><p class="op-uc-p">Announce dynamically appearing no-result messages without moving focus.</p></td></tr></tbody></table></figure>

The validation also covers [2.1.1 Keyboard — Level A](https://www.w3.org/WAI/WCAG21/Understanding/keyboard.html): existing actions must remain keyboard operable.