Reach-ui: dialog: handle label automatically

Created on 30 Aug 2018  路  4Comments  路  Source: reach/reach-ui

Dialogs should have aria-label or aria-labelled-by, thinking we could help people out by requiring you render a <DialogLabel>This is the label</DialogLabel>.

If a dialog renders and doesn't find a DialogLabel inside, it could warn in the console.

Internally it could handle generating the ids for the developer and hook up the aria-labelled-by.

Stale Enhancement

Most helpful comment

I like the accessibilityLabel prop approach of React Native[ for Web]

All 4 comments

I like the accessibilityLabel prop approach of React Native[ for Web]

<DialogLabel /> component kinda implies that you can render arbitrary markup inside of it, which, as I understand, is not the idea.

accessibilityLabel Feels like a nice approach here to adopt as a standard across the project. Nice bonus that it will be familiar for native folks.

Was curious if leveraging AlertDialogLabel is valid within a regular Dialog component?

Was this page helpful?
0 / 5 - 0 ratings