Add ability to set accessibility attributes on the canvas element
localpcguy opened this issue · 1 comments
localpcguy commented
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
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.