Skip to content

feat(ui5-bar): allow role change #11134

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 4 commits into
base: main
Choose a base branch
from
Draft

feat(ui5-bar): allow role change #11134

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5fdaf59
feat(ui5-bar): allow role change
tsanislavgatev Mar 19, 2025
39c8247
fix(ui5-bar): fix acc issues
tsanislavgatev Mar 20, 2025
2997b3c
docs(ui5-bar): add documentation
tsanislavgatev Apr 16, 2025
279f8b0
docs(ui5-bar): remove trailing spaces
tsanislavgatev Apr 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 24 additions & 0 deletions packages/main/src/Bar.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,14 @@ import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
import type BarDesign from "./types/BarDesign.js";
import type BarAccessibleRole from "./types/BarAccessibleRole.js";

// Template
import BarTemplate from "./BarTemplate.js";

// Styles
import BarCss from "./generated/themes/Bar.css.js";
import type { AriaRole } from "@ui5/webcomponents-base/dist/types.js";

/**
* @class
Expand Down Expand Up @@ -65,6 +67,23 @@ class Bar extends UI5Element {
@property()
design: `${BarDesign}` = "Header";

/**
* Specifies the ARIA role applied to the component for accessibility purposes.
*
* **Note:**
*
* - Set accessibleRole to "toolbar" only when the component contains two or more active, interactive elements (such as buttons, links, or input fields) within the bar.
*
* - If there is only one or no active element, it is recommended to avoid using the toolbar role, as it implies a grouping of multiple interactive controls.
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please consider:
"toolbar"

*
* @public
* @default "Toolbar"
* @since 2.10.0
*
*/
@property()
accessibleRole: `${BarAccessibleRole}` = "Toolbar";
Copy link
Contributor

@unazko unazko Mar 28, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We'll need to provide recommendations to the users on how to use this new property.
In the openui5 project the logic is internal and no explanations are required.
Also in order to properly test this ourselves we could provide a dev sample that changes the number of interactive elements at runtime and therefore changes the role accordingly.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've added additional documentation and example. But i've added a static example with just two bars explaining the both cases, because we don't provide dynamic change of the role, so such example wont be needed.


/**
* Defines the content at the start of the bar.
* @public
Expand All @@ -91,6 +110,7 @@ class Bar extends UI5Element {
get accInfo() {
return {
"label": this.design,
"role": this.effectiveRole,
};
}

Expand Down Expand Up @@ -125,6 +145,10 @@ class Bar extends UI5Element {
ResizeHandler.deregister(child as HTMLElement, this._handleResizeBound);
}, this);
}

get effectiveRole() {
return this.accessibleRole.toLowerCase() === "toolbar" ? "toolbar" as AriaRole : undefined;
}
}

Bar.define();
Expand Down
4 changes: 2 additions & 2 deletions packages/main/src/BarTemplate.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@ export default function BarTemplate(this: Bar) {
return (
<div
class="ui5-bar-root"
aria-label={this.accInfo.label}
role="toolbar"
aria-label={this.accInfo.role && this.accInfo.label}
role={this.accInfo.role}
part="bar"
>
<div class="ui5-bar-content-container ui5-bar-startcontent-container" part="startContent">
Expand Down
22 changes: 22 additions & 0 deletions packages/main/src/types/BarAccessibleRole.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
/**
* ListItem accessible roles.
* @public
* @since 2.9.0
*/
enum BarAccessibleRole {

/**
* Represents the ARIA role "toolbar".
* @public
*/
Toolbar = "Toolbar",

/**
* Represents the ARIA role "none".
* @public
*/
None = "None"

}

export default BarAccessibleRole;
8 changes: 4 additions & 4 deletions packages/main/test/pages/Bar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,10 @@

<body class="bar1auto">
<section>
<ui5-bar design="Header">
<ui5-title id="titleElement" slot="startContent">Title</ui5-title>
<ui5-label>Title</ui5-label>
<ui5-button icon="action-settings" tooltip="Go to settings" slot="endContent"></ui5-button>
<ui5-bar design="Header" accessible-role="None">
<ui5-title id="titleElement" slot="startContent">Title</ui5-title>
<ui5-label>Title</ui5-label>
<ui5-button icon="action-settings" tooltip="Go to settings" slot="endContent"></ui5-button>
</ui5-bar>
<ui5-bar design="Subheader">
<ui5-title id="titleElement" slot="startContent">Title</ui5-title>
Expand Down
6 changes: 5 additions & 1 deletion packages/website/docs/_components_pages/main/Bar.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,12 @@
import Basic from "../../_samples/main/Bar/Basic/Basic.md";
import AccessibleRole from "../../_samples/main/Bar/AccessibleRole/AccessibleRole.md";

<%COMPONENT_OVERVIEW%>

## Basic Sample
<Basic />

<%COMPONENT_METADATA%>
<%COMPONENT_METADATA%>

## Bar with accessible role
<AccessibleRole />
4 changes: 4 additions & 0 deletions packages/website/docs/_samples/main/Bar/AccessibleRole/AccessibleRole.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
import html from '!!raw-loader!./sample.html';
import js from '!!raw-loader!./main.js';

<Editor html={html} js={js} />
5 changes: 5 additions & 0 deletions packages/website/docs/_samples/main/Bar/AccessibleRole/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import "@ui5/webcomponents/dist/Button.js";
import "@ui5/webcomponents/dist/Label.js";
import "@ui5/webcomponents/dist/Bar.js";
import "@ui5/webcomponents-icons/dist/home.js"
import "@ui5/webcomponents-icons/dist/action-settings.js"
27 changes: 27 additions & 0 deletions packages/website/docs/_samples/main/Bar/AccessibleRole/sample.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<!-- playground-fold -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sample</title>
</head>
<body style="background-color: var(--sapBackgroundColor)">
<!-- playground-fold-end -->
<ui5-label>Bar with two or more active items:</ui5-label>
<ui5-bar design="Header" accessible-role="Toolbar">
<ui5-button icon="home" tooltip="Go home" design="Transparent" slot="startContent"></ui5-button>
<ui5-label id="basic-label">Content</ui5-label>
<ui5-button icon="action-settings" tooltip="Go to settings" slot="endContent"></ui5-button>
</ui5-bar>
<br>
<ui5-label>Bar with less than two active items:</ui5-label>
<ui5-bar design="Header">
<ui5-label id="basic-label">Storybook title</ui5-label>
</ui5-bar>
<!-- playground-fold -->
<script type="module" src="main.js"></script>
</body>
</html>
<!-- playground-fold-end -->

Loading