Skip to content
GitLab
Verified Commit c8772969 authored by Carl Schwan's avatar Carl Schwan 🚴
Browse files

Improve accessibility of sidebar 

Now with just tab and space, most actions can be executed and the menu
items have a focus element
parent 07081848
Pipeline #97568 passed with stage
in 7 minutes and 7 seconds
Hide whitespace changes
Inline Side-by-side
src/contents/ui/FilterHeader.qml
View file @ c8772969
......@@ -81,8 +81,8 @@ RowLayout {
headingItem.color: headerLayout.todoMode && headerLayout.filterCollectionDetails ?
headerLayout.filterCollectionDetails.color : Kirigami.Theme.textColor
icon.name: "edit-delete-remove"
onClicked: headerLayout.removeFilterTag(modelData)
actionIcon.name: "edit-delete-remove"
actionText: i18n("Remove filtering tag")
}
}
......
src/contents/ui/Sidebar.qml
View file @ c8772969
......@@ -329,23 +329,28 @@ Kirigami.OverlayDrawer {
separatorVisible: false
hoverEnabled: false
visible: TagManager.tagModel.rowCount() > 0
Accessible.name: tagsHeadingItem.expanded ? i18nc('Accessible description of dropdown menu', 'Tags, Expanded') : i18nc('Accessible description of dropdown menu', 'Tags, Collapsed')
Kirigami.Heading { id: headingSizeCalculator }
highlighted: visualFocus
leading: Kirigami.Icon {
implicitWidth: Kirigami.Units.iconSizes.smallMedium
implicitHeight: Kirigami.Units.iconSizes.smallMedium
color: Kirigami.Theme.disabledTextColor
isMask: true
color: tagsHeadingItem.labelItem.color
source: "action-rss_tag"
}
text: i18n("Tags")
labelItem.color: Kirigami.Theme.disabledTextColor
labelItem.color: visualFocus ? Kirigami.Theme.textColor : Kirigami.Theme.disabledTextColor
labelItem.font.pointSize: headingSizeCalculator.headerPointSize(4)
Layout.bottomMargin: Kirigami.Units.largeSpacing
trailing: Kirigami.Icon {
implicitWidth: Kirigami.Units.iconSizes.small
implicitHeight: Kirigami.Units.iconSizes.small
source: tagsHeadingItem.expanded ? 'arrow-up' : 'arrow-down'
isMask: true
color: tagsHeadingItem.labelItem.color
}
onClicked: {
Config.tagsSectionExpanded = !Config.tagsSectionExpanded;
......@@ -371,15 +376,12 @@ Kirigami.OverlayDrawer {
delegate: Tag {
implicitWidth: itemLayout.implicitWidth > tagFlow.width ? tagFlow.width : itemLayout.implicitWidth
text: display
text: model.display
showAction: false
backgroundColor: sidebar.activeTags.includes(display) ? Kirigami.Theme.highlightColor : Kirigami.Theme.backgroundColor
MouseArea {
anchors.fill: parent
enabled: !sidebar.collapsed
onClicked: tagClicked(display)
}
activeFocusOnTab: true
backgroundColor: sidebar.activeTags.includes(model.display) ? Kirigami.Theme.highlightColor : Kirigami.Theme.backgroundColor
enabled: !sidebar.collapsed
onClicked: tagClicked(model.display)
}
}
}
......@@ -395,17 +397,20 @@ Kirigami.OverlayDrawer {
leading: Kirigami.Icon {
implicitWidth: Kirigami.Units.iconSizes.smallMedium
implicitHeight: Kirigami.Units.iconSizes.smallMedium
color: Kirigami.Theme.disabledTextColor
isMask: true
source: "view-calendar"
isMask: true
color: calendarHeadingItem.labelItem.color
}
text: i18n("Calendars")
labelItem.color: Kirigami.Theme.disabledTextColor
highlighted: visualFocus
labelItem.color: visualFocus ? Kirigami.Theme.textColor : Kirigami.Theme.disabledTextColor
labelItem.font.pointSize: headingSizeCalculator.headerPointSize(4)
trailing: Kirigami.Icon {
implicitWidth: Kirigami.Units.iconSizes.small
implicitHeight: Kirigami.Units.iconSizes.small
source: calendarHeadingItem.expanded ? 'arrow-up' : 'arrow-down'
isMask: true
color: calendarHeadingItem.labelItem.color
}
onClicked: {
Config.calendarsSectionExpanded = !Config.calendarsSectionExpanded;
......@@ -428,21 +433,22 @@ Kirigami.OverlayDrawer {
roleValue: true
Kirigami.BasicListItem {
id: calendarSourceHeading
label: display
labelItem.color: Kirigami.Theme.disabledTextColor
highlighted: visualFocus
labelItem.color: visualFocus ? Kirigami.Theme.textColor : Kirigami.Theme.disabledTextColor
labelItem.font.weight: Font.DemiBold
topPadding: 2 * Kirigami.Units.largeSpacing
Layout.topMargin: 2 * Kirigami.Units.largeSpacing
leftPadding: Kirigami.Settings.isMobile ? Kirigami.Units.largeSpacing * 2 : Kirigami.Units.largeSpacing
hoverEnabled: false
enabled: !sidebar.collapsed
background: Item {}
separatorVisible: false
leading: Kirigami.Icon {
implicitWidth: Kirigami.Units.iconSizes.smallMedium
implicitHeight: Kirigami.Units.iconSizes.smallMedium
color: Kirigami.Theme.disabledTextColor
color: calendarSourceHeading.labelItem.color
isMask: true
source: model.decoration
}
......@@ -452,6 +458,8 @@ Kirigami.OverlayDrawer {
implicitWidth: Kirigami.Units.iconSizes.small
implicitHeight: Kirigami.Units.iconSizes.small
source: model.kDescendantExpanded ? 'arrow-up' : 'arrow-down'
color: calendarSourceHeading.labelItem.color
isMask: true
}
onClicked: calendarList.model.toggleChildren(index)
......
src/contents/ui/Tag.qml
View file @ c8772969
......@@ -9,10 +9,9 @@ import QtQuick.Layouts 1.15
import QtQuick.Controls 2.15 as QQC2
import org.kde.kirigami 2.15 as Kirigami
Item {
QQC2.AbstractButton {
id: tagRoot
property string text
property alias icon: toolButton.icon
property alias actionIcon: toolButton.icon
property alias actionText: toolButton.text
property bool showAction: true
property bool isHeading: false
......@@ -20,7 +19,6 @@ Item {
property alias labelItem: label
property alias headingItem: heading
property color backgroundColor: Kirigami.Theme.backgroundColor
signal clicked()
implicitWidth: layout.implicitWidth
implicitHeight: layout.implicitHeight
......@@ -28,54 +26,56 @@ Item {
Kirigami.Theme.colorSet: Kirigami.Theme.View
Kirigami.Theme.inherit: false
Rectangle {
id: mainBg
anchors.fill: parent
anchors.leftMargin: pointyBit.anchors.leftMargin + pointyBit.width / 2 - radius / 2
radius: 3
color: tagRoot.backgroundColor
border.color: Kirigami.ColorUtils.tintWithAlpha(Kirigami.Theme.backgroundColor,
background: Item {
Rectangle {
id: mainBg
anchors.fill: parent
anchors.leftMargin: pointyBit.anchors.leftMargin + pointyBit.width / 2 - radius / 2
radius: 3
color: tagRoot.backgroundColor
border.color: tagRoot.visualFocus ? Kirigami.Theme.highlightColor
: Kirigami.ColorUtils.tintWithAlpha(Kirigami.Theme.backgroundColor,
Kirigami.Theme.textColor,
0.3)
border.width: 1
}
Rectangle {
id: pointyBit
antialiasing: true
rotation: 45
y: (parent.height - height) / 2
anchors.left: parent.left
anchors.leftMargin: y + radius / 2
// `parent.height * Math.cos(radians)` fits a rotated square inside the parent.
// `rotation * (Math.PI / 180)` is rotation in radians instead of degrees.
// `Math.PI / 4` is 45 degrees. 180 / 4 is 45.
// `height + radius / 2` accounts for the rounded corners reducing visual size.
height: parent.height * Math.cos(Math.PI / 4) + radius / 2
width: height
color: mainBg.color
border.width: 1
border.color: mainBg.border.color
radius: 3
}
Rectangle {
id: borderCover
antialiasing: true
anchors {
left: parent.left
top: parent.top
bottom: parent.bottom
leftMargin: pointyBit.anchors.leftMargin + pointyBit.width / 2
margins: mainBg.border.width
border.width: 1
}
Rectangle {
id: pointyBit
antialiasing: true
rotation: 45
y: (parent.height - height) / 2
anchors.left: parent.left
anchors.leftMargin: y + radius / 2
// `parent.height * Math.cos(radians)` fits a rotated square inside the parent.
// `rotation * (Math.PI / 180)` is rotation in radians instead of degrees.
// `Math.PI / 4` is 45 degrees. 180 / 4 is 45.
// `height + radius / 2` accounts for the rounded corners reducing visual size.
height: parent.height * Math.cos(Math.PI / 4) + radius / 2
width: height
color: mainBg.color
border.width: 1
border.color: mainBg.border.color
radius: 3
}
Rectangle {
id: borderCover
antialiasing: true
anchors {
left: parent.left
top: parent.top
bottom: parent.bottom
leftMargin: pointyBit.anchors.leftMargin + pointyBit.width / 2
margins: mainBg.border.width
}
width: height
color: mainBg.color
radius: mainBg.radius - mainBg.border.width
}
width: height
color: mainBg.color
radius: mainBg.radius - mainBg.border.width
}
RowLayout {
contentItem: RowLayout {
id: layout
spacing: Math.round(label.Layout.leftMargin - (toolButton.implicitWidth - toolButton.icon.width))
anchors.fill: parent
QQC2.Label {
id: label
verticalAlignment: Text.AlignVCenter
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment