Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(a11y): Multiple accessibility/quality fix #156

Open
wants to merge 1 commit into
base: develop
Choose a base branch
from
Open

feat(a11y): Multiple accessibility/quality fix #156

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
18 changes: 16 additions & 2 deletions src/lottie-player.styles.ts
View file
Open in desktop
Expand Up @@ -10,6 +10,7 @@ export default css`
}

:host {
--lottie-player-background-color: transparent;
--lottie-player-toolbar-height: 35px;
--lottie-player-toolbar-background-color: transparent;
--lottie-player-toolbar-icon-color: #999;
Expand All @@ -24,7 +25,7 @@ export default css`
height: 100%;
}

.main {
.animation-wrapper {
display: flex;
flex-direction: column;
height: 100%;
Expand All @@ -34,8 +35,16 @@ export default css`
.animation {
width: 100%;
height: 100%;
display: flex;
display: flex; background-color:var(--lottie-player-background-color);
}

.animation svg{
width: 100%;
height: 100%;
transform: translate3d(0px, 0px, 0px);
content-visibility: visible;
}

.animation.controls {
height: calc(100% - 35px);
}
Expand All @@ -51,6 +60,7 @@ export default css`

.toolbar button {
cursor: pointer;
align-items: center;
fill: var(--lottie-player-toolbar-icon-color);
display: flex;
background: none;
Expand Down Expand Up @@ -155,6 +165,10 @@ export default css`
background: var(--lottie-player-seeker-track-color);
}

.seeker:focus{
outline: 1px dotted var(--lottie-player-toolbar-icon-hover-color);
outline-offset: 2px;
}
.error {
display: flex;
justify-content: center;
Expand Down
21 changes: 4 additions & 17 deletions src/lottie-player.ts
View file
Open in desktop
Expand Up @@ -104,12 +104,6 @@ export class LottiePlayer extends LitElement {
@property({ type: Boolean })
public autoplay: boolean = false;

/**
* Background color.
*/
@property({ type: String, reflect: true })
public background?: string = "transparent";

/**
* Show controls.
*/
Expand Down Expand Up @@ -509,7 +503,7 @@ export class LottiePlayer extends LitElement {
}

public render(): TemplateResult | void {
const className: string = this.controls ? "main controls" : "main";
const className: string = this.controls ? "animation-wrapper controls" : "animation-wrapper";
const animationClass: string = this.controls
? "animation controls"
: "animation";
Expand All @@ -524,7 +518,6 @@ export class LottiePlayer extends LitElement {
<div
id="animation"
class=${animationClass}
style="background:${this.background};"
>
${this.currentState === PlayerState.Error
? html`<div class="error">⚠️</div>`
Expand Down Expand Up @@ -577,15 +570,13 @@ export class LottiePlayer extends LitElement {
return html`
<div
id="lottie-controls"
aria-label="lottie-animation-controls"
class="toolbar"
>
<button
id="lottie-play-button"
@click=${this.togglePlay}
class=${isPlaying || isPaused ? "active" : ""}
style="align-items:center;"
tabindex="0"
aria-pressed=${isPlaying || isPaused ? "true" : "false"}
aria-label="play-pause"
>
${isPlaying
Expand All @@ -612,8 +603,6 @@ export class LottiePlayer extends LitElement {
id="lottie-stop-button"
@click=${this.stop}
class=${isStopped ? "active" : ""}
style="align-items:center;"
tabindex="0"
aria-label="stop"
>
<svg width="24" height="24" aria-hidden="true" focusable="false">
Expand All @@ -640,15 +629,13 @@ export class LottiePlayer extends LitElement {
aria-valuemax="100"
role="slider"
aria-valuenow=${this.seeker}
tabindex="0"
aria-label="lottie-seek-input"
aria-label="playback-bar"
/>
<button
id="lottie-loop-toggle"
@click=${this.toggleLooping}
class=${this.loop ? "active" : ""}
style="align-items:center;"
tabindex="0"
aria-pressed=${this.loop ? "true" : "false"}
aria-label="loop-toggle"
>
<svg width="24" height="24" aria-hidden="true" focusable="false">
Expand Down