diff --git a/Carte.css b/Carte.css index a68e229..44bc094 100644 --- a/Carte.css +++ b/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); diff --git a/StoryMap.css b/StoryMap.css index 3d7ae18..b006a63 100644 --- a/StoryMap.css +++ b/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; } diff --git a/StoryMap.js b/StoryMap.js index 2c9caf0..8f5bac9 100644 --- a/StoryMap.js +++ b/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); diff --git a/md/md2html.js b/md/md2html.js index 1d23f8a..83a36c6 100644 --- a/md/md2html.js +++ b/md/md2html.js @@ -856,7 +856,7 @@ md2html.iconize = function(md) { * @param {Array} 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) => {