Как сделать элемент скрытым "***" доступным? - PullRequest
Новая
       13

Как сделать элемент скрытым "***" доступным?

0 голосов
/ 17 мая 2019

У меня есть небольшая функциональность, которая скрывает строку подключения, отображая ***.enter image description here

В настоящее время мой код выглядит следующим образом 

<div class="label-wrapper">
    <label class="label">{{label}}</label>

    <button class="value-hide-button"
            (click)="toggleValueHide()"
            *ngIf="_secret"
    >
        <qst-icon class="secret-icon"
                  name="rf-eye"
                  aria-label="Show Secret"
                  title="Show Secret"
                  *ngIf="valueHidden"
        ></qst-icon>

        <qst-icon class="secret-icon"
                  name="rf-eye-closed"
                  aria-label="Hide Secret"
                  title="Hide Secret"
                  *ngIf="!valueHidden"
        ></qst-icon>
    </button>

</div>
<div class="value"
     [ngSwitch]="valueHidden"
>
    <ng-container *ngSwitchCase="true">**********</ng-container>
    <ng-container *ngSwitchCase="false">{{value}}</ng-container>

</div>

Как указать, что значение скрыто с помощью ***?

1 Ответ

1 голос
/ 10 июня 2019

Вы можете использовать <span>, который визуально скрыт, но есть для программ чтения с экрана, которые предоставят им больше информации. Так что вы могли бы сделать
<label class="label">{{label}} <span class="visuallyhidden">The password is hidden for security reasons</span></label>
И используйте type="password" для любых полей ввода

...