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

Jump to bottom

POC: button aria-labelledby #1446

Merged
merged 3 commits into from
Apr 13, 2020
Merged

POC: button aria-labelledby #1446

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9157ba4
POC: button aria-labelledby
fifoosid Apr 8, 2020
8698ff3
fix docs
fifoosid Apr 8, 2020
a21cf03
implement findNodeOwner
fifoosid Apr 13, 2020
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
1 change: 1 addition & 0 deletions packages/main/src/Button.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
tabindex={{tabIndexValue}}
aria-expanded="{{accInfo.ariaExpanded}}"
aria-controls="{{accInfo.ariaControls}}"
aria-label="{{ariaLabelledByText}}"
title="{{accInfo.title}}"
part="button"
>
Expand Down
32 changes: 32 additions & 0 deletions packages/main/src/Button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,6 +128,18 @@ const metadata = {
type: Boolean,
},

/**
* Receives id(or many ids) of the elements that label the button
* @type {String}
* @defaultvalue ""
* @private
* @since 1.0.0-rc.7
*/
ariaLabelledby: {
type: String,
defaultValue: "",
},

/**
* Indicates if the element if focusable
* @private
Expand Down Expand Up @@ -315,6 +327,26 @@ class Button extends UI5Element {
};
}

get ariaLabelledByText() {
if (!this.ariaLabelledby) {
return undefined;
}

const ids = this.ariaLabelledby.split(" ");
let result = "";

ids.forEach((elementId, index) => {
const element = document.querySelector(`#${elementId}`);
Copy link
Contributor

Choose a reason for hiding this comment

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

This should not be the document, but the HTML document of the ui5-button itself. It may be an iframe, a shadow root, etc...
Otherwise when you have ui5-button in a shadow root for example this won't work.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Done

Copy link

@ee92 ee92 Apr 17, 2020 •
edited
Loading

Choose a reason for hiding this comment

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

This line should be:

const element = owner.querySelector(`[id='${elementId}']`);

Otherwise it causes this error

DOMException: Failed to execute 'querySelector' on 'Element': '#itemCollection:13:b906ffa3-face-419d-81e6-967147bf9ff1-groupLabel' is not a valid selector.

for some id's

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Fixed in #1500

result += `${element ? element.textContent : ""}`;

if (index < ids.length - 1) {
result += " ";
}
});

return result;
}

static typeTextMappings() {
return {
"Positive": BUTTON_ARIA_TYPE_ACCEPT,
Expand Down
7 changes: 4 additions & 3 deletions packages/main/test/pages/Button.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,9 +69,10 @@
<br />
<br />

<ui5-button icon="employee">Action Bar Button</ui5-button>
<ui5-button icon="download"></ui5-button>
<ui5-button icon="download"></ui5-button>
<ui5-label id="download-text">Download Application</ui5-label>
<ui5-label id="download-text2">From This Button</ui5-label>
<ui5-button icon="employee" aria-labelledby="download-text download-text2">Action Bar Button</ui5-button>
<ui5-button icon="download" aria-labelledby="download-text"></ui5-button>


<br/>
Expand Down