chromium/ash/webui/shortcut_customization_ui/resources/js/accelerator_subsection.html

<style include="shortcut-customization-shared">
  #container {
    border-spacing: 0;
    width: var(--cr-toolbar-field-width);
  }

  #title {
    align-items: center;
    color: var(--cros-text-color-primary);
    display: flex;
    font: var(--cros-body-2-font);
    font-weight: bold;
    height: 48px;
  }

  accelerator-row:not(:last-of-type) {
    border-bottom: var(--cr-separator-line);
  }

  #rowList {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  thead {
    /* Hide the thead elements, since their purpose is for
     * screen readers. */
    display: none;
  }

  #title-container {
    align-items: center;
    display: flex;
  }

  iron-icon[icon='shortcut-customization:lock'] {
    --iron-icon-width: 13px;
    --iron-icon-height: 13px;
  }
</style>

<table id="container" part="container">
    <caption>
      <div id="title-container">
        <div id="title">[[title]]</div>
        <div class="lock-icon-container" hidden="[[!shouldShowLockIcon()]]"
            aria-label="[[i18n('lock')]]" role="img">
          <iron-icon icon="shortcut-customization:lock"></iron-icon>
        </div>
      </div>
    </caption>
    <thead>
      <!-- Empty header rows are used so that ChromeVox correctly interprets
           this table as a data table and not a layout table.-->
      <tr>
        <th scope="col"></th>
        <th scope="col"></th>
      </tr>
    </thead>
    <tbody id="rowList">
      <template id="list" is="dom-repeat" items="[[accelRowDataArray]]">
        <accelerator-row
            accelerator-infos="[[getSortedAccelerators(item.acceleratorInfos)]]"
            action="[[item.layoutInfo.action]]"
            description="[[item.layoutInfo.description]]"
            layout-style="[[item.layoutInfo.style]]"
            source="[[item.layoutInfo.source]]">
        </accelerator-row>
      </template>
    </tbody>
</table>