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