@instructure/ui-a11y-content

---

category: packages

ui-a11y-content

Utility components that help provide a good experience for users who navigate the web with a screen reader or keyboard.

Components

The ui-a11y-content package contains the following components:

• AccessibleContent
• PresentationContent
• ScreenReaderContent

Installation

npm install @instructure/ui-a11y-content

Usage

---
example: false
---
<AccessibleContent
  alt="Alternative text for a screen reader only"
>
  <Text>
    Presentational content goes here
  </Text>
</AccessibleContent>

---
example: false
---
<PresentationContent>
  <Text>
    Presentational content here
  </Text>
</PresentationContent>

---
example: false
---
<ScreenReaderContent>
  This content is not visible.
</ScreenReaderContent>

Changelog

10.6.1 (2024-11-26)

Other

(Experimental) It is now possible to run InstUI 10 on the same page with InstUI v9 and v8. This is useful for e.g. module federation where the host app is running InstUI v8/v9 and the guest app wants to be on the latest version. To make this work specific criteria needs to be met:

• Host app needs to be using InstUI v8/v9
• Host app needs to import the canvas/canvasHighContrast theme before loading the guest app.
• Guest app must use canvasThemeLocal or canvasHighContrastThemeLocal. These are exported from ui-themes and do not have a variables field and a .use() method.
• Guest app's InstUISettingsProvider's theme prop must be set otherwise it will default to a window-level theme
• Overrides specified in global themes are not applied to local themes, you must apply these manually.

These limitations/caveats are necessary to not cause breaking changes, a final iteration of thing change in InstUI v11 will remove some of these limitations.

The following are deprecated and will be removed in InstUI v11:

| Deprecation | What to use instead? | | ------------------------------------------ | -------------------------------------------------------------------------------------------------------- | | canvas.use(), canvasHighContrast.use() | Wrap all your application roots in <InstUISettingsProvider> | | variables field on theme objects | Use the fields from the object above, e.g. use canvas.borders instead of canvas.variables.borders | | @instructure/theme-registry package | This added the deprecated functions above. Wrap all your application roots in <InstUISettingsProvider> |

Bug Fixes

• emotion,shared-types: better TS types for theme objects and their overrides (c790958)
• shared-types,ui-pagination: pagination indicators have spacing and coded as a list for a11y (e6e5a7b)
• ui-date-input: fix DateInput2 not working with NVDA (34fb8e0)
• ui-popover,ui-tooltip: tooltips should close when esc is pressed (d91de1c)
• ui-progress,ui-tag: remove onClick prop from Tag when callback is not provided. Fix Progress dependency mismatch (test-locator) (de22f76)