diff --git a/.eslintrc.js b/.eslintrc.js index 7d1bb161a7c3f..a3ecf750dbb12 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -143,9 +143,9 @@ const restrictedSyntax = [ const restrictedSyntaxComponents = [ { selector: - 'JSXOpeningElement[name.name="Button"]:not(:has(JSXAttribute[name.name="__experimentalIsFocusable"])) JSXAttribute[name.name="disabled"]', + 'JSXOpeningElement[name.name="Button"]:not(:has(JSXAttribute[name.name="accessibleWhenDisabled"])) JSXAttribute[name.name="disabled"]', message: - '`disabled` used without the `__experimentalIsFocusable` prop. Disabling a control without maintaining focusability can cause accessibility issues, by hiding their presence from screen reader users, or preventing focus from returning to a trigger element. (Ignore this error if you truly mean to disable.)', + '`disabled` used without the `accessibleWhenDisabled` prop. Disabling a control without maintaining focusability can cause accessibility issues, by hiding their presence from screen reader users, or preventing focus from returning to a trigger element. (Ignore this error if you truly mean to disable.)', }, ]; diff --git a/packages/block-directory/src/components/downloadable-block-list-item/index.js b/packages/block-directory/src/components/downloadable-block-list-item/index.js index e3a770925551c..b1ef34ccdba59 100644 --- a/packages/block-directory/src/components/downloadable-block-list-item/index.js +++ b/packages/block-directory/src/components/downloadable-block-list-item/index.js @@ -96,7 +96,7 @@ function DownloadableBlockListItem( { composite, item, onClick } ) { { getBlockMoverDescription( diff --git a/packages/block-editor/src/components/block-pattern-setup/setup-toolbar.js b/packages/block-editor/src/components/block-pattern-setup/setup-toolbar.js index 91b68456cda71..df559194e5b78 100644 --- a/packages/block-editor/src/components/block-pattern-setup/setup-toolbar.js +++ b/packages/block-editor/src/components/block-pattern-setup/setup-toolbar.js @@ -35,14 +35,14 @@ const CarouselNavigation = ( { label={ __( 'Previous pattern' ) } onClick={ handlePrevious } disabled={ activeSlide === 0 } - __experimentalIsFocusable + accessibleWhenDisabled /> ); diff --git a/packages/block-editor/src/components/block-patterns-paging/index.js b/packages/block-editor/src/components/block-patterns-paging/index.js index 66be81d1eae19..7ddbfc4702bf2 100644 --- a/packages/block-editor/src/components/block-patterns-paging/index.js +++ b/packages/block-editor/src/components/block-patterns-paging/index.js @@ -42,7 +42,7 @@ export default function Pagination( { onClick={ () => changePage( 1 ) } disabled={ currentPage === 1 } aria-label={ __( 'First page' ) } - __experimentalIsFocusable + accessibleWhenDisabled > « @@ -51,7 +51,7 @@ export default function Pagination( { onClick={ () => changePage( currentPage - 1 ) } disabled={ currentPage === 1 } aria-label={ __( 'Previous page' ) } - __experimentalIsFocusable + accessibleWhenDisabled > ‹ @@ -74,7 +74,7 @@ export default function Pagination( { onClick={ () => changePage( currentPage + 1 ) } disabled={ currentPage === numPages } aria-label={ __( 'Next page' ) } - __experimentalIsFocusable + accessibleWhenDisabled > › @@ -84,7 +84,7 @@ export default function Pagination( { disabled={ currentPage === numPages } aria-label={ __( 'Last page' ) } size="default" - __experimentalIsFocusable + accessibleWhenDisabled > » diff --git a/packages/block-editor/src/components/link-control/link-preview.js b/packages/block-editor/src/components/link-control/link-preview.js index d06c9971c680b..e5de47f0153a8 100644 --- a/packages/block-editor/src/components/link-control/link-preview.js +++ b/packages/block-editor/src/components/link-control/link-preview.js @@ -166,7 +166,7 @@ export default function LinkPreview( { isEmptyURL || showIconLabels ? '' : ': ' + value.url ) } ref={ ref } - __experimentalIsFocusable + accessibleWhenDisabled disabled={ isEmptyURL } size="compact" /> diff --git a/packages/block-library/src/page-list/convert-to-links-modal.js b/packages/block-library/src/page-list/convert-to-links-modal.js index 12277bee01faf..209987b194238 100644 --- a/packages/block-library/src/page-list/convert-to-links-modal.js +++ b/packages/block-library/src/page-list/convert-to-links-modal.js @@ -36,7 +36,7 @@ export function ConvertToLinksModal( { onClick, onClose, disabled } ) { diff --git a/packages/block-library/src/page-list/edit.js b/packages/block-library/src/page-list/edit.js index 11ecfa67e1859..fca8096ac05d4 100644 --- a/packages/block-library/src/page-list/edit.js +++ b/packages/block-library/src/page-list/edit.js @@ -338,7 +338,7 @@ export default function PageListEdit( { { convertDescription } diff --git a/packages/block-library/src/template-part/edit/title-modal.js b/packages/block-library/src/template-part/edit/title-modal.js index bae4e893443c8..0fe4cb08fb8b0 100644 --- a/packages/block-library/src/template-part/edit/title-modal.js +++ b/packages/block-library/src/template-part/edit/title-modal.js @@ -43,7 +43,7 @@ export default function TitleModal( { areaLabel, onClose, onSubmit } ) { { __( 'Create' ) } diff --git a/packages/components/src/autocomplete/autocompleter-ui.tsx b/packages/components/src/autocomplete/autocompleter-ui.tsx index 59c88b4e41ecd..1a5aacf1438ab 100644 --- a/packages/components/src/autocomplete/autocompleter-ui.tsx +++ b/packages/components/src/autocomplete/autocompleter-ui.tsx @@ -58,7 +58,7 @@ function ListBox( { id={ `components-autocomplete-item-${ instanceId }-${ option.key }` } role="option" aria-selected={ index === selectedIndex } - __experimentalIsFocusable + accessibleWhenDisabled disabled={ option.isDisabled } className={ clsx( 'components-autocomplete__result', diff --git a/packages/components/src/button/stories/e2e/index.story.tsx b/packages/components/src/button/stories/e2e/index.story.tsx index 075438fe0579e..a4fcfdeac5ca4 100644 --- a/packages/components/src/button/stories/e2e/index.story.tsx +++ b/packages/components/src/button/stories/e2e/index.story.tsx @@ -45,7 +45,7 @@ export const VariantStates: StoryFn< typeof Button > = ( { ...props } variant={ variant } disabled - __experimentalIsFocusable + accessibleWhenDisabled /> diff --git a/packages/components/src/button/test/index.tsx b/packages/components/src/button/test/index.tsx index 213d99f3f80a5..02fe6ecb851c4 100644 --- a/packages/components/src/button/test/index.tsx +++ b/packages/components/src/button/test/index.tsx @@ -621,6 +621,7 @@ describe( 'Button', () => { } ); it( 'should not break when the legacy __experimentalIsFocusable prop is passed', () => { + // eslint-disable-next-line no-restricted-syntax render( ); const button = screen.getByRole( 'button' ); diff --git a/packages/components/src/dropdown-menu/index.tsx b/packages/components/src/dropdown-menu/index.tsx index b631be344c2b9..0e4501be4839c 100644 --- a/packages/components/src/dropdown-menu/index.tsx +++ b/packages/components/src/dropdown-menu/index.tsx @@ -199,7 +199,7 @@ function UnconnectedDropdownMenu( dropdownMenuProps: DropdownMenuProps ) { ? control.role : 'menuitem' } - __experimentalIsFocusable + accessibleWhenDisabled disabled={ control.isDisabled } > { control.title } diff --git a/packages/components/src/font-size-picker/index.tsx b/packages/components/src/font-size-picker/index.tsx index cb17b7a16e363..e4de2f6f6f5cf 100644 --- a/packages/components/src/font-size-picker/index.tsx +++ b/packages/components/src/font-size-picker/index.tsx @@ -262,7 +262,7 @@ const UnforwardedFontSizePicker = ( { onChange?.( undefined ); } } diff --git a/packages/components/src/range-control/index.tsx b/packages/components/src/range-control/index.tsx index c133e86cd3cf4..b5fff9f56b80d 100644 --- a/packages/components/src/range-control/index.tsx +++ b/packages/components/src/range-control/index.tsx @@ -327,7 +327,7 @@ function UnforwardedRangeControl( ( { size="compact" icon={ moreVertical } label={ __( 'Actions' ) } - __experimentalIsFocusable + accessibleWhenDisabled disabled={ ! actions.length } className="dataviews-all-actions-button" /> diff --git a/packages/dataviews/src/pagination.tsx b/packages/dataviews/src/pagination.tsx index 4020e78525b98..497ae80505bd7 100644 --- a/packages/dataviews/src/pagination.tsx +++ b/packages/dataviews/src/pagination.tsx @@ -90,7 +90,7 @@ const Pagination = memo( function Pagination( { } ) } disabled={ currentPage === 1 } - __experimentalIsFocusable + accessibleWhenDisabled label={ __( 'Previous page' ) } icon={ chevronLeft } showTooltip @@ -102,7 +102,7 @@ const Pagination = memo( function Pagination( { onChangeView( { ...view, page: currentPage + 1 } ) } disabled={ currentPage >= totalPages } - __experimentalIsFocusable + accessibleWhenDisabled label={ __( 'Next page' ) } icon={ chevronRight } showTooltip diff --git a/packages/dataviews/src/reset-filters.tsx b/packages/dataviews/src/reset-filters.tsx index 74570b49d9548..5c155ac7f05cc 100644 --- a/packages/dataviews/src/reset-filters.tsx +++ b/packages/dataviews/src/reset-filters.tsx @@ -33,7 +33,7 @@ export default function ResetFilter( { return ( ( { size="compact" icon={ moreVertical } label={ __( 'Actions' ) } - __experimentalIsFocusable + accessibleWhenDisabled disabled={ ! actions.length } onKeyDown={ ( event: { key: string; diff --git a/packages/edit-post/src/components/init-pattern-modal/index.js b/packages/edit-post/src/components/init-pattern-modal/index.js index 1f181006cfec8..e2aef9994fa0f 100644 --- a/packages/edit-post/src/components/init-pattern-modal/index.js +++ b/packages/edit-post/src/components/init-pattern-modal/index.js @@ -100,7 +100,7 @@ export default function InitPatternModal() { variant="primary" type="submit" disabled={ ! title } - __experimentalIsFocusable + accessibleWhenDisabled > { __( 'Create' ) } diff --git a/packages/edit-post/src/components/preferences-modal/enable-custom-fields.js b/packages/edit-post/src/components/preferences-modal/enable-custom-fields.js index e655a7300c37e..94d4f28c632cd 100644 --- a/packages/edit-post/src/components/preferences-modal/enable-custom-fields.js +++ b/packages/edit-post/src/components/preferences-modal/enable-custom-fields.js @@ -42,7 +42,7 @@ export function CustomFieldsConfirmation( { willEnable } ) { className="edit-post-preferences-modal__custom-fields-confirmation-button" variant="secondary" isBusy={ isReloading } - __experimentalIsFocusable + accessibleWhenDisabled disabled={ isReloading } onClick={ () => { setIsReloading( true ); diff --git a/packages/edit-site/src/components/global-styles-sidebar/index.js b/packages/edit-site/src/components/global-styles-sidebar/index.js index f57cc8c417f41..b314b5d7e7524 100644 --- a/packages/edit-site/src/components/global-styles-sidebar/index.js +++ b/packages/edit-site/src/components/global-styles-sidebar/index.js @@ -152,7 +152,7 @@ export default function GlobalStylesSidebar() { isPressed={ isStyleBookOpened || isRevisionsStyleBookOpened } - __experimentalIsFocusable + accessibleWhenDisabled disabled={ shouldClearCanvasContainerView } onClick={ toggleStyleBook } size="compact" @@ -163,7 +163,7 @@ export default function GlobalStylesSidebar() { label={ __( 'Revisions' ) } icon={ backup } onClick={ toggleRevisions } - __experimentalIsFocusable + accessibleWhenDisabled disabled={ ! hasRevisions } isPressed={ isRevisionsOpened || isRevisionsStyleBookOpened diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js b/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js index db9e3cb402561..9cb446b1d16ab 100644 --- a/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js +++ b/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js @@ -438,7 +438,7 @@ function FontCollection( { slug } ) { disabled={ fontsToInstall.length === 0 || isInstalling } - __experimentalIsFocusable + accessibleWhenDisabled > { __( 'Install' ) } @@ -455,7 +455,7 @@ function FontCollection( { slug } ) { size="compact" onClick={ () => setPage( 1 ) } disabled={ page === 1 } - __experimentalIsFocusable + accessibleWhenDisabled > « @@ -464,7 +464,7 @@ function FontCollection( { slug } ) { size="compact" onClick={ () => setPage( page - 1 ) } disabled={ page === 1 } - __experimentalIsFocusable + accessibleWhenDisabled > ‹ @@ -514,7 +514,7 @@ function FontCollection( { slug } ) { size="compact" onClick={ () => setPage( page + 1 ) } disabled={ page === totalPages } - __experimentalIsFocusable + accessibleWhenDisabled > › @@ -523,7 +523,7 @@ function FontCollection( { slug } ) { size="compact" onClick={ () => setPage( totalPages ) } disabled={ page === totalPages } - __experimentalIsFocusable + accessibleWhenDisabled > » diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js b/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js index c644c219348a6..464540bc2b4ea 100644 --- a/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js +++ b/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js @@ -329,7 +329,7 @@ function InstalledFonts() { saveFontFamilies( fontFamilies ); } } disabled={ ! fontFamiliesHasChanges } - __experimentalIsFocusable + accessibleWhenDisabled > { __( 'Update' ) } diff --git a/packages/edit-site/src/components/global-styles/screen-revisions/revisions-buttons.js b/packages/edit-site/src/components/global-styles/screen-revisions/revisions-buttons.js index 7f4f9896344b4..a17e5fde5763a 100644 --- a/packages/edit-site/src/components/global-styles/screen-revisions/revisions-buttons.js +++ b/packages/edit-site/src/components/global-styles/screen-revisions/revisions-buttons.js @@ -163,7 +163,7 @@ function RevisionsButtons( { > { onChange( revision ); diff --git a/packages/edit-site/src/components/pagination/index.js b/packages/edit-site/src/components/pagination/index.js index 1552ea81ed8bd..66b89735b8cb4 100644 --- a/packages/edit-site/src/components/pagination/index.js +++ b/packages/edit-site/src/components/pagination/index.js @@ -47,7 +47,7 @@ export default function Pagination( { changePage( 1 ) } - __experimentalIsFocusable + accessibleWhenDisabled disabled={ disabled || currentPage === 1 } label={ __( 'First page' ) } icon={ previous } @@ -56,7 +56,7 @@ export default function Pagination( { changePage( currentPage - 1 ) } - __experimentalIsFocusable + accessibleWhenDisabled disabled={ disabled || currentPage === 1 } label={ __( 'Previous page' ) } icon={ chevronLeft } @@ -75,7 +75,7 @@ export default function Pagination( { changePage( currentPage + 1 ) } - __experimentalIsFocusable + accessibleWhenDisabled disabled={ disabled || currentPage === numPages } label={ __( 'Next page' ) } icon={ chevronRight } @@ -84,7 +84,7 @@ export default function Pagination( { changePage( numPages ) } - __experimentalIsFocusable + accessibleWhenDisabled disabled={ disabled || currentPage === numPages } label={ __( 'Last page' ) } icon={ next } diff --git a/packages/edit-site/src/components/save-panel/index.js b/packages/edit-site/src/components/save-panel/index.js index 1422014b08ccc..ad65fb208b4a0 100644 --- a/packages/edit-site/src/components/save-panel/index.js +++ b/packages/edit-site/src/components/save-panel/index.js @@ -155,7 +155,7 @@ export default function SavePanel() { onClick={ () => setIsSaveViewOpened( true ) } aria-haspopup="dialog" disabled={ disabled } - __experimentalIsFocusable + accessibleWhenDisabled > { __( 'Open save panel' ) } diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/rename-modal.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/rename-modal.js index f704f2354e439..d1a2df9df6cdc 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/rename-modal.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/rename-modal.js @@ -49,7 +49,7 @@ export default function RenameModal( { menuTitle, onClose, onSave } ) { diff --git a/packages/editor/src/components/entities-saved-states/index.js b/packages/editor/src/components/entities-saved-states/index.js index 5d9840855348c..8c0d59573a44d 100644 --- a/packages/editor/src/components/entities-saved-states/index.js +++ b/packages/editor/src/components/entities-saved-states/index.js @@ -134,7 +134,7 @@ export function EntitiesSavedStatesExtensible( { ref={ saveButtonRef } variant="primary" disabled={ ! saveEnabled } - __experimentalIsFocusable + accessibleWhenDisabled onClick={ () => saveDirtyEntities( { onSave, diff --git a/packages/editor/src/components/post-actions/actions.js b/packages/editor/src/components/post-actions/actions.js index e38c64ddb3d7e..8f70d436013bf 100644 --- a/packages/editor/src/components/post-actions/actions.js +++ b/packages/editor/src/components/post-actions/actions.js @@ -121,7 +121,7 @@ const trashPostAction = { variant="tertiary" onClick={ closeModal } disabled={ isBusy } - __experimentalIsFocusable + accessibleWhenDisabled > { __( 'Cancel' ) } @@ -234,7 +234,7 @@ const trashPostAction = { } } isBusy={ isBusy } disabled={ isBusy } - __experimentalIsFocusable + accessibleWhenDisabled > { __( 'Trash' ) } @@ -887,7 +887,7 @@ const resetTemplateAction = { variant="tertiary" onClick={ closeModal } disabled={ isBusy } - __experimentalIsFocusable + accessibleWhenDisabled > { __( 'Cancel' ) } @@ -902,7 +902,7 @@ const resetTemplateAction = { } } isBusy={ isBusy } disabled={ isBusy } - __experimentalIsFocusable + accessibleWhenDisabled > { __( 'Reset' ) } diff --git a/packages/editor/src/components/post-actions/index.js b/packages/editor/src/components/post-actions/index.js index 00d256ef67eee..b2730e760c427 100644 --- a/packages/editor/src/components/post-actions/index.js +++ b/packages/editor/src/components/post-actions/index.js @@ -59,7 +59,7 @@ export default function PostActions( { onActionPerformed, buttonProps } ) { icon={ moreVertical } label={ __( 'Actions' ) } disabled={ ! actions.length } - __experimentalIsFocusable + accessibleWhenDisabled className="editor-all-actions-button" onClick={ () => setIsActionsMenuOpen( ! isActionsMenuOpen ) diff --git a/packages/editor/src/components/post-preview-button/index.js b/packages/editor/src/components/post-preview-button/index.js index e517ac0e8a0fb..d57143cd355d8 100644 --- a/packages/editor/src/components/post-preview-button/index.js +++ b/packages/editor/src/components/post-preview-button/index.js @@ -183,7 +183,7 @@ export default function PostPreviewButton( { className={ className || 'editor-post-preview' } href={ href } target={ targetId } - __experimentalIsFocusable + accessibleWhenDisabled disabled={ ! isSaveable } onClick={ openPreviewWindow } role={ role } diff --git a/packages/editor/src/components/post-publish-panel/index.js b/packages/editor/src/components/post-publish-panel/index.js index 009d008c72c96..28567c6078021 100644 --- a/packages/editor/src/components/post-publish-panel/index.js +++ b/packages/editor/src/components/post-publish-panel/index.js @@ -93,7 +93,7 @@ export class PostPublishPanel extends Component { { __( 'Open save panel' ) } diff --git a/packages/editor/src/dataviews/actions/delete-post.tsx b/packages/editor/src/dataviews/actions/delete-post.tsx index e5810e32fde69..36400702dae3f 100644 --- a/packages/editor/src/dataviews/actions/delete-post.tsx +++ b/packages/editor/src/dataviews/actions/delete-post.tsx @@ -77,7 +77,7 @@ const deletePostAction: Action< Post > = { variant="tertiary" onClick={ closeModal } disabled={ isBusy } - __experimentalIsFocusable + accessibleWhenDisabled > { __( 'Cancel' ) } @@ -94,7 +94,7 @@ const deletePostAction: Action< Post > = { } } isBusy={ isBusy } disabled={ isBusy } - __experimentalIsFocusable + accessibleWhenDisabled > { __( 'Delete' ) } diff --git a/packages/list-reusable-blocks/src/components/import-form/index.js b/packages/list-reusable-blocks/src/components/import-form/index.js index aa2f3133b7a6e..9c6e8bf57835f 100644 --- a/packages/list-reusable-blocks/src/components/import-form/index.js +++ b/packages/list-reusable-blocks/src/components/import-form/index.js @@ -86,7 +86,7 @@ function ImportForm( { instanceId, onUpload } ) { { hasOverrides ? __( 'Disable overrides' ) diff --git a/storybook/stories/playground/with-undo-redo/index.js b/storybook/stories/playground/with-undo-redo/index.js index c2b2781cd31e4..77e059247a051 100644 --- a/storybook/stories/playground/with-undo-redo/index.js +++ b/storybook/stories/playground/with-undo-redo/index.js @@ -49,14 +49,14 @@ export default function EditorWithUndoRedo() {
{ convertDescription }