ADA-1065-Added aria-labelby attribute to the dialog #896
Conversation
RazvanBrinzoiK05
requested review from
SivanA-Kaltura,
JonathanTGold and
lianbenjamin
| @@ -75,7 +75,7 @@ class MainCaptionsWindow extends Component<any, any> { | |||
| render(props: any): VNode<any> { | |||
| return ( | |||
| <div className={[style.overlayScreen, style.active].join(' ')}> | |||
| <h2 className={style.title}> | |||
| <h2 className={style.title} id="captionsDialogTitle"> | |||
There was a problem hiding this comment.
is there a way to avoid using id ?
id should be unique for the page, but we can have multiple players on a single page
There was a problem hiding this comment.
Unfortunately the dialog has a visible title and it must be referenced with aria-labelledby that must point to the title id. If the title would be missing we could've used just an aria-label property that doesn't use id.
Should I find a way to create a dynamic id so that each player has a unique one ?
| @@ -140,7 +140,7 @@ class Overlay extends Component<any, any> { | |||
| } | |||
|
|
|||
| return ( | |||
| <div tabIndex={-1} className={overlayClass.join(' ')} role="dialog" onKeyDown={this.onKeyDown} aria-label={label}> | |||
| <div tabIndex={-1} className={overlayClass.join(' ')} role="dialog" onKeyDown={this.onKeyDown} aria-labelledby="captionsDialogTitle"> | |||
There was a problem hiding this comment.
does tooltip still work if aria-label is removed ?
There was a problem hiding this comment.
Yes, works the same as before.
| @@ -138,7 +138,6 @@ class CVAAOverlay extends Component<any, any> { | |||
| addAccessibleChild={this.props.addAccessibleChild} | |||
| onClose={props.onClose} | |||
| type="cvaa" | |||
| label={props.cvvaDialogText} | |||
There was a problem hiding this comment.
The label was passed as a prop just for the aria-label property that was replaced.
Description of the Changes
Issue:
Accessibility change that was required for announcing the dialog according to it's title.
Fix:
Added aria-labelledby to associate the dialog with the descriptive title, improving accessibility for screen reader users.
Resolves ADA-1065