[UPD] accessibility

Carte.css

@@ -390,6 +390,10 @@ body > .ol-ext-dialog.mapInfo > form.ol-title .ol-content {
 }
 
 /* Popup */
+.ol-popup button.closeBox:focus-visible {
+  outline: 2px solid currentColor;
+}
+
 .ol-popup .ol-popup-content {
   max-width: min(50vw, 300px);
   max-height: min(50vh, 300px);

StoryMap.css

@@ -381,6 +381,12 @@ button.popup-next:before {
   padding: .35em .5em;
   background-color: transparent;
 }
+[data-role="storymap"] .volet .pages .toc:focus,
+[data-role="storymap"] .volet .steps button.prev:focus,
+[data-role="storymap"] .volet .steps button.next:focus {
+  opacity: 0.8;
+}
+
 [data-role="storymap"] .volet .steps button.prev:before,
 [data-role="storymap"] .volet .steps button.next:before {
   content: '\f054';
@@ -417,6 +423,14 @@ button.popup-next:before {
   padding: .1em .5em;
   text-align: left;
 }
+[data-role="storymap"] .volet .content .toc li a {
+  text-decoration: none;
+  font-weight: inherit;
+}
+[data-role="storymap"] .volet .content .toc li a:focus-visible {
+  font-weight: bold;
+  text-decoration: underline;
+}
 [data-role="storymap"] .volet .content .toc li.active {
   font-weight: bold;
 }

StoryMap.js

@@ -690,7 +690,7 @@ StoryMap.prototype.setStep = function(n, anim) {
   n = Math.max(Math.min(n, this.steps.getLength()-1), 0);
   this.currentStep = n;
   // Create content
-  const div = ol_ext_element.create('DIV', {
+  const div = ol_ext_element.create('FORM', {
     className: 'pages'
   });
   // Previous
@@ -700,7 +700,7 @@ StoryMap.prototype.setStep = function(n, anim) {
     click: () => {
       if (!this.get('freezeStep') && n>0) {
         this.setStep(n-1);
-        prevBt.focus();
+        this.element.step.querySelector('button.prev').focus()
       }
     },
     parent: div
@@ -717,7 +717,7 @@ StoryMap.prototype.setStep = function(n, anim) {
     title: _T('next'),
     click: () => {
       if (!this.get('freezeStep') && n < this.steps.getLength() -1) this.setStep(n+1);
-      nextBt.focus();
+      this.element.step.querySelector('button.next').focus()
     },
     parent: div
   });
@@ -793,7 +793,7 @@ StoryMap.prototype.showTOC = function(current) {
   });
   this.steps.forEach((s, i) => {
     ol_ext_element.create('LI', {
-      html: s.title,
+      html: ol_ext_element.create('A', { href: '#', text: s.title, click: e => e.preventDefault() }),
       className: current===i ? 'active' : '',
       click: () => {
         this.setStep(i, false);

md/md2html.js

@@ -856,7 +856,7 @@ md2html.iconize = function(md) {
  * @param {Array<Feature>} features
  */
 md2html.showSelection =  function(parent, select, count, contents, features) {
-  const div = ol_ext_element.create('DIV', { className: 'ol-count', parent: parent });
+  const div = ol_ext_element.create('FORM', { className: 'ol-count', parent: parent });
 
   // Show next/prev
   const incShow = (ninc) => {