Disable tabbing through the <pin-keyboard> buttons

This makes the buttons of the <pin-keyboard> element
untabbable. It affects the Chrome OS smart card SAML PIN
screen, the quick_unlock PIN setup screen, the quick_unlock
login keypad in the WebUI user pod.

This should NOT be an accessibility regression, since these
buttons don't provide any extra functionality: i.e., the PIN
can still be directly entered into the input field via other
methods. The change was also approved by the a11y team (see
the attached bug).

This should also resolve some a11y bugs related to these
buttons, because their normal behavior wasn't quite
a11y-friendly (for example, it's hard to deal with the focus,
for which it makes sense to keep it at the pressed button,
but at the same time this confuses ChromeVox and prevents it
from saying "bullet").

Bug: 1043194
Test: start SAML login using a smart card, proceed to the PIN dialog, try to press Tab a few times, verify that the buttons of the PIN keyboard ("1", "2", etc., "backspace") don't get selected
Change-Id: Ic70ac0d4550d969f2f25d79e2a08a432e3b29c82
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2066910Reviewed-by: Alexander Alekseev <alemate@chromium.org>
Commit-Queue: Maksim Ivanov <emaxx@chromium.org>
Cr-Commit-Position: refs/heads/master@{#744324}

ui/webui/resources/cr_components/chromeos/quick_unlock/pin_keyboard.html

@@ -197,19 +197,22 @@
       <div id="rowsContainer">
         <div class="row">
           <cr-button class="digit-button" on-tap="onNumberTap_" value="1"
-              id="digitButton1" disabled="[[disabled]]" circle-ripple>
+              id="digitButton1" disabled="[[disabled]]" circle-ripple
+              custom-tab-index="-1">
             <inner-text class="number">[[i18n('pinKeyboard1')]]</inner-text>
             <inner-text class="letter empty"
                 hidden="[[!enableLetters]]">ABC</inner-text>
           </cr-button>
           <cr-button class="digit-button" on-tap="onNumberTap_" value="2"
-              id="digitButton2" disabled="[[disabled]]" circle-ripple>
+              id="digitButton2" disabled="[[disabled]]" circle-ripple
+              custom-tab-index="-1">
             <inner-text class="number">[[i18n('pinKeyboard2')]]</inner-text>
             <inner-text class="letter"
                 hidden="[[!enableLetters]]">ABC</inner-text>
           </cr-button>
           <cr-button class="digit-button" on-tap="onNumberTap_" value="3"
-              id="digitButton3" disabled="[[disabled]]" circle-ripple>
+              id="digitButton3" disabled="[[disabled]]" circle-ripple
+              custom-tab-index="-1">
             <inner-text class="number">[[i18n('pinKeyboard3')]]</inner-text>
             <inner-text class="letter"
                 hidden="[[!enableLetters]]">DEF</inner-text>
@@ -217,19 +220,22 @@
         </div>
         <div class="row">
           <cr-button class="digit-button" on-tap="onNumberTap_" value="4"
-              id="digitButton4" disabled="[[disabled]]" circle-ripple>
+              id="digitButton4" disabled="[[disabled]]" circle-ripple
+              custom-tab-index="-1">
             <inner-text class="number">[[i18n('pinKeyboard4')]]</inner-text>
             <inner-text class="letter"
                 hidden="[[!enableLetters]]">GHI</inner-text>
           </cr-button>
           <cr-button class="digit-button" on-tap="onNumberTap_" value="5"
-              id="digitButton5" disabled="[[disabled]]" circle-ripple>
+              id="digitButton5" disabled="[[disabled]]" circle-ripple
+              custom-tab-index="-1">
             <inner-text class="number">[[i18n('pinKeyboard5')]]</inner-text>
             <inner-text class="letter"
                 hidden="[[!enableLetters]]">JKL</inner-text>
           </cr-button>
           <cr-button class="digit-button" on-tap="onNumberTap_" value="6"
-              id="digitButton6" disabled="[[disabled]]" circle-ripple>
+              id="digitButton6" disabled="[[disabled]]" circle-ripple
+              custom-tab-index="-1">
             <inner-text class="number">[[i18n('pinKeyboard6')]]</inner-text>
             <inner-text class="letter"
                 hidden="[[!enableLetters]]">MNO</inner-text>
@@ -237,19 +243,22 @@
         </div>
         <div class="row">
           <cr-button class="digit-button" on-tap="onNumberTap_" value="7"
-              id="digitButton7" disabled="[[disabled]]" circle-ripple>
+              id="digitButton7" disabled="[[disabled]]" circle-ripple
+              custom-tab-index="-1">
             <inner-text class="number">[[i18n('pinKeyboard7')]]</inner-text>
             <inner-text class="letter"
                 hidden="[[!enableLetters]]">PQRS</inner-text>
           </cr-button>
           <cr-button class="digit-button" on-tap="onNumberTap_" value="8"
-              id="digitButton8" disabled="[[disabled]]" circle-ripple>
+              id="digitButton8" disabled="[[disabled]]" circle-ripple
+              custom-tab-index="-1">
             <inner-text class="number">[[i18n('pinKeyboard8')]]</inner-text>
             <inner-text class="letter"
                 hidden="[[!enableLetters]]">TUV</inner-text>
           </cr-button>
           <cr-button class="digit-button" on-tap="onNumberTap_" value="9"
-              id="digitButton9" disabled="[[disabled]]" circle-ripple>
+              id="digitButton9" disabled="[[disabled]]" circle-ripple
+              custom-tab-index="-1">
             <inner-text class="number">[[i18n('pinKeyboard9')]]</inner-text>
             <inner-text class="letter"
                 hidden="[[!enableLetters]]">WXYZ</inner-text>
@@ -258,7 +267,8 @@
         <div class="row bottom-row">
           <div class="digit-button"></div>
           <cr-button class="digit-button" on-tap="onNumberTap_" value="0"
-              id="digitButton0" disabled="[[disabled]]" circle-ripple>
+              id="digitButton0" disabled="[[disabled]]" circle-ripple
+              custom-tab-index="-1">
             <inner-text class="number">[[i18n('pinKeyboard0')]]</inner-text>
             <inner-text class="letter"
                 hidden="[[!enableLetters]]">+</inner-text>
@@ -271,7 +281,8 @@
               on-pointerout="clearAndReset_"
               on-pointerup="onBackspacePointerUp_"
               on-contextmenu="onBackspaceContextMenu_"
-              title="[[i18n('pinKeyboardDeleteAccessibleName')]]">
+              title="[[i18n('pinKeyboardDeleteAccessibleName')]]"
+              custom-tab-index="-1">
           </cr-icon-button>
         </div>
       </div>