From e5d2a5ab47d8985b2d4a3439c2dcc8836c4c60bb Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Mon, 3 Jun 2024 18:44:32 +0400 Subject: [PATCH 01/17] Inserter: Update Openverse API URLs (#62241) Co-authored-by: Mamaduka Co-authored-by: youknowriad Co-authored-by: tyxla Co-authored-by: zackkrida --- docs/reference-guides/data/data-core-block-editor.md | 2 +- packages/block-editor/src/store/actions.js | 2 +- .../src/components/block-editor/inserter-media-categories.js | 4 +--- packages/editor/src/components/media-categories/index.js | 4 +--- 4 files changed, 4 insertions(+), 8 deletions(-) diff --git a/docs/reference-guides/data/data-core-block-editor.md b/docs/reference-guides/data/data-core-block-editor.md index 862a8b2d8a06a..f687eb79732b5 100644 --- a/docs/reference-guides/data/data-core-block-editor.md +++ b/docs/reference-guides/data/data-core-block-editor.md @@ -1439,7 +1439,7 @@ wp.data.dispatch( 'core/block-editor' ).registerInserterMediaCategory( { per_page: 'page_size', search: 'q', }; - const url = new URL( 'https://api.openverse.engineering/v1/images/' ); + const url = new URL( 'https://api.openverse.org/v1/images/' ); Object.entries( finalQuery ).forEach( ( [ key, value ] ) => { const queryKey = mapFromInserterMediaRequest[ key ] || key; url.searchParams.set( queryKey, value ); diff --git a/packages/block-editor/src/store/actions.js b/packages/block-editor/src/store/actions.js index db2c615dd5d6c..d44fa3e69f86a 100644 --- a/packages/block-editor/src/store/actions.js +++ b/packages/block-editor/src/store/actions.js @@ -2010,7 +2010,7 @@ export function __unstableSetTemporarilyEditingAsBlocks( * per_page: 'page_size', * search: 'q', * }; - * const url = new URL( 'https://api.openverse.engineering/v1/images/' ); + * const url = new URL( 'https://api.openverse.org/v1/images/' ); * Object.entries( finalQuery ).forEach( ( [ key, value ] ) => { * const queryKey = mapFromInserterMediaRequest[ key ] || key; * url.searchParams.set( queryKey, value ); diff --git a/packages/edit-site/src/components/block-editor/inserter-media-categories.js b/packages/edit-site/src/components/block-editor/inserter-media-categories.js index af591d1fa2468..7ebc771126122 100644 --- a/packages/edit-site/src/components/block-editor/inserter-media-categories.js +++ b/packages/edit-site/src/components/block-editor/inserter-media-categories.js @@ -191,9 +191,7 @@ const inserterMediaCategories = [ per_page: 'page_size', search: 'q', }; - const url = new URL( - 'https://api.openverse.engineering/v1/images/' - ); + const url = new URL( 'https://api.openverse.org/v1/images/' ); Object.entries( finalQuery ).forEach( ( [ key, value ] ) => { const queryKey = mapFromInserterMediaRequest[ key ] || key; url.searchParams.set( queryKey, value ); diff --git a/packages/editor/src/components/media-categories/index.js b/packages/editor/src/components/media-categories/index.js index 345f5c5c86e2c..be1b2bdc2d672 100644 --- a/packages/editor/src/components/media-categories/index.js +++ b/packages/editor/src/components/media-categories/index.js @@ -191,9 +191,7 @@ const inserterMediaCategories = [ per_page: 'page_size', search: 'q', }; - const url = new URL( - 'https://api.openverse.engineering/v1/images/' - ); + const url = new URL( 'https://api.openverse.org/v1/images/' ); Object.entries( finalQuery ).forEach( ( [ key, value ] ) => { const queryKey = mapFromInserterMediaRequest[ key ] || key; url.searchParams.set( queryKey, value ); From 0bfd56b340405c2869914a0154e8058b64f1bb02 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Tue, 4 Jun 2024 05:20:03 +0900 Subject: [PATCH 02/17] Add lint rule for inaccessible disabled `Button` (#62080) * Add lint rule for inaccessible disabled `Button` * Exclude react native files * Include files in root `storybook` folder * Fix in Storybook editor playground (matches actual behavior) * Fix in install block button (is clearly a busy state) * Ignore in gallery image reordering buttons * Fix in LinkControl copy link button (aleviates confusion) * Ignore in edit-site pagination buttons (not confusing, and useful) * Fix in enable custom fields (is clearly a busy state) * Fix in DataViews list view Empty action menu should still be perceivable to aleviate confusion, and does not clutter tab order due to Composite use. * Fix in DataViews CompactItemActions (is dropdown trigger) * Fix in template part title modal disabled and aria-disabled are set with an identical condition, which doesn't make sense but signals the intent to keep it focusable. * Fix in PageList block (should be perceivable, esp. because the description is always there) * Fix in ConvertToLinksModal button (should be perceivable, and doesn't clutter tab order) * Fix in edit-site "Apply globally" button (should be perceivable, and doesn't clutter tab order) * Fix in edit-site nav menu rename modal (should be perceivable to signal that input is invalid) * Fix in RevisionsButtons (button is never visible when `areStylesEqual`) * Fix in RevisionsButtons (contains important info and should be perceivable) * Fix in GlobalStylesSidebar (should be perceivable) * Fix in PostPublishPanel cancel button (can cause focus loss) * Fix in PostPreviewButton (should be perceivable) * Defer decision in ButtonBlockAppender * Fix in reusable blocks import form (should be perceivable, can cause focus loss) * Adapt test for PostPreviewButton * Improve rigidity of accessible disabled detection in test * Add disable reason for ButtonBlockAppender Co-authored-by: mirka <0mirka00@git.wordpress.org> Co-authored-by: tyxla Co-authored-by: DaniGuardiola --- .eslintrc.js | 18 ++++++++++++++++++ .../get-install-missing/install-button.js | 1 + .../components/button-block-appender/index.js | 2 ++ .../components/link-control/link-preview.js | 1 + .../src/gallery/v1/gallery-image.js | 8 ++++++++ .../src/page-list/convert-to-links-modal.js | 1 + packages/block-library/src/page-list/edit.js | 1 + .../src/template-part/edit/title-modal.js | 2 +- packages/dataviews/src/item-actions.tsx | 1 + packages/dataviews/src/view-list.tsx | 1 + .../preferences-modal/enable-custom-fields.js | 1 + .../components/global-styles-sidebar/index.js | 2 ++ .../screen-revisions/revisions-buttons.js | 2 +- .../src/components/pagination/index.js | 8 ++++++++ .../rename-modal.js | 1 + .../push-changes-to-global-styles/index.js | 1 + .../components/post-preview-button/index.js | 1 + .../post-preview-button/test/index.js | 12 ++++++++++-- .../src/components/post-publish-panel/index.js | 1 + .../src/components/import-form/index.js | 1 + .../stories/playground/with-undo-redo/index.js | 2 ++ 21 files changed, 64 insertions(+), 4 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 9240b96c033b4..e997e7804beac 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -253,6 +253,24 @@ module.exports = { ], }, }, + { + files: [ + 'packages/*/src/**/*.[tj]s?(x)', + 'storybook/stories/**/*.[tj]s?(x)', + ], + excludedFiles: [ '**/*.native.js' ], + rules: { + 'no-restricted-syntax': [ + 'error', + { + selector: + 'JSXOpeningElement[name.name="Button"]:not(:has(JSXAttribute[name.name="__experimentalIsFocusable"])) 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.)', + }, + ], + }, + }, { files: [ // Components package. diff --git a/packages/block-directory/src/plugins/get-install-missing/install-button.js b/packages/block-directory/src/plugins/get-install-missing/install-button.js index 2dc01184bdeb4..075fed360c14c 100644 --- a/packages/block-directory/src/plugins/get-install-missing/install-button.js +++ b/packages/block-directory/src/plugins/get-install-missing/install-button.js @@ -42,6 +42,7 @@ export default function InstallButton( { attributes, block, clientId } ) { } } ) } + __experimentalIsFocusable disabled={ isInstallingBlock } isBusy={ isInstallingBlock } variant="primary" diff --git a/packages/block-editor/src/components/button-block-appender/index.js b/packages/block-editor/src/components/button-block-appender/index.js index 974f48e61bc28..cd1289c897824 100644 --- a/packages/block-editor/src/components/button-block-appender/index.js +++ b/packages/block-editor/src/components/button-block-appender/index.js @@ -60,6 +60,8 @@ function ButtonBlockAppender( onClick={ onToggle } aria-haspopup={ isToggleButton ? 'true' : undefined } aria-expanded={ isToggleButton ? isOpen : undefined } + // Disable reason: There shouldn't be a case where this button is disabled but not visually hidden. + // eslint-disable-next-line no-restricted-syntax disabled={ disabled } label={ label } > 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 867b69356eb9d..fb4b3658e2a4f 100644 --- a/packages/block-editor/src/components/link-control/link-preview.js +++ b/packages/block-editor/src/components/link-control/link-preview.js @@ -149,6 +149,7 @@ export default function LinkPreview( { isEmptyURL || showIconLabels ? '' : ': ' + value.url ) } ref={ ref } + __experimentalIsFocusable disabled={ isEmptyURL } size="compact" /> diff --git a/packages/block-library/src/gallery/v1/gallery-image.js b/packages/block-library/src/gallery/v1/gallery-image.js index 368d5da55c4ac..5384944b2335d 100644 --- a/packages/block-library/src/gallery/v1/gallery-image.js +++ b/packages/block-library/src/gallery/v1/gallery-image.js @@ -222,6 +222,8 @@ class GalleryImage extends Component { onClick={ isFirstItem ? undefined : onMoveBackward } label={ __( 'Move image backward' ) } aria-disabled={ isFirstItem } + // Disable reason: Truly disable when image is not selected. + // eslint-disable-next-line no-restricted-syntax disabled={ ! isSelected } /> diff --git a/packages/dataviews/src/item-actions.tsx b/packages/dataviews/src/item-actions.tsx index 8a4fcf1b19f8d..90ae74b5f74ea 100644 --- a/packages/dataviews/src/item-actions.tsx +++ b/packages/dataviews/src/item-actions.tsx @@ -254,6 +254,7 @@ function CompactItemActions< Item extends AnyItem >( { size="compact" icon={ moreVertical } label={ __( 'Actions' ) } + __experimentalIsFocusable disabled={ ! actions.length } className="dataviews-all-actions-button" /> diff --git a/packages/dataviews/src/view-list.tsx b/packages/dataviews/src/view-list.tsx index 9468d6aa2d058..0721a9b5d8ffe 100644 --- a/packages/dataviews/src/view-list.tsx +++ b/packages/dataviews/src/view-list.tsx @@ -255,6 +255,7 @@ function ListItem< Item extends AnyItem >( { size="compact" icon={ moreVertical } label={ __( 'Actions' ) } + __experimentalIsFocusable disabled={ ! actions.length } onKeyDown={ ( event: { key: string; 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 e3ba4a1568420..e655a7300c37e 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,6 +42,7 @@ export function CustomFieldsConfirmation( { willEnable } ) { className="edit-post-preferences-modal__custom-fields-confirmation-button" variant="secondary" isBusy={ isReloading } + __experimentalIsFocusable 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 436762d6bcf94..f57cc8c417f41 100644 --- a/packages/edit-site/src/components/global-styles-sidebar/index.js +++ b/packages/edit-site/src/components/global-styles-sidebar/index.js @@ -152,6 +152,7 @@ export default function GlobalStylesSidebar() { isPressed={ isStyleBookOpened || isRevisionsStyleBookOpened } + __experimentalIsFocusable disabled={ shouldClearCanvasContainerView } onClick={ toggleStyleBook } size="compact" @@ -162,6 +163,7 @@ export default function GlobalStylesSidebar() { label={ __( 'Revisions' ) } icon={ backup } onClick={ toggleRevisions } + __experimentalIsFocusable disabled={ ! hasRevisions } isPressed={ isRevisionsOpened || isRevisionsStyleBookOpened 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 9c4280f2b1eb5..7f4f9896344b4 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,6 +163,7 @@ function RevisionsButtons( { >