-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: accessibility issues see details (#178)
* fix: input placeholder and icon contrast * fix; remove unused settings menu entry * feat: scanner-mask component * fix: tab button alert * fix: tab button height
- Loading branch information
1 parent
aabb7f6
commit 759214c
Showing
16 changed files
with
224 additions
and
28 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| :host { | ||
| display: block; | ||
| } | ||
|
|
||
| .viewfinder { | ||
| --s: 50px; | ||
| --t: 8px; | ||
|
|
||
| padding: calc(var(--t)); | ||
| outline-offset: calc(-1 * var(--t)); | ||
| mask: conic-gradient(at var(--s) var(--s), #0000 75%, #000 0) 0 0 / calc(100% - var(--s)) calc(100% - var(--s)), linear-gradient(#000 0 0) content-box; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,77 @@ | ||
| import { Component, Host, h, State, Prop } from '@stencil/core'; | ||
|
|
||
| @Component({ | ||
| tag: 'd-scanner-mask', | ||
| styleUrl: 'd-scanner-mask.css', | ||
| shadow: true, | ||
| }) | ||
| export class DScannerMask { | ||
| @Prop() heading: string; | ||
| @Prop() description: string; | ||
| @State() translateY: number = -138; | ||
| animationDuration = 2000; | ||
|
|
||
| componentDidLoad() { | ||
| this.toggleAnimation(); | ||
| } | ||
|
|
||
| toggleAnimation() { | ||
| const easingFunction = this.quartInOut; | ||
| let start = performance.now(); | ||
|
|
||
| const animate = (time: number) => { | ||
| const progress = Math.min((time - start) / this.animationDuration, 1); // cap at 1 | ||
| const easedProgress = easingFunction(progress); | ||
|
|
||
| // Calculate the translateY value | ||
| this.translateY = -138 + easedProgress * (135 - -138); | ||
|
|
||
| if (progress < 1) { | ||
| requestAnimationFrame(animate); | ||
| } else { | ||
| // Reverse the animation once complete | ||
| setTimeout(() => { | ||
| this.translateY === -138 ? this.animateTo(135) : this.animateTo(-138); | ||
| }, 0); | ||
| } | ||
| }; | ||
|
|
||
| requestAnimationFrame(animate); | ||
| } | ||
|
|
||
| animateTo(value: number) { | ||
| this.translateY = value; | ||
| this.toggleAnimation(); | ||
| } | ||
|
|
||
| quartInOut(t: number) { | ||
| return t < 0.5 ? 8 * t * t * t * t : 1 - Math.pow(-2 * t + 2, 4) / 2; | ||
| } | ||
|
|
||
| render() { | ||
| const style = { | ||
| transform: `translateY(${this.translateY}px)`, | ||
| }; | ||
| return ( | ||
| <Host> | ||
| <div class="visible fixed left-0 top-0 z-40 flex h-screen w-full flex-col items-center justify-center"> | ||
| <div class="bg-surface bg-opacity-70 min-h-24 w-full flex-grow" /> | ||
| <div class="flex h-72 w-full"> | ||
| <div class="max-w-1/4 bg-surface bg-opacity-70 h-full flex-grow" /> | ||
| <div class="viewfinder relative z-50 h-72 w-72 overflow-hidden rounded-md bg-transparent"> | ||
| <div class="absolute left-0 top-0 h-full w-full border-8 border-accent"></div> | ||
| <div class="absolute left-0 top-1/2 h-1 w-full -translate-y-1/2 transform bg-accent" style={style}></div> | ||
| </div> | ||
| <div class="bg-surface bg-opacity-70 h-full flex-grow" /> | ||
| </div> | ||
|
|
||
| <div class="bg-surface bg-opacity-70 w-full flex-grow"> | ||
| <div class="text-center justify-center"> | ||
| <d-page-description title={this.heading} description={this.description} /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </Host> | ||
| ); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| # d-scanner-mask | ||
|
|
||
|
|
||
|
|
||
| <!-- Auto Generated Below --> | ||
|
|
||
|
|
||
| ## Properties | ||
|
|
||
| | Property | Attribute | Description | Type | Default | | ||
| | ------------- | ------------- | ----------- | -------- | ----------- | | ||
| | `description` | `description` | | `string` | `undefined` | | ||
| | `heading` | `heading` | | `string` | `undefined` | | ||
|
|
||
|
|
||
| ## Dependencies | ||
|
|
||
| ### Depends on | ||
|
|
||
| - [d-page-description](../page-description) | ||
|
|
||
| ### Graph | ||
| ```mermaid | ||
| graph TD; | ||
| d-scanner-mask --> d-page-description | ||
| d-page-description --> d-heading | ||
| d-page-description --> d-text | ||
| style d-scanner-mask fill:#f9f,stroke:#333,stroke-width:4px | ||
| ``` | ||
|
|
||
| ---------------------------------------------- | ||
|
|
||
| *Built with [StencilJS](https://stenciljs.com/)* |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| import { Meta, StoryObj } from '@storybook/html'; | ||
| import type { Components } from '../../components.js'; | ||
|
|
||
| const meta = { | ||
| title: 'Design System/MEDIA & ICONS/ScannerMask', | ||
| render: args => `<d-scanner-mask | ||
| ${args.heading ? `heading="${args.heading}"` : ''} | ||
| ${args.description ? `description="${args.description}"` : ''} | ||
| ></d-scanner-mask>`, | ||
| } satisfies Meta<Components.DScannerMask>; | ||
|
|
||
| export default meta; | ||
| type Story = StoryObj<Components.DScannerMask>; | ||
|
|
||
| export const Default: Story = { | ||
| args: { | ||
| heading: 'Heading', | ||
| description: 'Description', | ||
| } | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| import { newE2EPage } from '@stencil/core/testing'; | ||
|
|
||
| describe('d-scanner-mask', () => { | ||
| it('renders', async () => { | ||
| const page = await newE2EPage(); | ||
| await page.setContent('<d-scanner-mask></d-scanner-mask>'); | ||
|
|
||
| const element = await page.find('d-scanner-mask'); | ||
| expect(element).toHaveClass('hydrated'); | ||
| }); | ||
| }); |
33 changes: 33 additions & 0 deletions
33
src/components/d-scanner-mask/test/d-scanner-mask.spec.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| import { newSpecPage } from '@stencil/core/testing'; | ||
| import { DScannerMask } from '../d-scanner-mask'; | ||
|
|
||
| describe('d-scanner-mask', () => { | ||
| it('renders', async () => { | ||
| const page = await newSpecPage({ | ||
| components: [DScannerMask], | ||
| html: `<d-scanner-mask></d-scanner-mask>`, | ||
| }); | ||
| expect(page.root).toEqualHtml(` | ||
| <d-scanner-mask> | ||
| <mock:shadow-root> | ||
| <div class="fixed flex flex-col h-screen items-center justify-center left-0 top-0 visible w-full z-40"> | ||
| <div class="bg-opacity-70 bg-surface flex-grow min-h-24 w-full"></div> | ||
| <div class="flex h-72 w-full"> | ||
| <div class="bg-opacity-70 bg-surface flex-grow h-full max-w-1/4"></div> | ||
| <div class="bg-transparent h-72 overflow-hidden relative rounded-md viewfinder w-72 z-50"> | ||
| <div class="absolute border-8 border-accent h-full left-0 top-0 w-full"></div> | ||
| <div class="-translate-y-1/2 absolute bg-accent h-1 left-0 top-1/2 transform w-full" style="transform: translateY(-138px);"></div> | ||
| </div> | ||
| <div class="bg-opacity-70 bg-surface flex-grow h-full"></div> | ||
| </div> | ||
| <div class="bg-opacity-70 bg-surface flex-grow w-full"> | ||
| <div class="justify-center text-center"> | ||
| <d-page-description></d-page-description> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </mock:shadow-root> | ||
| </d-scanner-mask> | ||
| `); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.