Skip to content
This repository has been archived by the owner on Sep 11, 2018. It is now read-only.

US88714 - making use of aria-describedby #8

Closed
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions d2l-text-input.html
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,7 @@
aria-invalid$="[[ariaInvalid]]"
aria-label$="[[ariaLabel]]"
aria-labelledby$="[[ariaLabelledby]]"
aria-describedby$="[[ariaDescribedby]]"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It seems this would suffer from the same issue Rob talks about here in How to Label Shadow DOM - A11ycasts #20. Specifically, how the browser would be looking for an element with this ID in the scope of this shadow-DOM. @dlockhart : looks like we still have aria-labelledby - should we try to remove that?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah you're right -- neither of those will work in shadow-land. If we want to associate labels with the text inputs, we'll unfortunately likely need to incorporate the label itself into the web component. :(

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I created #9 to track this

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So, for describedby, what do you suggest for now? If date-picker kept the native input field (styled to look like a d2l specific one, like we had before) then there wouldn't be an issue am I right? Can we just switch back to that until we have a solution for labels and descriptions that play nicely with shadow-DOM?

autofocus$="[[autofocus]]"
disabled$="[[disabled]]"
list$="[[list]]"
Expand Down