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.

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

Add ability to set accessibility attributes on the canvas element #54

Open
localpcguy opened this issue Feb 24, 2022 · 1 comment
Open

Comments

@localpcguy
Copy link

Wondering about the possibility of an accessibility enhancement to set a couple basic accessibility attributes on the canvas element. Maybe even add them by default (i.e. default to accessible). Right now I'm setting these values on the qr-code component, which isn't really ideal. Thinking something like the following. I'm open to submitting a PR for this.

Default:

<!-- helloWorld = 'Hello World!"' -->
<qr-code [value]="helloWorld"></qr-code>

// Output:
// <canvas ... aria-label="Image of a custom QR code with the following content: {{ helloWorld }}" role="img">

Overrides:

<!-- helloWorld = 'Hello World!"' -->
<qr-code [value]="helloWorld" [ariaLabel]="'Custom aria label text'"></qr-code>

// Output:
// <canvas ... aria-label="Custom aria label text" role="img">
@mnahkies
Copy link
Owner

As a workaround, you could use the directive directly instead?

Eg:

    <canvas *ngIf="value"
            [qrCode]="value"
            [qrCodeErrorCorrectionLevel]="errorCorrectionLevel"
            [qrCodeCenterImageSrc]="centerImageSrc"
            [qrCodeCenterImageWidth]="centerImageSize"
            [qrCodeCenterImageHeight]="centerImageSize"
            [qrCodeMargin]="margin"
            [width]="size"
            [height]="size"
            [darkColor]="darkColor"
            [lightColor]="lightColor"
            aria-label="My aria text"
    >
    </canvas>

It's hard to know how useful it is to have a default - it's probably fine for the common URL data use-case, but could imagine this being very unpleasant (with a screen reader) if the data was binary / a pairing key / etc.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants