Add Planet and Universe Screen Reader Description Buttons

src/actions.js

@@ -6760,6 +6760,9 @@ export function setPlanet(opt){
 
     $('#evolution').append(parent);
 
+    let srDescButton = $(`<a class="is-sr-only" role="button">${title} description</a>`);
+    $('#evolution').append(srDescButton);
+
     let popper = false;
     let gecked = 0;
     popover(id,function(obj){
@@ -6802,6 +6805,7 @@ export function setPlanet(opt){
             }
             title = `${traits}${biomes[biome].label} ${num}`;
             $(`#${id} .aTitle`).html(title);
+            srDescButton.html(title + ' description');
             gecked++;
             global.race.geck--;
             if (!global.race.hasOwnProperty('gecked')){
@@ -6830,6 +6834,10 @@ export function setPlanet(opt){
         }
     });
 
+    srDescButton.on('click', function() {
+        srPlanetDesc(title, biome, orbit, trait, geology, gecked);
+    });
+
     return custom ? custom : (biome === 'eden' ? 'hellscape' : biome);
 }
 
@@ -6852,6 +6860,31 @@ function planetDesc(obj,title,biome,orbit,trait,geology,gecked){
     return undefined;
 }
 
+function srPlanetDesc(title,biome,orbit,trait,geology,gecked){
+    let desc = '';
+    desc = desc + `<div>${loc('set_planet',[title,biomes[biome].label,orbit])}</div>`;
+    desc = desc + `<div>${biomes[biome].desc}</div>`;
+    if (trait.length > 0){
+        trait.forEach(function(t){
+            desc = desc + `<div>${planetTraits[t].desc}</div>`;
+        });
+    }
+
+    let pg = planetGeology(geology);
+    if (pg.length > 0){
+        // modify geology text to have it be spoken better
+        pg = pg.replaceAll(': <span', '<span');
+        pg = pg.replaceAll('</span></div>', ',</span></div>'); // add commas after each list item
+        pg = pg.replace(/,(?!.*,)/, '.'); // replace trailing comma with period
+
+        desc = desc + `<div>${pg}</div>`;
+    }
+    if (gecked && gecked > 0){
+        desc = desc + `<div class="has-text-special">${loc(`rejuvenated`)}</div>`;
+    }
+    srSpeak(desc);
+}
+
 function buildPlanet(aspect,opt,args){
     args = args || {};
     if (aspect === 'biome'){

src/space.js

@@ -1,4 +1,4 @@
-import { save, global, seededRandom, webWorker, keyMultiplier, sizeApproximation, p_on, support_on, int_on, gal_on } from './vars.js';
+import { save, global, seededRandom, webWorker, keyMultiplier, sizeApproximation, p_on, support_on, int_on, gal_on, srSpeak } from './vars.js';
 import { vBind, messageQueue, clearElement, popover, clearPopper, flib, powerModifier, powerCostMod, calcPrestige, spaceCostMultiplier, darkEffect, eventActive, calcGenomeScore, randomKey, getTraitDesc, deepClone, get_qlevel, timeFormat } from './functions.js';
 import { unlockAchieve, unlockFeat, universeAffix } from './achieve.js';
 import { races, traits, genus_def, genusVars, planetTraits, biomes, traitCostMod } from './races.js';
@@ -7474,13 +7474,24 @@ export function setUniverse(){
 
         $('#evolution').append(parent);
 
+        let srDescButton = $(`<a class="is-sr-only" role="button">${universe_types[universe].name} description</a>`);
+        $('#evolution').append(srDescButton);
+
         $('#'+id).on('click',function(){
             global.race['universe'] = universe;
             clearElement($('#evolution'));
             genPlanets();
             clearPopper();
         });
 
+        srDescButton.on('click',function(){
+            let desc = '';
+            desc = desc + universe_types[universe].name + ' universe: ';
+            desc = desc + universe_types[universe].desc + '. ';
+            desc = desc + universe_types[universe].effect + '.';
+            srSpeak(desc);
+        });
+
         popover(id,function(obj){
             obj.popper.append($(`<div>${universe_types[universe].name}</div>`));
             obj.popper.append($(`<div>${universe_types[universe].desc}</div>`));