Disabled ListItem inside ListView takes focus but does not show focus ring

[Tim Peeters]

Items outside of a ListView are skipped when using keyboard navigation to change the focus. However, a ListItem inside a ListView takes the focus even when it is disabled, but it does not show the focus frame when focused.

For example, execute this QML program:

import QtQuick 2.4
import Ubuntu.Components 1.3

Item {
    width: units.gu(50)
    height: units.gu(50)

    UbuntuListView {
        anchors.fill: parent
        delegate: ListItem {
            enabled: index != 2
            Label {
                anchors.centerIn: parent
                text: parent.enabled ? "enabled" : "disabled"
            }
        }
        model: 5
    }
}

Press TAB to focus on the ListView. Then press the down-cursor-key twice to move the focus down inside the ListView. The focus will be on the disabled item, but not focus frame is visible This is confusing for the user since the focus seems to disappear, and the Item where the focus seems to be (although invisible) cannot be triggered because it is disabled.

Note: When fixing this bug, also test the solution for Horizontal ListViews (and RightToLeft and BottomToTop directions), since I encountered this bug in the scrolling toolbar (in progress) that has a Horizontal, RightToLeft ListView.

==========UX Fix===========

A disabled item should be highlighted but will not be actionable. The colour of the disabled list item with highlight on top will be enough to indicate that it is disabled. Normal focus and selection behaviour should resume for enabled list items.

[Femma (femma)]

Is there anyway of bypassing focus for a disabled item and showing focus immediately for the next available enabled item? This way we don't end up with 'invisible focus'.

[Tim Peeters (tpeeters)]

@Femma that sounds like the best solution, and it is how it currently happens outside of ListViews. I think we need to implement this in our ListView extension.

[Zsombor Egri (zsombi)]

@Tim, @Femma: I guess you meant to scroll to the next enabled/disabled item one by one, right?

[Femma (femma)]

Yes

On Fri, Aug 26, 2016 at 1:05 PM, Zsombor Egri <email address hidden>
wrote:

> @Tim, @Femma: I guess you meant to scroll to the next enabled/disabled
> item one by one, right?
>
> --
> You received this bug notification because you are a bug assignee.
> https://bugs.launchpad.net/bugs/1611327
>
> Title:
> Disabled ListItem inside ListView takes focus but does not show focus
> ring
>
> Status in Ubuntu UX:
> Fix Committed
> Status in ubuntu-ui-toolkit package in Ubuntu:
> In Progress
>
> Bug description:
> Items outside of a ListView are skipped when using keyboard navigation
> to change the focus. However, a ListItem inside a ListView takes the
> focus even when it is disabled, but it does not show the focus frame
> when focused.
>
> For example, execute this QML program:
>
> import QtQuick 2.4
> import Ubuntu.Components 1.3
>
> Item {
> width: units.gu(50)
> height: units.gu(50)
>
> ListView {
> anchors.fill: parent
> delegate: ListItem {
> enabled: index != 2
> Label {
> anchors.centerIn: parent
> text: parent.enabled ? "enabled" : "disabled"
> }
> }
> model: 5
> }
> }
>
> Press TAB to focus on the ListView. Then press the down-cursor-key
> twice to move the focus down inside the ListView. The focus will be on
> the disabled item, but not focus frame is visible This is confusing
> for the user since the focus seems to disappear, and the Item where
> the focus seems to be (although invisible) cannot be triggered because
> it is disabled.
>
> Note: When fixing this bug, also test the solution for Horizontal
> ListViews (and RightToLeft and BottomToTop directions), since I
> encountered this bug in the scrolling toolbar (in progress) that has a
> Horizontal, RightToLeft ListView.
>
> ==========UX Fix===========
>
> Bypass focus for a disabled item and show focus immediately for the
> next available enabled item.
>
> To manage notifications about this bug go to:
> https://bugs.launchpad.net/ubuntu-ux/+bug/1611327/+subscriptions
>

--
Femma Ashraf
UX Design Lead
Product Strategy | Apps | London, UK
Ubuntu.com <http://www.ubuntu.com> | Canonical.com
<http://www.canonical.com>
Mobile [phone]