D3 select aria-label elements

Question

I'm trying to interact with a hex map SVG which has the following format.

Sample:

<g>
            <path cs="100,100" d="M0.5,0.5 L1919.5,0.5 L1919.5,928.5 L0.5,928.5 Z" fill="#505050" stroke="#000000" fill-opacity="1" stroke-width="1" stroke-opacity="1" class="amcharts-bg"></path>
        </g>
        <g>
            <g transform="translate(682.7373750469994,737.8023617303337) scale(1)">
                <g>
                    <g role="menuitem" aria-label="Ireland " transform="translate(127.53285159244186,-251.50323425913655)">
                        <path cs="100,100" d="M-7.5,8.5 L8.5,8.5 L8.5,-7.5 L-7.5,-7.5 Z" fill="#818181" stroke="#818181" fill-opacity="1" stroke-width="0.01" stroke-opacity="1" transform="translate(0,0) scale(1)" class="amcharts-map-image"></path>
                    </g>
                    <g role="menuitem" aria-label="Ireland " transform="translate(145.53967343300496,-251.50323425913655)">
                        <path cs="100,100" d="M-7.5,8.5 L8.5,8.5 L8.5,-7.5 L-7.5,-7.5 Z" fill="#818181" stroke="#818181" fill-opacity="1" stroke-width="0.01" stroke-opacity="1" transform="translate(0,0) scale(1)" class="amcharts-map-image"></path>
                    </g>
                    <g role="menuitem" aria-label="Northern Ireland " transform="translate(163.5376554003032,-251.50323425913655)">
                        <path cs="100,100" d="M-7.5,8.5 L8.5,8.5 L8.5,-7.5 L-7.5,-7.5 Z" fill="#818181" stroke="#818181" fill-opacity="1" stroke-width="0.01" stroke-opacity="1" transform="translate(0,0) scale(1)" class="amcharts-map-image"></path>
                    </g>
                    <g role="menuitem" aria-label="Northern Ireland " transform="translate(181.53563736760145,-251.50323425913655)">
                        <path cs="100,100" d="M-7.5,8.5 L8.5,8.5 L8.5,-7.5 L-7.5,-7.5 Z" fill="#818181" stroke="#818181" fill-opacity="1" stroke-width="0.01" stroke-opacity="1" transform="translate(0,0) scale(1)" class="amcharts-map-image"></path>
                    </g>
                    <g role="menuitem" aria-label="Northern Ireland " transform="translate(199.54245920816453,-251.50323425913655)">
                        <path cs="100,100" d="M-7.5,8.5 L8.5,8.5 L8.5,-7.5 L-7.5,-7.5 Z" fill="#818181" stroke="#818181" fill-opacity="1" stroke-width="0.01" stroke-opacity="1" transform="translate(0,0) scale(1)" class="amcharts-map-image"></path>
                    </g>

Here is a link to the SVG

Using D3 I would like to interact with it, for example adding a mouseover event that simply changes the colour of a region when when hovered over

In d3 I'm used to interacting with an ID for example d3.selectAll("xxx").

The SVG doesn't contain any IDs and the only thing differentiating the regions is the aria-label property.

How can I reference an aria-label and use that to interact with a region eg "Wales"

I've made a start using this JSFIDDLE

d3.xml('https://raw.githubusercontent.com/gangrel11/samplefiles/main/amCharts.pixelMap.svg')
    .then(data => {
        d3.select('body').node().append(data.documentElement)
        
        var xxx = 
          d3.select('Wales ')
 // .style('fill', 'orange')


  .on("mouseover", function(d) {
    //xxx.style('fill', 'orange')
    xxx.style('opacity', 0.75)
  })
  
  
  .on("mouseout", function(d) {
    xxx.style('opacity', 1)
  });



        })

Any help would be much appreciated