Report aria-label's on UI elements #1467

Activity

1. alexbowers commented on Aug 9, 2018

   

   alexbowers

   on Aug 9, 2018

   Author

   More actions

   I tried making a change to the raven-js but can't seem to get it working, can anyone guide me in the right direction?

   The test

   it('should record record an aria-label if one is present', function(done) {
         var iframe = this.iframe;
   
         iframeExecute(
           iframe,
           done,
           function() {
             setTimeout(done);
   
             // some browsers trigger onpopstate for load / reset breadcrumb state
             Raven._breadcrumbs = [];
   
             // add an event listener to the input. we want to make sure that
             // our breadcrumbs still work even if the page has an event listener
             // on an element that cancels event bubbling
             var input = document.getElementsByTagName('input')[0];
   
             var clickHandler = function(evt) {
               evt.stopPropagation(); // don't bubble
             };
             input.addEventListener('click', clickHandler);
   
             // click <input/>
             var click = new MouseEvent('click');
             input.dispatchEvent(click);
           },
           function() {
             var Raven = iframe.contentWindow.Raven,
               breadcrumbs = Raven._breadcrumbs;
   
             assert.equal(breadcrumbs.length, 1);
   
             assert.equal(breadcrumbs[0].category, 'ui.click');
   
             assert.equal(
               breadcrumbs[0].message,
               'body > form#foo-form > input[name="foo"][aria-label="This is the aria-label"]'
             );
           }
         );
       });
   

   I updated frame.html to have

   <input name="foo" placeholder="lol" aria-label="This is the aria-label" />
   

   As the input element

   and I updated utils/misc.ts to have

   const attrWhitelist = ['type', 'name', 'title', 'alt', 'aria-label'];
   

   in the htmlElementAsString function.

   But it isn't working, any ideas where I've gone wrong on this?
2. alexbowers commented on Aug 9, 2018

   

   alexbowers

   on Aug 9, 2018

   Author

   More actions

   On a second note, how do you debug and test these tests, because console logging doesn't seem to work for me.
3. HazAT commented on Aug 10, 2018

   

   HazAT

   on Aug 10, 2018

   Member

   More actions

   Please consider adding new functionality to this package https://github.com/getsentry/sentry-javascript/tree/master/packages/browser
   since this will be our new SDK for the future.

   There is this integration which handles breadcrumbs.
   https://github.com/getsentry/sentry-javascript/blob/master/packages/browser/src/integrations/breadcrumbs.ts
4. alexbowers commented on Aug 10, 2018

   

   alexbowers

   on Aug 10, 2018

   Author

   More actions

   I am still having the same issues where changing htmlElementAsString which is still being used by

   https://github.com/getsentry/sentry-javascript/blob/master/packages/browser/src/integrations/helpers.ts#L124

   I can't get it to recognise aria-label being in the whitelist, however i am struggling to test this too because I can't find out how to debug the tests.
5. alexbowers commented on Aug 12, 2018

   

   alexbowers

   on Aug 12, 2018

   Author

   More actions

   @HazAT I've been trying to get this working over the weekend, but have not had any luck.

   Can you guide me at all in how to go about debugging the tests, since I can't see what any elements have with console logs etc because I can't see the actual console.log lines at all when running the tests.
6. kamilogorek commented on Sep 4, 2018

   

   kamilogorek

   on Sep 4, 2018

   Last edited by kamilogorek

   Contributor

   More actions

   It's doable through breadcrumb hints now.

   init({
     dsn: 'https://some.dsn/123',
     beforeBreadcrumb (breadcrumb, hint) {
       if (breadcrumb.category === 'ui.click') {
         const target = hint.event.target;
         if (target.ariaLabel) breadcrumb.message = target.ariaLabel;
       }
       return breadcrumb;
     }
   })

   Soooo eaaaassssyyyy :D

   ❤️React with ❤️3Reacted by Enrico Lamperti, Ali Raza Sharafat and Diego
7. kamilogorek

   closed this as completedon Sep 4, 2018