1

Howdie! I am currently developing an LWC that consists of a lightning-datatable with data fetched from an external endpoint. The first column should be an icon (with an alternative text).

I tried to use the iconAlternativeText as described on the documentation but nothing is displayed when I hover over the icon, while the iconLabel property is displayed correctly.

This is the current code I have for the first table column:

const columns = [

      {
        label: "Type",
        fieldName: "",
        initialWidth: 50,
        hideDefaultActions: true,
        cellAttributes: {
          iconName: { fieldName: "type" },
          iconLabel : 'ICON-LABEL',
          iconAlternativeText : 'Alternative text'
        }
      }

Also tried to test this on a playground but the output is the same.

enter image description here

Can anyone lead me to what I am doing wrong here?

Best regards and thank you in advance!

Improve this question

1 Answer 1

Reset to default
3

iconAlternativeText does not work as a hover text but title attribute on lightning-icon does that. Unfortunately, lightning-datatable only supports following 4 attributes to be passed in icon cellAttributes and title is not one of them -

  1. iconName
  2. iconLabel
  3. iconPosition
  4. iconAlternativeText

As far as your implementation is concerned, it's working just fine. You may inspect elements and find out that iconAlternativeText has added following element

<span class="slds-assistive-text">Alternative text</span>

As mentioned here, slds-assistive-text text is picked up by screen readers or similar assistive technologies.

If you really need to show a hover text, you'll have to create custom data type for datatable. Refer "Creating Custom Data Types" here. Hope this helps.

Improve this answer
0

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .