3

I am using tree component. Problem is that when I select any item in the tree then that item is highlighted. But as soon as I click at any other place on the screen highlight is removed. Tree element remain selected. You can see the working code here playground.

Edit: Above code is also behaving differently in different browsers. In chrome and edge (use chromium) above code doesn't work. But in safarai and Firefox it is working fine.

In Firefox whenever we select any item aria-selected attribute on that lightning-tree-item becomes true. when we select any item on chrome aria-setsize attribute becomes true. enter image description here

enter image description here

Is there any way we can keep the selected item highlighted in chrome also.

2

3 Answers 3

1

As mentioned in the previous answer from Eugene Kashida that we will have to wait for the chrome to fix it.

There is still one workaround that will fix it in case it is critical for you. Note it is a workaround till chrome fixes it.

The tree component and tree-item component is completely open source.

You can use these in your orgs except modify these two lines in the treeItem.js file

You might need to import few labels(lightning_LightningTree_expandBranch,lightning_LightningTree_collapseBranch) and also few private components(utilsPrivate,utils,c-primitive-icon) and everything is in the repository.

Once you have it in your org, change below lines

makeChildFocusable(childKey, shouldFocus) {
    const child = this.getImmediateChildItem(childKey);
    if (child) {
        if (child.tabIndex !== '0') {
            child.tabIndex = '0';
        }
        if (shouldFocus) {
            child.focus();
        }
        child.setAttribute('aria-selected', true);
        //child.ariaSelected = true;
    }
}

makeChildUnfocusable() {
    //this.ariaSelected = 'false';
    this.setAttribute('aria-selected', false);
    this.removeAttribute('tabindex');
}

Notice the commented lines and new line using setAttribute

In your component instead of using lightning namespace you will use c namespace

<template>
<div class="slds-m-top_medium slds-m-bottom_x-large background">
    <h2 class="slds-text-heading_medium slds-m-bottom_medium">
        Tree component with a few levels of depth. Click on the arrow icons to expand or collapse a branch.
    </h2>

    <!-- Simple -->
    <div class="slds-p-around_medium lgc-bg">
        <c-tree items={items} header="Roles"></c-tree>
    </div>
</div>

Once chrome fixes it, replace with lightning namespace.

2

Thanks for bringing this issue to light!

This is a bug in Chrome that was exposed due to AOM features being turned on recently: https://www.chromestatus.com/feature/5962105603751936

The bug (https://bugs.chromium.org/p/chromium/issues/detail?id=914469) has been addressed so we're going to wait for Chrome to ship the fix instead of attempting any workarounds.

Our tests (https://github.com/salesforce/lwc/pull/1819) also caught this issue so we've temporarily disabled them.

1
  • Thanks @eugene for help May 5, 2020 at 7:18
0

Well, I don't think that the issue is with the chrome or edge. It is likely an error with the component implementation which relies on aria-selected attribute to provide the left blue border. According to the specs of the aria-selected property it should be used in the following roles.

gridcell
option
row
tab. 

This attribute is used with single-selection and multiple-selection widgets:

  • Single-selection containers where the currently focused item is not selected. The selection normally follows the focus and is managed by the user agent.
  • Multiple-selection containers. Authors SHOULD ensure that any selectable descendant of a container in which the aria-multiselectable attribute is true specifies a value of either true or false for the aria-selected attribute.

Any explicit assignment of aria-selected takes precedence over the implicit selection based on focus. If no DOM element in the widget is explicitly marked as selected, assistive technologies MAY convey implicit selection which follows the keyboard focus of the managed focus widget


SLDS relying on the aria attributes

.slds-tree [role=treeitem][aria-selected=true]>.slds-tree__item {
    background: rgba(21,137,238,.1);
    -webkit-box-shadow: #1589ee 4px 0 0 inset;
    box-shadow: #1589ee 4px 0 0 inset;
}  
8
  • Do not think this is right. It actually fails only in chromium browsers because it works in firefox. If it was the component issue, it should fail in all browsers. May 4, 2020 at 14:07
  • It works in Opera in desktop and Samsung browser in mobile based on chromium. It fails on some browsers because of how they handle aria attributes.
    – manjit5190
    May 4, 2020 at 14:20
  • So it is an issue with browser now and not component? May 4, 2020 at 14:22
  • It's both actually. The styling should not rely on aria attributes because those are used in assistive technologies so it makes no sense to have border colour for say, a screen reader. That is the component issue. Browsers usually have different implementation for different features. So, simply adding a class name selected in the component at row level should have solved the issue.
    – manjit5190
    May 4, 2020 at 14:26
  • 2
    I checked the engine.js and compiledPreview.js file and it actually adds the attribute to the component but it never makes to DOM. Also, thanks for pointing me to the codebase. I will have a look.
    – manjit5190
    May 4, 2020 at 14:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.