fix: accessibility issues (#376)

* fix(accessibility): aria-live is not needed here

* fix(html): footnote is not a valid value for the rel attribute

* fix(html): removed alt attribute on aside as it is not authorised here

* fix(accessibility): removed tabindex. No focus on non interactive elt

* fix(accessibility): keep focus on button, to be able to open it again

* fix(html): changed id on buttons to avoid duplicate ids

* fix(accessibility): aria-controls is optional here and non-existing elt

* fix(test): fixed tests related to accessibility changes

* fix(accessibility): updated README

README.md

@@ -43,7 +43,7 @@ The script will work with a wide array of markup, but you will need to make sure
 <!-- Links -->
 <p>
   <sup id="fnref:1">
-    <a href="#fn:1" rel="footnote">1</a>
+    <a href="#fn:1">1</a>
   </sup>
 </p>
 
@@ -250,12 +250,10 @@ Default:
 
 ```html
 <button
-  aria-controls="fncontent:<% id %>"
   aria-expanded="false"
   aria-label="Footnote <% number %>"
   class="littlefoot-footnote__button littlefoot-footnote__button__ellipsis"
   id="<% reference %>"
-  rel="footnote"
   title="See Footnote <% number %>"
 >
   <svg viewbox="0 0 31 6" preserveAspectRatio="xMidYMid">
@@ -272,13 +270,10 @@ To display the footnote number instead of an ellipsis, provide the following `bu
 
 ```html
 <button
-  aria-controls="fncontent:<% id %>"
-  aria-describedby="fncontent:<% id %>"
   aria-expanded="false"
   aria-label="Footnote <% number %>"
   class="littlefoot-footnote__button"
   id="<% reference %>"
-  rel="footnote"
   title="See Footnote <% number %>"
 />
   <% number %>

src/dom/footnote.ts

@@ -54,7 +54,6 @@ export function createFootnote({
 
     dismiss: () => {
       button.classList.add(CLASS_CHANGING)
-      button.blur()
       button.setAttribute('aria-expanded', 'false')
       button.classList.remove(CLASS_ACTIVE)
     },

src/dom/index.ts

@@ -126,7 +126,7 @@ function prepareTemplateData(original: Original, idx: number): OriginalData {
     data: {
       id: `${idx + 1}`,
       number: idx + 1,
-      reference: original.referenceId,
+      reference: 'lf-' + original.referenceId,
       content: html.startsWith('<') ? html : '<p>' + html + '</p>',
     },
   }

src/settings.ts

@@ -36,6 +36,6 @@ export const DEFAULT_SETTINGS: Settings = {
   hoverDelay: 250,
   numberResetSelector: '',
   scope: '',
-  contentTemplate: `<aside class="littlefoot-footnote" id="fncontent:<% id %>" alt="Footnote <% number %>" aria-live="polite"><div class="${CLASS_WRAPPER}"><div class="${CLASS_CONTENT}" tabindex="0"><% content %></div></div><div class="${CLASS_TOOLTIP}"></div></aside>`,
-  buttonTemplate: `<button class="littlefoot-footnote__button littlefoot-footnote__button__ellipsis" id="<% reference %>" title="See Footnote <% number %>" aria-controls="fncontent:<% id %>" aria-describedby="fncontent:<% id %>" aria-expanded="false" aria-label="Footnote <% number %>" rel="footnote"><svg viewbox="0 0 31 6" preserveAspectRatio="xMidYMid"><circle r="3" cx="3" cy="3" fill="white"></circle><circle r="3" cx="15" cy="3" fill="white"></circle><circle r="3" cx="27" cy="3" fill="white"></circle></svg></button>`,
+  contentTemplate: `<aside class="littlefoot-footnote" id="fncontent:<% id %>"><div class="${CLASS_WRAPPER}"><div class="${CLASS_CONTENT}"><% content %></div></div><div class="${CLASS_TOOLTIP}"></div></aside>`,
+  buttonTemplate: `<button class="littlefoot-footnote__button littlefoot-footnote__button__ellipsis" id="<% reference %>" title="See Footnote <% number %>" aria-expanded="false" aria-label="Footnote <% number %>"><svg viewbox="0 0 31 6" preserveAspectRatio="xMidYMid"><circle r="3" cx="3" cy="3" fill="white"></circle><circle r="3" cx="15" cy="3" fill="white"></circle><circle r="3" cx="27" cy="3" fill="white"></circle></svg></button>`,
 }

test/activate.test.ts

@@ -82,19 +82,6 @@ test('button and popover state reflected on ARIA properties', async () => {
 
   const popover = document.querySelector('.littlefoot-footnote')
   expect(button).toHaveAttribute('aria-expanded', 'true')
-  expect(popover).toHaveAttribute('aria-live', 'polite')
-})
-
-test('button described by the popover', async () => {
-  littlefoot(TEST_SETTINGS)
-  const button = getButton('1')
-
-  fireEvent.click(button)
-  await waitToStopChanging(button)
-
-  const popover = document.querySelector('.littlefoot-footnote')
-  expect(button).toHaveAttribute('aria-controls', popover?.id)
-  expect(button).toHaveAttribute('aria-describedby', popover?.id)
 })
 
 test('popup layout dimensions', async () => {

test/options/buttonTemplate.test.ts

@@ -10,7 +10,7 @@ test('default buttonTemplate', () => {
   littlefoot()
 
   const button = getButton('1')
-  expect(button.id).toBe('fnref:1')
+  expect(button.id).toBe('lf-fnref:1')
   expect(button.dataset).toMatchObject({
     footnoteButton: '',
     footnoteId: '1',
@@ -37,7 +37,7 @@ test('custom buttonTemplate using <%= %> delimiters', () => {
     testContent: /This is the document's only footnote\./,
     testId: '1',
     testNumber: '1',
-    testReference: 'fnref:1',
+    testReference: 'lf-fnref:1',
   })
 })
 
@@ -60,6 +60,6 @@ test('custom buttonTemplate using <% %> delimiters', () => {
     testContent: /This is the document's only footnote\./,
     testId: '1',
     testNumber: '1',
-    testReference: 'fnref:1',
+    testReference: 'lf-fnref:1',
   })
 })