mnahkies / ng-qrcode

Easy to use AOT compatible QR code generator for Angular projects.
https://mnahkies.github.io/ng-qrcode/
MIT License
52 stars 9 forks source link

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

Open localpcguy opened 2 years ago

localpcguy commented 2 years ago

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 commented 2 years ago

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.