D3 select aria-label elements - d3.js

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