Skip to content

Commit

Permalink
HLD: Accessible labels and localization in Nimble (#1272)
Browse files Browse the repository at this point in the history
# Pull Request

## 🀨 Rationale

#1090

## πŸ‘©β€πŸ’» Implementation

N/A (HLD and doc updates)

## πŸ§ͺ Testing

N/A

## βœ… Checklist

- [x] I have updated the project documentation to reflect my changes or
determined no changes are needed.
  • Loading branch information
msmithNI authored Jun 14, 2023
1 parent 1d9d8b9 commit c3df12b
Show file tree
Hide file tree
Showing 3 changed files with 326 additions and 2 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "none",
"comment": "Update docs (accessible labels for button/banner/icons)",
"packageName": "@ni/nimble-components",
"email": "[email protected]",
"dependentChangeType": "none"
}
17 changes: 15 additions & 2 deletions packages/nimble-components/docs/accessibility.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,5 +26,18 @@ When setting [ARIA attributes](https://developer.mozilla.org/en-US/docs/Web/Acce

# Component-specific accessiblity notes

## nimble-button
When using the `nimble-button` with only an icon, `contentHidden` should be set to `true` and text content should be provided within the button even though it will not be visible on the screen. The button will use the text content to configure the appropriate ARIA attributes internally to ensure the button is adequately accessible with a screen reader.
## Buttons
`nimble-button`, `nimble-anchor-button`, `nimble-menu-button`, `nimble-toggle-button`

When using the Nimble buttons with only an icon, `contentHidden` should be set to `true` and text content should be provided within the button even though it will not be visible on the screen. The button will use the text content to configure the appropriate ARIA attributes internally to ensure the button is adequately accessible with a screen reader.

## nimble-banner
When using `nimble-banner`, the title content should always be provided for accessibility. To hide the title visually, `titleHidden` can be set to `true`.

## nimble-dialog
When using `nimble-dialog`, the title content should always be provided for accessibility. To hide the title visually, `headerHidden` can be set to `true`.

## Icons
When using an icon standalone, the `title` attribute should usually be set, to provide accessible text (which will also show as a tooltip).

When using an icon as the content of a Nimble button, place the icon in the `start` slot, and follow the button guidance above.
Loading

0 comments on commit c3df12b

Please sign in to comment.