missing type="button" + aria-pressed="false"

Author: hannahiss

site/data/components-details.ts

@@ -211,7 +211,7 @@ export const componentsDetails: ComponentCardData[] = [
             <div class="input-container">
               <input type="password" id="passwordInput[[id_prefix]]" class="text-input-field" placeholder=" " value="xxxxxx">
             </div>
-            <button class="btn btn-minimal btn-icon">
+            <button class="btn btn-minimal btn-icon" type="button" aria-pressed="false">
               <svg aria-hidden="true">
                 <use xlink:href="${getVersionedDocsPath('/assets/img/ouds-web-sprite.svg#accessibility-vision')}"/>
               </svg>

site/src/assets/partials/snippets.js

@@ -277,9 +277,11 @@ export default () => {
       if (type === 'text') {
         iconUse.setAttribute('xlink:href', iconUse.getAttribute('xlink:href').replace('accessibility-vision', 'hide'))
         visuallyHiddenText.textContent = 'Hide password'
+        togglePasswordButton.setAttribute('aria-pressed', 'true')
       } else {
         iconUse.setAttribute('xlink:href', iconUse.getAttribute('xlink:href').replace('hide', 'accessibility-vision'))
         visuallyHiddenText.textContent = 'Show password'
+        togglePasswordButton.setAttribute('aria-pressed', 'false')
       }
     })
   }

site/src/content/docs/components/password-input.mdx

@@ -37,7 +37,7 @@ You will need to write some additional JavaScript code to make the show/hide pas
     <div class="text-input-container">
       <label for="inputPassword">Password</label>
       <input type="password" id="inputPassword" class="text-input-field" placeholder=" ">
-      <button class="btn btn-minimal btn-icon">
+      <button class="btn btn-minimal btn-icon" type="button" aria-pressed="false">
         <svg aria-hidden="true">
           <use xlink:href="${getVersionedDocsPath('/assets/img/ouds-web-sprite.svg#accessibility-vision')}"/>
         </svg>
@@ -52,7 +52,7 @@ You will need to write some additional JavaScript code to make the show/hide pas
       </svg>
       <label for="inputPasswordIcon">Password</label>
       <input type="password" id="inputPasswordIcon" class="text-input-field" placeholder="Minimum 8 characters">
-      <button class="btn btn-minimal btn-icon">
+      <button class="btn btn-minimal btn-icon" type="button" aria-pressed="false">
         <svg aria-hidden="true">
           <use xlink:href="${getVersionedDocsPath('/assets/img/ouds-web-sprite.svg#accessibility-vision')}"/>
         </svg>
@@ -69,7 +69,7 @@ You will need to write some additional JavaScript code to make the show/hide pas
       <div class="input-container" data-bs-prefix="DEV-">
         <input type="password" id="inputPasswordPrefix" aria-describedby="inputPasswordPrefixHelper" class="text-input-field" placeholder=" ">
       </div>
-      <button class="btn btn-minimal btn-icon">
+      <button class="btn btn-minimal btn-icon" type="button" aria-pressed="false">
         <svg aria-hidden="true">
           <use xlink:href="${getVersionedDocsPath('/assets/img/ouds-web-sprite.svg#accessibility-vision')}"/>
         </svg>
@@ -85,7 +85,7 @@ You will need to write some additional JavaScript code to make the show/hide pas
       </svg>
       <label for="inputPasswordOutlined">Password</label>
       <input type="password" id="inputPasswordOutlined" aria-describedby="inputPasswordOutlinedHelper" class="text-input-field" placeholder=" ">
-      <button class="btn btn-minimal btn-icon">
+      <button class="btn btn-minimal btn-icon" type="button" aria-pressed="false">
         <svg aria-hidden="true">
           <use xlink:href="${getVersionedDocsPath('/assets/img/ouds-web-sprite.svg#accessibility-vision')}"/>
         </svg>
@@ -101,7 +101,7 @@ You will need to write some additional JavaScript code to make the show/hide pas
       </svg>
       <label for="inputPasswordOutlinedValue">Password</label>
       <input type="password" id="inputPasswordOutlinedValue" aria-describedby="inputPasswordOutlinedValueHelper" class="text-input-field" placeholder=" " value="My$ecureP@ssw0rd">
-      <button class="btn btn-minimal btn-icon">
+      <button class="btn btn-minimal btn-icon" type="button" aria-pressed="false">
         <svg aria-hidden="true">
           <use xlink:href="${getVersionedDocsPath('/assets/img/ouds-web-sprite.svg#accessibility-vision')}"/>
         </svg>
@@ -116,7 +116,7 @@ You will need to write some additional JavaScript code to make the show/hide pas
       <div class="input-container" data-bs-prefix="DEV-">
         <input type="password" id="inputPasswordInvalid" class="text-input-field is-invalid" aria-describedby="inputPasswordInvalidError" placeholder=" " value="12345">
       </div>
-      <button class="btn btn-minimal btn-icon">
+      <button class="btn btn-minimal btn-icon" type="button" aria-pressed="false">
         <svg aria-hidden="true">
           <use xlink:href="${getVersionedDocsPath('/assets/img/ouds-web-sprite.svg#accessibility-vision')}"/>
         </svg>
@@ -135,7 +135,7 @@ You will need to write some additional JavaScript code to make the show/hide pas
       <div class="input-container" data-bs-prefix="DEV-">
         <input type="password" id="inputPasswordOutlinedInvalid" class="text-input-field is-invalid" aria-describedby="inputPasswordOutlinedInvalidError" placeholder=" " value="12345">
       </div>
-      <button class="btn btn-minimal btn-icon">
+      <button class="btn btn-minimal btn-icon" type="button" aria-pressed="false">
         <svg aria-hidden="true">
           <use xlink:href="${getVersionedDocsPath('/assets/img/ouds-web-sprite.svg#accessibility-vision')}"/>
         </svg>
@@ -156,7 +156,7 @@ Find here an example of how to implement a password input with a show password b
     <div class="text-input-container">
       <label for="liveInputPassword">Password</label>
       <input type="password" id="liveInputPassword" class="text-input-field" placeholder=" ">
-        <button class="btn btn-minimal btn-icon" id="togglePassword" type="button">
+        <button class="btn btn-minimal btn-icon" id="togglePassword" type="button" aria-pressed="false">
           <svg aria-hidden="true">
             <use xlink:href="${getVersionedDocsPath('/assets/img/ouds-web-sprite.svg#accessibility-vision')}"/>
           </svg>

site/src/content/docs/components/skeleton.mdx

@@ -174,7 +174,7 @@ To set components in skeleton state, you can wrap any of them in an `[aria-busy=
         <div class="input-container" data-bs-prefix="DEV-">
           <input type="password" id="inputPasswordPrefix" class="text-input-field" placeholder=" ">
         </div>
-        <button class="btn btn-minimal btn-icon">
+        <button class="btn btn-minimal btn-icon" type="button" aria-pressed="false">
           <svg aria-hidden="true">
             <use xlink:href="${getVersionedDocsPath('/assets/img/ouds-web-sprite.svg#accessibility-vision')}"/>
           </svg>

site/src/content/docs/foundation/form-validation.mdx

@@ -97,7 +97,7 @@ Try to submit the form below; our JavaScript will intercept the submit event, an
       <div class="text-input-container">
         <label for="inputPassword">Password</label>
         <input type="password" id="inputPassword" class="text-input-field" aria-describedby="inputPasswordPrefixHelper" data-errormessage="passwordFeedback" autocomplete="new-password" placeholder=" " required minlength="8">
-        <button class="btn btn-minimal btn-icon">
+        <button class="btn btn-minimal btn-icon" type="button" aria-pressed="false">
           <svg aria-hidden="true">
             <use xlink:href="${getVersionedDocsPath("/assets/img/ouds-web-sprite.svg#accessibility-vision")}"/>
           </svg>
@@ -231,7 +231,7 @@ For invalid fields, ensure that the invalid feedback/error message is associated
       <div class="text-input-container">
         <label for="inputPassword2">Password</label>
         <input type="password" id="inputPassword2" class="text-input-field" aria-invalid="true" aria-describedby="inputPassword2PrefixHelper password2Feedback" autocomplete="new-password" placeholder=" " required minlength="8">
-        <button class="btn btn-minimal btn-icon">
+        <button class="btn btn-minimal btn-icon" type="button" aria-pressed="false">
           <svg aria-hidden="true">
             <use xlink:href="${getVersionedDocsPath("/assets/img/ouds-web-sprite.svg#accessibility-vision")}"/>
           </svg>