☰

a11yInsta

Script criado pra tornar o Instagram mais acessível

// ==UserScript==
// @name         a11yInsta
// @namespace    https://github.com/geanCarneiro/WebAcessivel
// @version      0.4
// @description  Script criado pra tornar o Instagram mais acessível
// @author       Gean G. Carneiro
// @match        https://www.instagram.com/
// @icon         https://www.google.com/s2/favicons?sz=64&domain=instagram.com
// @grant        GM_xmlhttpRequest
// @connect      github.com
// @connect      githubusercontent.com
// ==/UserScript==

(function() {
    'use strict';

    window.onload = function () {
             
        
        

        let observer = new MutationObserver(function(mutations) {
            mutations.forEach(mutation => {
                if(mutation.type == 'childList') {
                    mutation.addedNodes.forEach(node => {
                        updatePost(node)
                    })
                }
            })
        })
        

        waitForElm('main div[style] > div > div:nth-of-type(2) > div').then(elem => {
            let postsArea = elem.querySelector('article[class]')
            postsArea = postsArea.parentNode;

            observer.observe(postsArea, {childList: true})
        })

        
  /*
        window .addEventListener(
            "keydown",
            ( @type {KeyboardEvent}    evt) => {
                 @type {Node} 
                let post = evt.target

                let focusTarget;

                // controles das publicações
                if(post.tagName == 'ARTICLE'){
                    if(evt.altKey && evt.key.toLowerCase() == "l"){
                        evt.preventDefault()
                        evt.stopPropagation()
                        
                        let botaoCurtir = post.querySelector('svg[aria-label="Curtir"]');
                        let curtir = botaoCurtir != null
                        if(!curtir) 
                            botaoCurtir = post.querySelector('svg[aria-label="Descurtir"]')

                        botaoCurtir = botaoCurtir != null ? botaoCurtir.parentNode : null
                        botaoCurtir = botaoCurtir != null ? botaoCurtir.parentNode : null
                        botaoCurtir = botaoCurtir != null ? botaoCurtir.parentNode : null
                        botaoCurtir != null ? botaoCurtir.click() : null
                        if(botaoCurtir != null)
                            curtir ? notifyScreenReader('curtiu') : notifyScreenReader('descurtiu')

                    }
                }
                // controle gerais
                if(evt.altKey && evt.key.toLowerCase() == "f"){
                    evt.preventDefault()
                    evt.stopPropagation()
                    
                    let feedTitle = document.querySelector('#feedTitle');
                    feedTitle != null ? feedTitle.focus() : null
                }
                
        
            }, false
        ) */

        // garantir a primeira execução dos metodos
        insertTitles()
        updateAllPost()
        fixDoubleSemantic()
    }
    
    function fixDoubleSemantic(){
        let instagramLink = document.querySelector('a[class][href="/"]');
        instagramLink.ariaLabel = 'Instagram'
        
        let instagramImg = instagramLink.querySelector('[role="img"]')
        instagramImg.ariaHidden = 'true'

        let menu = document.querySelector('span[aria-describedby]').parentNode.parentNode.parentNode;
        menu.querySelectorAll('svg').forEach(graph => {
            graph.ariaHidden = 'true'
        })

    }
    

    function insertTitles(){
        // insert Post Title
        waitForElm('main div[style] > div > div:nth-of-type(2) > div').then(elem => {
            let postsArea = elem.querySelector('article[class]')
            postsArea = postsArea.parentNode.parentNode;

            createTitleIn(2, 'Feed', postsArea, 'feedTitle')
        })
      

        // insert Stories Title
        waitForElm('main [role="menu"] [role="presentation"]').then(storiesArea => {
            storiesArea = storiesArea.parentNode;

            createTitleIn(2, 'Stories', storiesArea)
        })


        // set Instagram as tittle
        createTitleIn(1, 'Instagram', document.body)
    }

    function notifyScreenReader(msg){
        let ariaLive = getAriaLiveElement();
        ariaLive.textContent = msg;
        setTimeout(() => {
            ariaLive.textContent = '';
        }, 1000)
    }

    function getAriaLiveElement(){
        let ariaLive = document.querySelector('#aria-live-elem')
        if (!ariaLive) {
            ariaLive = document.createElement('span');
            ariaLive.id = 'aria-live-elem'
            ariaLive.setAttribute('aria-live', 'assertive')
            document.body.appendChild(ariaLive)
        }
        return ariaLive;
    }

    function updateAllPost() {
        let posts = document.querySelector('main div[style] > div > div:nth-of-type(2) > div').querySelectorAll('article[class]')

        posts.forEach(post => {
            updatePost(post)
        });
    }

    function updatePost(post){
        
        let postOwner = post.querySelector('div > div:nth-of-type(1) span[dir] a span[dir]');
        postOwner = postOwner.textContent;

        createTitleIn(3, 'publicação de ' + postOwner, post)
        post.tabIndex = "0"


        if(!post.querySelector('section').parentNode.querySelector('article')){
            let pivot = post.querySelector('section');
            let textElem = pivot.nextSibling;

            let sectionElem = document.createElement('article');
            sectionElem.tabIndex = '-1'

            pivot.after(sectionElem)
            sectionElem.appendChild(textElem)
        }

        let botoesLink = post.querySelectorAll('[role="button"]');
            botoesLink.forEach(botaoLink => {
                let img = botaoLink.querySelector('[role="img"]');
                if(img) {
                    img.ariaHidden = 'true'
                    botaoLink.ariaLabel = img.ariaLabel
                }
            })

        

        let botaoCompartilhar = post.querySelector('button');
        if(botaoCompartilhar){
        let img = botaoCompartilhar.querySelector('[role="img"]');
            if(img) {
                img.ariaHidden = 'true'
                botaoCompartilhar.ariaLabel = img.ariaLabel
            }
        }
    }

    function createTitleIn(titleLevel, text, elemParent, id = null){
        if(!elemParent.querySelector('h' + titleLevel)){
            let title = document.createElement('h' + titleLevel)
            title.style.width = '0'
            title.style.height = '0'
            title.style.overflow = 'hidden'
            if (id != null) {
                title.id = id
                title.tabIndex = '0'
            }
            title.textContent = text
            elemParent.prepend(title)
        }
    }

    function waitForElm(selector) {
        return new Promise(resolve => {
            if (document.querySelector(selector)) {
                return resolve(document.querySelector(selector));
            }
    
            const observer = new MutationObserver(mutations => {
                if (document.querySelector(selector)) {
                    observer.disconnect();
                    resolve(document.querySelector(selector));
                }
            });
    
            observer.observe(document.body, {
                childList: true,
                subtree: true
            });
        });
    }
})();