-
Notifications
You must be signed in to change notification settings - Fork 258
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor(ui5-*): use unified API to define a11y attributes via `acces…
…sibilityAttributes` (#8810) Unifies the API to define additional a11y attributes cross components. The common approach in all relevant components to define additional a11y attributes is via property `accessibilityAttributes`. BREAKING CHANGE: FlexibleLayout's `accessibilityTexts` and `accessibilityRoles` properties are removed. If you have previously used the `accessibilityTexts` or `accessibilityRoles` properties: ```js fcl.accessibilityTexts = { startColumnAccessibleName: "Products list", midColumnAccessibleName: "Product information", endColumnAccessibleName: "Product detailed information", startArrowLeftText: "Collapse products list", startArrowRightText: "Expand products list", endArrowLeftText: "Expand product detailed information", endArrowRightText: "Collapse product detailed information", startArrowContainerAccessibleName: "Start Arrow Container", endArrowContainerAccessibleName: "End Arrow Container", } fcl.accessibilityRoles = { startColumnRole: "complementary", startArrowContainerRole: "navigation", midColumnRole: "main", endArrowContainerRole: "navigation", endColumnRole: "complementary". } ``` Now use `accessibilityAttributes` instead: ```js fcl.accessibilityAttributes = { startColumn: { role: "complementary", name: "Products list", }, midColumn: { role: "main", name: "Product information", }, endColumn: { role: "complementary", name: "Product detailed information", }, startArrowLeft: { name: "Collapse products list", }, startArrowRight: { name: "Expand products list", }, endArrowLeft: { name: "Expand product detailed information", }, endArrowRight: { name: "Collapse product detailed information", }, startArrowContainer: { role: "navigation", name: "Start Arrow Container", }, endArrowContainer: { role: "navigation", name: "End Arrow Container", }, }; ``` ShellBar's `accessibilityTexts` and `accessibilityRoles` properties are removed. If you have previously used the `accessibilityTexts` or `accessibilityRoles` properties: ```js shellbar.accessibilityTexts = { profileButtonTitle: "John Dow", logoTitle: "Custom logo title", } shellbar.accessibilityRoles = { logoRole: "link" }; ``` Now use `accessibilityAttributes` instead: ```js shellbar.accessibilityAttributes = { profile: { name: "John Dow", }, logo: { role: "link" name: "Custom logo title" }, }; ``` Related to: #8461
- Loading branch information
Showing
50 changed files
with
602 additions
and
388 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,89 @@ | ||
/** | ||
* Defines the ARIA accessible landmark roles. | ||
*/ | ||
enum AriaLandmarkRole { | ||
/** | ||
* No explicit role is applicable. | ||
* | ||
* The interpretation of this value depends on the element which defines a property with this type. | ||
* Normally this value means that no accessible landmark should be written. | ||
* | ||
* @public | ||
*/ | ||
None = "None", | ||
|
||
/** | ||
* The ARIA role <code>banner</code>. | ||
* | ||
* A banner usually appears at the top of the page and typically spans the full width. | ||
* | ||
* @public | ||
*/ | ||
Banner = "Banner", | ||
|
||
/** | ||
* The ARIA role <code>main</code>. | ||
* | ||
* The main content of a page. | ||
* | ||
* @public | ||
*/ | ||
Main = "Main", | ||
|
||
/** | ||
* The ARIA role <code>region</code>. | ||
* | ||
* A section of a page, that is important enough to be included in a page summary or table of contents. | ||
* | ||
* @public | ||
*/ | ||
Region = "Region", | ||
|
||
/** | ||
* The ARIA role <code>navigation</code>. | ||
* | ||
* A region that contains a collection of items and objects that, as a whole, combine to create a navigation facility. | ||
* | ||
* @public | ||
*/ | ||
Navigation = "Navigation", | ||
|
||
/** | ||
* The ARIA role <code>search</code>. | ||
* | ||
* A region that contains a collection of items and objects that, as a whole, combine to create a search facility. | ||
* | ||
* @public | ||
*/ | ||
Search = "Search", | ||
|
||
/** | ||
* The ARIA role <code>complementary</code>. | ||
* | ||
* A section of the page, designed to be complementary to the main content at a similar level in the DOM hierarchy. | ||
* | ||
* @public | ||
*/ | ||
Complementary = "Complementary", | ||
|
||
/** | ||
* The ARIA role <code>form</code>. | ||
* | ||
* A region that contains a collection of items and objects that, as a whole, combine to create a form. | ||
* | ||
* @public | ||
*/ | ||
Form = "Form", | ||
|
||
/** | ||
* The ARIA role <code>contentinfo</code>. | ||
* | ||
* A region that contains information about the content on the page. | ||
* | ||
* @public | ||
*/ | ||
ContentInfo = "ContentInfo" | ||
|
||
} | ||
|
||
export default AriaLandmarkRole; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,31 @@ | ||
/** | ||
* Types of ARIA roles. | ||
* @public | ||
*/ | ||
enum AriaRole { | ||
/** | ||
* The ARIA role "alertdialog". | ||
* @public | ||
*/ | ||
AlertDialog = "AlertDialog", | ||
|
||
/** | ||
* The ARIA role "button". | ||
* @public | ||
*/ | ||
Button = "Button", | ||
|
||
/** | ||
* The ARIA role "dialog". | ||
* @public | ||
*/ | ||
Dialog = "Dialog", | ||
|
||
/** | ||
* The ARIA role "link". | ||
* @public | ||
*/ | ||
Link = "Link", | ||
} | ||
|
||
export default AriaRole; |
Oops, something went wrong.