ng-qrcode icon indicating copy to clipboard operation
ng-qrcode copied to clipboard

Add ability to set accessibility attributes on the canvas element

Open localpcguy opened this issue 3 years ago • 1 comments

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">

localpcguy avatar Feb 24 '22 22:02 localpcguy

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.

mnahkies avatar Jun 16 '22 10:06 mnahkies