Skip to content
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

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

Draft
wants to merge 2 commits into
base: main
Choose a base branch
from
+45 −6
Draft

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

Changes from all commits
Commits
Show all changes
2 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
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
17 changes: 17 additions & 0 deletions packages/main/src/Bar.ts
View file
Original file line number Diff line number Diff line change
@@ -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
@@ -65,6 +67,16 @@ class Bar extends UI5Element {
@property()
design: `${BarDesign}` = "Header";

/**
* Used to define the role of the bar.
* @private
* @default "Toolbar"
* @since 2.9.0
*
*/
@property()
accessibleRole: `${BarAccessibleRole}` = "Toolbar";

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

@@ -125,6 +138,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();
4 changes: 2 additions & 2 deletions packages/main/src/BarTemplate.tsx
View file
Original file line number Diff line number Diff line change
@@ -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">
22 changes: 22 additions & 0 deletions packages/main/src/types/BarAccessibleRole.ts
View file
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
Original file line number Diff line number Diff line change
@@ -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>