Fix #7180 Screenreader improve hidden accessible (#7179)

primefaces · Jan 1, 2025 · 3737b38 · 3737b38
1 parent d98058a
commit 3737b38
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 39 deletions.
diff --git a/components/doc/accessibility/waiariadoc.js b/components/doc/accessibility/waiariadoc.js
@@ -54,14 +54,14 @@ export function WAIAriaDoc(props) {
 
             <p className="doc-section-description">
                 However the best practice is combining semantic HTML for accessibility while keeping the design for UX. This approach involves hiding a native checkbox for accessibility and using javascript events to update its state. Notice the
-                usage of <i>p-sr-only</i>
+                usage of <i>p-hidden-accessible</i>
                 that hides the elements from the user but not from the screen reader.
             </p>
             <CodeHighlight>
                 {`
 <label htmlFor="chkbox">Remember Me</label>
 <div className="fancy-checkbox" onClick="() => toggle()">
-    <input className="p-sr-only" type="checkbox" id="chkbox" onFocus="() => updateParentVisuals()" onBlur="() => updateParentVisuals()"
+    <input className="p-hidden-accessible" type="checkbox" id="chkbox" onFocus="() => updateParentVisuals()" onBlur="() => updateParentVisuals()"
         onKeyDown="(e) => e.keyCode === 32 && updateParentVisuals()">
     {checked && <i className="checked-icon"></i>}
 </div>

diff --git a/components/doc/message/validationdoc.js b/components/doc/message/validationdoc.js
@@ -7,12 +7,12 @@ export function ValidationDoc(props) {
     const code = {
         basic: `
 <div className="flex flex-wrap align-items-center mb-3 gap-2">
-    <label htmlFor="username" className="p-sr-only">Username</label>
+    <label htmlFor="username" className="p-hidden-accessible">Username</label>
     <InputText id="username" placeholder="Username" className="p-invalid mr-2" />
     <Message severity="error" text="Username is required" />
 </div>
 <div className="flex flex-wrap align-items-center gap-2">
-    <label htmlFor="email" className="p-sr-only">Email</label>
+    <label htmlFor="email" className="p-hidden-accessible">Email</label>
     <InputText id="email" placeholder="Email" className="p-invalid mr-2" />
     <Message severity="error" />
 </div>
@@ -26,12 +26,12 @@ export default function ValidationDemo() {
     return (
         <div className="card">
             <div className="flex flex-wrap align-items-center mb-3 gap-2">
-                <label htmlFor="username" className="p-sr-only">Username</label>
+                <label htmlFor="username" className="p-hidden-accessible">Username</label>
                 <InputText id="username" placeholder="Username" className="p-invalid mr-2" />
                 <Message severity="error" text="Username is required" />
             </div>
             <div className="flex flex-wrap align-items-center gap-2">
-                <label htmlFor="email" className="p-sr-only">Email</label>
+                <label htmlFor="email" className="p-hidden-accessible">Email</label>
                 <InputText id="email" placeholder="Email" className="p-invalid mr-2" />
                 <Message severity="error" />
             </div>
@@ -48,12 +48,12 @@ export default function ValidationDemo() {
     return (
         <div className="card">
             <div className="flex flex-wrap align-items-center mb-3 gap-2">
-                <label htmlFor="username" className="p-sr-only">Username</label>
+                <label htmlFor="username" className="p-hidden-accessible">Username</label>
                 <InputText id="username" placeholder="Username" className="p-invalid mr-2" />
                 <Message severity="error" text="Username is required" />
             </div>
             <div className="flex flex-wrap align-items-center gap-2">
-                <label htmlFor="email" className="p-sr-only">Email</label>
+                <label htmlFor="email" className="p-hidden-accessible">Email</label>
                 <InputText id="email" placeholder="Email" className="p-invalid mr-2" />
                 <Message severity="error" />
             </div>
@@ -70,14 +70,14 @@ export default function ValidationDemo() {
             </DocSectionText>
             <div className="card">
                 <div className="flex flex-wrap align-items-center mb-3 gap-2">
-                    <label htmlFor="username" className="p-sr-only">
+                    <label htmlFor="username" className="p-hidden-accessible">
                         Username
                     </label>
                     <InputText id="username" placeholder="Username" className="p-invalid mr-2" />
                     <Message severity="error" text="Username is required" />
                 </div>
                 <div className="flex flex-wrap align-items-center gap-2">
-                    <label htmlFor="email" className="p-sr-only">
+                    <label htmlFor="email" className="p-hidden-accessible">
                         Email
                     </label>
                     <InputText id="email" placeholder="Email" className="p-invalid mr-2" />

diff --git a/components/doc/theming/utilsdoc.js b/components/doc/theming/utilsdoc.js
@@ -28,7 +28,7 @@ export function UtilsDoc(props) {
                             <td>Applies an opacity to display as disabled.</td>
                         </tr>
                         <tr>
-                            <td>p-sr-only</td>
+                            <td>p-hidden-accessible</td>
                             <td>Element becomes visually hidden however accessibility is still available.</td>
                         </tr>
                         <tr>

diff --git a/components/lib/componentbase/ComponentBase.js b/components/lib/componentbase/ComponentBase.js
@@ -4,23 +4,12 @@ import { ObjectUtils, classNames, mergeProps } from '../utils/Utils';
 
 const baseStyle = `
 .p-hidden-accessible {
-    border: 0;
-    padding: 0;
-    margin: -1px;
     position: absolute;
-    height: 1px;
-    width: 1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    clip-path: inset(50%);
+    pointer-events: none;
+    opacity: 0;
     white-space: nowrap;
 }
 
-.p-hidden-accessible input,
-.p-hidden-accessible select {
-    transform: scale(0);
-}
-
 .p-overflow-hidden {
     overflow: hidden;
     padding-right: var(--scrollbar-width);
@@ -387,19 +376,6 @@ const commonStyle = `
         transition: max-height 0.45s cubic-bezier(0, 1, 0, 1);
     }
 
-    .p-sr-only {
-        border: 0;
-        clip: rect(1px, 1px, 1px, 1px);
-        clip-path: inset(50%);
-        height: 1px;
-        margin: -1px;
-        overflow: hidden;
-        padding: 0;
-        position: absolute;
-        width: 1px;
-        word-wrap: normal;
-    }
-
     /* @todo Refactor */
     .p-menu .p-menuitem-link {
         cursor: pointer;

diff --git a/components/lib/multistatecheckbox/MultiStateCheckbox.js b/components/lib/multistatecheckbox/MultiStateCheckbox.js
@@ -189,7 +189,7 @@ export const MultiStateCheckbox = React.memo(
 
         const srOnlyAriaProps = mergeProps(
             {
-                className: 'p-sr-only p-hidden-accessible',
+                className: 'p-hidden-accessible',
                 'aria-live': 'polite'
             },
             ptm('srOnlyAria')

diff --git a/components/lib/tristatecheckbox/TriStateCheckbox.js b/components/lib/tristatecheckbox/TriStateCheckbox.js
@@ -138,7 +138,7 @@ export const TriStateCheckbox = React.memo(
 
         const srOnlyAriaProps = mergeProps(
             {
-                className: 'p-sr-only p-hidden-accessible',
+                className: 'p-hidden-accessible',
                 'aria-live': 'polite'
             },
             ptm('srOnlyAria')