GSoC 2021 - Week-7: Improving Accessibility For the Visually Impaired

Posted 2 years ago

Greetings!
I hope everyone is staying safe and doing well. :)

I spent most of this week completing the Navigation Control Border issue assigned to me on GitHub. The borders around highlighted elements were drawn on the inside of the element. This interfered with the new High Contrast Black and High Contrast White themes, inside which elements are also drawn with borders on the inside.

To fix this, I added the following snippet of code to the background rectangles of a lot of QML elements:

Rectangle {
            id: navCtrlBorderRect

            height: parent.height + ui.theme.navCtrlBorderWidth*2
            width: parent.width + ui.theme.navCtrlBorderWidth*2

            anchors.verticalCenter: parent.verticalCenter
            anchors.horizontalCenter: parent.horizontalCenter

            color: "transparent"
            radius: parent.radius + navCtrlBorderRect.border.width

            border.width: navCtrl.active ? ui.theme.navCtrlBorderWidth : 0
            border.color: ui.theme.fontPrimaryColor
        }

This piece of code creates a secondary rectangle which is the same size as the parent background rectangle, with a few added pixels to accommodate the new external border style, which is dedicated for the navCtrl Borders. Its dependent on the values of its parent, and the newly added navCtrlBorderWidth variable, which allows me to make changes to the border width in a single place, and have that change resonated in all the files.

This snippet worked with a lot of elements right off the bat, which allowed me to copy and paste it in a lot of files. I've been able to successfully test the working of this too, with promising results almost everywhere.

However, there is a slight hitch. In some places, the elements are so scrunched together that the border (which is now drawn outside the main rectangle) isn't visible at all, because of not having space, or being overlapped by another element instead.
Perhaps this could be remedied by having special behavior for some elements where we draw the border even further inside... because changing the padding/margins of elements because of this issue may not be the right move. I haven't come up with a solution for this yet.

Added below is also a list of all elements that i have modified:

  • DevTools/KeyNavSection [tested]
  • DevTools/KeyNavSubSection [tested]
  • FlatButton [tested]
  • FlatRadioButton [tested]
  • CheckBox [tested]
  • FocusableControl [couldn't test because its being used in a single place (the additional score info page when creating a new score). The major/minor tabs and their child elements don't take focus at all while navigating with the keyboard, which prevents me from testing this]
  • ScoreItem [tested]
  • Dropdown/DropdownItem [tested]
  • StyledTabButton [tested]
  • TabPanel [tested]
  • DockPanelTab [tested, scrunched]
  • ExpandableBlank [tested, scrunched]

You can keep up with my progress at the following locations:

Comments