From c32b5ab32bf60784b6348735cc9318f6b66c4244 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABl=20Poupard?= Date: Fri, 4 Feb 2022 00:36:06 +0100 Subject: [PATCH] fix(docs): remove headings' ids to prevent duplication --- a11y.css.js | 3 + docs/advices/index.html | 172 ++++++++++---------- docs/api/index.html | 138 ++++++++-------- docs/errors/index.html | 304 +++++++++++++++++------------------ docs/obsoletes/index.html | 16 +- docs/warnings/index.html | 270 +++++++++++++++---------------- docs/webextension/index.html | 14 +- 7 files changed, 460 insertions(+), 457 deletions(-) diff --git a/a11y.css.js b/a11y.css.js index d584cecb..2d13a0c8 100644 --- a/a11y.css.js +++ b/a11y.css.js @@ -128,6 +128,9 @@ const parseSassComment = comment => { ghCompatibleHeaderId: true }).makeHtml(content.body) + const headingsRegex = /((.*)<\/h[2-5]>)/gim + processedContent = processedContent.replace(headingsRegex, `$3`) + // HTML code blocks const markupRegex = /((
)(.[\s\S]+?)(\/code><\/pre>))/gm
   const htmlRegex = /((?<=)(.[\s\S]+?)(?=<\/code>))/gm
diff --git a/docs/advices/index.html b/docs/advices/index.html
index 800f2680..936e5b6e 100644
--- a/docs/advices/index.html
+++ b/docs/advices/index.html
@@ -275,19 +275,19 @@ 
Advices

       
         

           
<select required> should start with an empty <option>'s [value]

-          
Description

+          
Description

 
A <select required> element, which isn't [multiple] and whose [size] isn't greater than 1, should start with an empty <option>. That being said, you may use a placeholder content for this option but must ensure to use an empty [value] attribute; or set a [size] attribute to the <select>, which value should equal to the number of <option>s.

-
References

+
References

 
-
Selector

+
Selector

 
select[required]:not([multiple])[size="1"],
 select[required]:not([multiple]):not([size])
 

-
Test

+
Test

 
<select name="slices" required>
   <option value="1">Cheese</option>
   <option value="2">Salami</option>
@@ -297,13 +297,13 @@ 
Test

       
         

           
Empty [class] attribute

-          
Description

+          
Description

 
[class] shouldn't be present if empty. Something to improve, right?

-
Selector

+
Selector

 
[class=""],
 [class=" "]
 

-
Test

+
Test

 
Why is there a class here?
 
<b class="">Why is there a class here?</b>
 

@@ -311,13 +311,13 @@ 
Test

       
         

           
Empty [id] attribute

-          
Description

+          
Description

 
[id] shouldn't be present if empty. You'll thank me later.

-
Selector

+
Selector

 
[id=""],
 [id=" "]
 

-
Test

+
Test

 
Wait. Why is my ID empty?
 
<i id="">Wait. Why is my ID empty?</i>
 

@@ -325,17 +325,17 @@ 
Test

       
         

           
A second visible main tag

-          
Description

+          
Description

 
A single <main> should be visible at a time. Isn't that obvious?

-
References

+
References

 
-
Selector

+
Selector

 
main ~ main:not([hidden])
 

-
Test

+
Test

 
I'm the main content!

 
No, It's me!

 
<main>I'm the main content!</main>
@@ -345,16 +345,16 @@ 
Test

       
         

           
A second figcaption tag

-          
Description

+          
Description

 
<figcaption> should be single inside its parent. Check the spec!

-
References

+
References

 
-
Selector

+
Selector

 
figcaption:not(:first-of-type)
 

-
Test

+
Test

 

   
I'm the caption.

   Needed
@@ -370,16 +370,16 @@ 
Test

       
         

           
figcaption order

-          
Description

+          
Description

 
<figcaption> should be first or last child. Nothing else.

-
References

+
References

 
-
Selector

+
Selector

 
figcaption:not(:first-child):not(:last-child)
 

-
Test

+
Test

 

   Needed
   
I'm the caption.

@@ -395,13 +395,13 @@ 
Test

       
         

           
An email link should be valid

-          
Description

+          
Description

 
A <href="mailto:"> should contain a valid email.
 Otherwise you may annoy your users.

-
Selector

+
Selector

 
[href^="mailto"]
 

-
Test

+
Test

 
<a href="mailto:myself">Surpri-ise!</a>
 

@@ -409,13 +409,13 @@ 
Test

       
         

           
A phone link should call a real number

-          
Description

+          
Description

 
A <href="tel:"> should contain a valid phone number.
 Otherwise you may make your users to call anubody.

-
Selector

+
Selector

 
[href^="tel"]
 

-
Test

+
Test

 
<a href="tel:012345678">Who will I call?</a>
 

@@ -423,16 +423,16 @@ 
Test

       
         

           
button [role] on a link

-          
Description

+          
Description

 
Obviously, a button role on a link is probably not so hard to move to an authentic button tag, isn't it?

-
References

+
References

 
-
Selector

+
Selector

 
a[role="button"]
 

-
Test

+
Test

 
<a href="/" role="button">Submit</a>
 

@@ -440,10 +440,10 @@ 
Test

       
         

           
Link opening new tab

-          
Description

+          
Description

 
A link opening new tab or window should warn user about its behaviour.
 You could use a [title], for example.

-
References

+
References

 
-
Selector

+
Selector

 
[target$="blank"]
 

-
Test

+
Test

 
<a href="/" target="_blank" rel="noopener noreferrer">New tab</a>
 

@@ -463,16 +463,16 @@ 
Test

       
         

           
Linking to a file

-          
Description

+          
Description

 
A link to a file should indicate the file format, the file size and if different from the main document, the file language.

-
References

+
References

 
-
Selector

+
Selector

 
[download],
 [href$=".pdf"]:not(link),
 [href$=".doc"]:not(link),
@@ -493,7 +493,7 @@ 
Selector

 [href$=".svg"]:not(link),
 [href$=".svgz"]:not(link)
 

-
Test

+
Test

 
<a href="/file.png">Wanna file?</a>
 

@@ -501,20 +501,20 @@ 
Test

       
         

           
Duplicated roles

-          
Description

+          
Description

 
Some ARIA roles should be unique: at least [main], [search], [banner], [contentinfo].

-
References

+
References

 
-
Selector

+
Selector

 
[role="main"] ~ [role="main"],
 [role="search"] ~ [role="search"],
 [role="banner"] ~ [role="banner"],
 [role="contentinfo"] ~ [role="contentinfo"]
 

-
Test

+
Test

 


 


 
<main role="main"><br /></main>
@@ -524,18 +524,18 @@ 
Test

       
         

           
May have a search [role]?

-          
Description

+          
Description

 
A [class] or [id] containing search may carry the search ARIA [role].

-
References

+
References

 
-
Selector

+
Selector

 
[id*="search"]:not([role="search"]),
 [class*="search"]:not([role="search"])
 

-
Test

+
Test

 

   
   †
@@ -549,18 +549,18 @@ 
Test

       
         

           
Does this look like [required]?

-          
Description

+          
Description

 
A [required] or [aria-required] should be visually understandable.

-
References

+
References

 
-
Selector

+
Selector

 
[required],
 [aria-required]
 

-
Test

+
Test

 

   
   †
@@ -574,18 +574,18 @@ 
Test

       
         

           
Not :empty [hidden] things

-          
Description

+          
Description

 
A [hidden] or [aria-hidden] may not be a good idea if hiding content.

-
References

+
References

 
-
Selector

+
Selector

 
[hidden]:not(:empty),
 [aria-hidden="true"]:not(:empty)
 

-
Test

+
Test

 
<a href="/" aria-hidden="true">Important thing!</a>
 

@@ -593,12 +593,12 @@ 
Test

       
         

           
Placeholder can't replace a label

-          
Description

+          
Description

 
A [placeholder] is not a label, is it?

-
Selector

+
Selector

 
[placeholder]:not([title]):not([aria-label]):not([aria-labelledby])
 

-
Test

+
Test

 
†
 
<input type="text" placeholder="Look Ma, no label!" id="test"><span>†</span>
 

@@ -606,9 +606,9 @@ 
Test

       
         

           
video or audio things

-          
Description

+          
Description

 
A <video> or <audio> needs a few things to be accessible, like a transcript, subtitles, controls. This kind of things.

-
References

+
References

 
-
Selector

+
Selector

 
video,
 audio
 

-
Test

+
Test

 
†
 
<video src="/" controls></video><span>†</span>
 

@@ -628,21 +628,21 @@ 
Test

       
         

           
[title] should be equal to alternative

-          
Description

+          
Description

 
A [title] on any graphic content should be equal to [aria-label] or [alt].

-
References

+
References

 
-
Selector

+
Selector

 
img[alt][title],
 area[alt][title],
 svg[aria-label][title]
 

-
Test

+
Test

 
I'm an alternative text!†
 
<img src="/static/ffoodd.png" alt="I'm an alternative text!" title="I'm a title!" height="144" width="144"><span>†</span>
 

@@ -650,13 +650,13 @@ 
Test

       
         

           
Date and time should be understandable

-          
Description

+          
Description

 
A <time> or [datetime] content should be an understandable and well formated date.

-
Selector

+
Selector

 
time,
 [datetime]
 

-
Test

+
Test

 

 
<time>Yesterday</time>
 

@@ -664,18 +664,18 @@ 
Test

       
         

           
[scope] should be either col or row

-          
Description

+          
Description

 
A [scope] can be col or row (and nothing else) and it has to be relevant.

-
References

+
References

 
-
Selector

+
Selector

 
th[scope]
 

-
Test

+
Test

 

@@ -719,17 +719,17 @@ 
Test

   I'm a caption
   
       
         

@@ -755,18 +755,18 @@ 
Test

           
No [href]

-          
Description

+          
Description

 
Yet it's valid to skip the [href] attribute on a link, it's probably better to double check, isn't it?

-
References

+
References

 
-
Selector

+
Selector

 
a:not([href])
 

-
Test

+
Test

 
<a>Who am I? Where do I link?</a>
 

@@ -774,20 +774,20 @@ 
Test

       
         

           
Non HTTPS URL

-          
Description

+          
Description

 
When possible, try to use HTTPS.

-
References

+
References

 
-
Selector

+
Selector

 
[src^="http:"],
 [href^="http:"]
 

-
Test

+
Test

 
<a href="http://www.ffoodd.fr/">My target's protocol isn't secured</a>
 

diff --git a/docs/api/index.html b/docs/api/index.html
index 19b46ee4..13cc15fc 100644
--- a/docs/api/index.html
+++ b/docs/api/index.html
@@ -476,7 +476,7 @@ 
Functions

               

                 
Get translations

                 
Retrieve message from translation map.

-
Source

+
Source

 
@function message($theme, $key) {
   $message-key: $theme + ':' + $key;
 
@@ -487,7 +487,7 @@ 
Source

   @return map-get($messages, $message-key);
 }
 

-
Parameters

+
Parameters

 

   

     First cell
       
         

@@ -512,7 +512,7 @@ 
Parameters

 
 

 

 
 

-
Used by 

+
Used by