e94789c8db
- Section buttons, Locate, and Notes in the sidenav are focusable - itemPane section buttons are combined into one focusable group. Those buttons by themselves don't mean anything in the context of keyboard navigation as they just scroll to the section in the itemPane. In fact, having info, abstract, attachments, etc. focusable and announceable by screen readers is just confusing. However, we do want the group of those buttons to be focusable to switch back to zotero-context-pane-item-deck from zotero-context-pane-notes-deck if the notes button in the sidenav is pressed. - sidenav can be reached by tabbing into it from the end of itemPane or via shift-tab from the focused tab - sidenav buttons can be navigated with up/down arrows - notes list in the context pane can be activated via the button in the sidenav and navigated via up/down arrows - use command vs onclick listener for notes list context menus to work with keyboard-triggered clicks as well - focus itemPane when tabs are switched in sidenav
60 lines
918 B
SCSS
60 lines
918 B
SCSS
note-row {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
border-radius: 5px;
|
|
border: 1px solid var(--color-quinary-on-sidepane);
|
|
background: var(--material-background);
|
|
@include focus-ring;
|
|
|
|
&:active {
|
|
background-color: var(--accent-blue10);
|
|
}
|
|
|
|
.head, .body {
|
|
padding: 2px 8px;
|
|
|
|
@include comfortable {
|
|
padding-block: 4px;
|
|
}
|
|
}
|
|
|
|
.head {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
border-bottom: 1px solid var(--fill-quinary);
|
|
|
|
.icon {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.parent-title {
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
color: var(--fill-secondary);
|
|
}
|
|
}
|
|
|
|
.body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
@include comfortable {
|
|
gap: 2px;
|
|
}
|
|
|
|
.note-title {
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.note-date {
|
|
float: right;
|
|
color: var(--fill-secondary);
|
|
}
|
|
}
|
|
}
|