ListView bug, thousands of console warning notifications

App Building
,
1

Dear community:

I made this app that runs VERY VERY slowly. I believed that it was a bad management of a nested list view. I think that speed has improved with the new listview component, which now I am trying to use for my 2nd version of the app.

Today, I discovered that this speed thing could be because of another reason other than my bad coding. It may be a bug or something that I am not managing to solve.

I opened the browser console and i get thousands of this notification:
"If you do not provide a visible label, you must specify an aria-label or aria-labelledby attribute for accessibility"

Here you can see a video of how they appear non-stop whenever I do something on the app.
2b39ef60-e6b0-4f1e-9bbc-aab4d6cc4780

I don't know how to debug this. This isnt appearing in retool console. Any ideas???

2

this is something from Retool they'd need to fix or change. the warnings want every html tag to have an aria-label property but since we can't edit the tags we see all the warnings for it. there are little snippets of stuff that can be used to fix this normally, but I don't think we have access to use them:

heres one

myApp.config(['$mdAriaProvider', function ($mdAriaProvider) {
        $mdAriaProvider.disableWarnings();
    }])

and another which is actually Angular, so i really doubt this one is possible

module.directive('translate', function ($interpolate) {
  return {
    priority: 10,
    compile: compile
  };

  function compile (tElement, tAttr) {
    var translate   = tAttr.translate;
    var trValues    = tAttr.translateValues;
    var ariaLabel   = [
      $interpolate.startSymbol(),
      JSON.stringify(translate),
      ' | translate',
      trValues ? (':' + trValues + ' ') : '',
      $interpolate.endSymbol()
    ].join('');
    var interpolate = $interpolate(ariaLabel);

    tAttr.$set('ariaLabel', ariaLabel);

    return function postLink (scope, element, attr) {
      attr.$set('ariaLabel', interpolate(scope));
    };
  }
});

Edit: ok it doesn't want EVERY html tag as some don't need it, but it's close to it XD

1 Like
3

Thanks Bob! I found a workaround... I found out that these warnings appeared because of input components for which I deleted the label. I added the labels back, but I hid them under appearance options. It isn't giving warnings anymore.

The app is still very slow though..... i believe that there is work to do regarding listviews. It gets crazy slow.

4

lol i went wayyy too nerdy, can't believe I didn't think of checking or trying that. I found one, copied it to a new project, used the browser dev tools to add it in and the warning went away. confirmed it, and gave up :laughing: I'ma have to go through a bunch of stuff and see if thats the case for me (i get tons of those things). so ya, my console window and I pre-thank you for saving our sanity :beers:

5

Im glad that it helped you! Maybe this occured to me because I'm kind of basic at coding and tried some other workaround while trying to avoid solving with more complex coding!

6

Hi @ggallese! Glad to hear you solved your issue, but I noticed your message about your app still being very slow. Are you using the new list view or the legacy list view?

7

Hi Victoria, I just finished updating my app to use the new listView. It took me a while since there were new problems that surged when using the new component.

This in particular:

I found a workaround but I think that there are opportunities to improve the listview component with how components inside work.

For example: If i have a list view with 10 items and inside I have 10 texts, if I delete 5 items by editting the variable, the list view shows 5 texts, but when I see the state of the text component, still 10 texts are shown and values are "remembered". This gets worse if you use an input component, because if you delete an item and then insert a "new" one, the new one's values are filled with the previous item's values.

8

Ah yikes. I do see what you’re seeing and appreciate you for bringing this to light. I’ll share this with the team working on List Views. Thank you again!

2 Likes