Chip accessibility #5356

primefaces · Nov 23, 2023 · 9770dc0 · 9770dc0
1 parent a4618a7
commit 9770dc0
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 31 deletions.
diff --git a/components/doc/chip/accessibilitydoc.js b/components/doc/chip/accessibilitydoc.js
@@ -3,34 +3,38 @@ import { DocSectionText } from '@/components/doc/common/docsectiontext';
 
 export function AccessibilityDoc() {
     return (
-        <DevelopmentSection>
-            <DocSectionText id="accessibility" label="Accessibility">
-                <h3>Screen Reader</h3>
-                <p>
-                    Chip uses the <i>label</i> property as the default <i>aria-label</i>, since any attribute is passed to the root element <i>aria-labelledby</i> or <i>aria-label</i> can be used to override the default behavior. Removable chips have
-                    a <i>tabIndex</i> and focusable with the tab key.
-                </p>
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                Chip uses the <i>label</i> property as the default <i>aria-label</i>, since any attribute is passed to the root element <i>aria-labelledby</i> or <i>aria-label</i> can be used to override the default behavior. Removable chips have a{' '}
+                <i>tabIndex</i> and focusable with the tab key.
+            </p>
 
-                <h3>Keyboard Support</h3>
-                <div className="doc-tablewrapper">
-                    <table className="doc-table">
-                        <thead>
-                            <tr>
-                                <th>Key</th>
-                                <th>Function</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr>
-                                <td>
-                                    <i>backspace</i>
-                                </td>
-                                <td>Hides removable.</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-            </DocSectionText>
-        </DevelopmentSection>
+            <h3>Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>backspace</i>
+                            </td>
+                            <td>Hides removable.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>enter</i>
+                            </td>
+                            <td>Hides removable.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </DocSectionText>
     );
 }
diff --git a/components/lib/chip/Chip.js b/components/lib/chip/Chip.js
@@ -18,8 +18,7 @@ export const Chip = React.memo(
         useHandleStyle(ChipBase.css.styles, isUnstyled, { name: 'chip' });
 
         const onKeyDown = (event) => {
-            if (event.keyCode === 13) {
-                // enter
+            if (event.key === 'Enter' || event.key === 'Backspace') {
                 close(event);
             }
         };
@@ -97,7 +96,8 @@ export const Chip = React.memo(
                 {
                     ref: elementRef,
                     style: props.style,
-                    className: classNames(props.className, cx('root'))
+                    className: classNames(props.className, cx('root')),
+                    'aria-label': props.label
                 },
                 ChipBase.getOtherProps(props),
                 ptm('root')