search

gorork / paper-audio-player

A custom audio player with paper material style
http://nadikun.com/code/paper-audio-player/demo
MIT License
197 stars 59 forks source link

Update to Polymer 2.0 / Hybrid element #45

Open stemuk opened 6 years ago

stemuk commented 6 years ago

It would be great if this awesome element would be updated to Polymer 2.0 or transformed into a Polymer 1/2 Hybrid element. Resources would be available here and here. :+1:

gorork commented 6 years ago

@stemuk Thank you for this suggestion! It's definitely in a roadmap. Would you be looking to participate? :)

valyrie97 commented 6 years ago

@gorork I've started porting the element to a hybrid element, over at marcus13345:polymer-2.0-migration

A few issues have come up:

The test suite references basicPlayer.querySelector('#progress').style.backgroundColor instead of using basicPlayer.$.... I'm not sure if this is by design, but it doesnt seem to play nicely with shadowDOM v1. Ive replaced it wit ha $ reference for now but wanted to double check.

The aria-describedby attribute attached to the host is unable to find the title element, as its hidden by the shadow dom.

gorork commented 6 years ago

@marcus13345 Awesome job you're doing! 👍

Unless the basicPlayer.$... breaks the styling, it should be OK to update it.

What changes do you need to solve the aria-describedby issue?

valyrie97 commented 6 years ago

@gorork

the problem with the aria-describedby attribute is that it is looking for an ID in the accessibility tree, which in its current implementation will completely ignore elements inside of a shadow Root. With Shady DOM, it works fine, as the accessibility tree is still global.

@robdodson any help here?

robdodson commented 6 years ago

I don't know the structure of the element off of the top of my head but you could create a non-visible element inside of the shadow root where you pipe aria-describedby text into it from an attribute or a property. I showed a similar technique for aria-label in this example i think https://www.youtube.com/watch?v=7a6bLXw2lqQ&list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g&index=7