opensource/dify
2
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-08-15 04:59:46 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(web): scope hidden outlines to focus-visible (#40130)

Browse Source
This commit is contained in:
yyh 2026-08-07 12:00:19 +08:00 committed by GitHub
parent ab0e131e87
commit 7422052759
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
32 changed files with 37 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/dify-ui/src/button/index.tsx
View File

@ -7,7 +7,7 @@ import { cva } from 'class-variance-authority'
import { cn } from '../cn'
const buttonVariants = cva(
'inline-flex cursor-pointer items-center justify-center overflow-hidden whitespace-nowrap outline-hidden focus-visible:ring-2 focus-visible:ring-state-accent-solid data-disabled:cursor-not-allowed',
'inline-flex cursor-pointer items-center justify-center overflow-hidden whitespace-nowrap focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden data-disabled:cursor-not-allowed',
{
variants: {
variant: {

4
packages/dify-ui/src/kbd/index.stories.tsx
View File

@ -172,7 +172,7 @@ export const InTooltip: Story = {
<button
type="button"
aria-label="Collapse sidebar"
className="inline-flex size-8 items-center justify-center rounded-lg border border-divider-subtle bg-components-button-secondary-bg text-text-secondary shadow-xs outline-hidden focus-visible:ring-2 focus-visible:ring-state-accent-solid"
className="inline-flex size-8 items-center justify-center rounded-lg border border-divider-subtle bg-components-button-secondary-bg text-text-secondary shadow-xs focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden"
>
<span aria-hidden className="i-ri-sidebar-fold-line size-4" />
</button>
@ -207,7 +207,7 @@ export const InContextMenu: Story = {
render={
<button
type="button"
className="flex h-28 w-60 items-center justify-center rounded-xl border border-divider-subtle bg-background-default-subtle px-6 text-center system-sm-regular text-text-tertiary outline-hidden focus-visible:ring-2 focus-visible:ring-state-accent-solid"
className="flex h-28 w-60 items-center justify-center rounded-xl border border-divider-subtle bg-background-default-subtle px-6 text-center system-sm-regular text-text-tertiary focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden"
/>
}
>

4
packages/dify-ui/src/popover/index.stories.tsx
View File

@ -174,7 +174,7 @@ export const Infotip: Story = {
render={
<button
type="button"
className="inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-sm outline-hidden focus-visible:ring-2 focus-visible:ring-state-accent-solid"
className="inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-sm focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden"
>
<span
aria-hidden
@ -221,7 +221,7 @@ const PlacementsDemo = () => {
key={value}
type="button"
onClick={() => setPlacement(value)}
className={`rounded-md border border-divider-subtle px-2 py-1 text-text-secondary outline-hidden focus-visible:ring-2 focus-visible:ring-state-accent-solid ${
className={`rounded-md border border-divider-subtle px-2 py-1 text-text-secondary focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden ${
placement === value ? 'bg-state-base-hover' : 'bg-components-button-secondary-bg'
}`}
>

2
packages/dify-ui/src/preview-card/index.stories.tsx
View File

@ -137,7 +137,7 @@ const PlacementsDemo = () => {
key={value}
type="button"
onClick={() => setPlacement(value)}
className={`rounded-md border border-divider-subtle px-2 py-1 text-text-secondary outline-hidden focus-visible:ring-2 focus-visible:ring-state-accent-solid ${
className={`rounded-md border border-divider-subtle px-2 py-1 text-text-secondary focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden ${
placement === value ? 'bg-state-base-hover' : 'bg-components-button-secondary-bg'
}`}
>

2
packages/dify-ui/src/switch/index.stories.tsx
View File

@ -266,7 +266,7 @@ const LoadingDemo = () => {
return (
<div className="flex flex-col items-center space-y-4">
<button
className="rounded-sm border px-2 py-1 text-xs outline-hidden focus-visible:ring-2 focus-visible:ring-state-accent-solid"
className="rounded-sm border px-2 py-1 text-xs focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden"
onClick={() => setLoading(!loading)}
>
{loading ? 'Stop Loading' : 'Start Loading'}

2
packages/dify-ui/src/tooltip/index.stories.tsx
View File

@ -119,7 +119,7 @@ const PlacementsDemo = () => {
key={value}
type="button"
onClick={() => setPlacement(value)}
className={`rounded-md border border-divider-subtle px-2 py-1 text-text-secondary outline-hidden focus-visible:ring-2 focus-visible:ring-state-accent-solid ${
className={`rounded-md border border-divider-subtle px-2 py-1 text-text-secondary focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden ${
placement === value ? 'bg-state-base-hover' : 'bg-components-button-secondary-bg'
}`}
>

2
web/app/components/app/create-from-dsl-modal/uploader.tsx
View File

@ -167,7 +167,7 @@ export function Uploader({
aria-labelledby={fileNameId}
aria-describedby={fileMetadataId}
className={cn(
'group flex items-center rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg shadow-xs outline-hidden focus-visible:ring-2 focus-visible:ring-state-accent-solid',
'group flex items-center rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg shadow-xs focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden',
'hover:bg-components-panel-on-panel-item-bg-hover',
)}
>

2
web/app/components/datasets/settings/permission-selector/index.tsx
View File

@ -245,7 +245,7 @@ const PermissionSelector = ({
<button
type="button"
aria-label={t(($) => $['operation.clear'], { ns: 'common' })}
className="group absolute top-1/2 right-2 -translate-y-1/2 cursor-pointer touch-manipulation border-none bg-transparent p-px outline-hidden focus-visible:ring-2 focus-visible:ring-state-accent-solid"
className="group absolute top-1/2 right-2 -translate-y-1/2 cursor-pointer touch-manipulation border-none bg-transparent p-px focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden"
onClick={() => handleKeywordsChange('')}
>
<span

2
web/app/components/header/account-setting/index.tsx
View File

@ -210,7 +210,7 @@ export default function AccountSetting({
type="button"
key={item.key}
className={cn(
'mb-0.5 flex h-8 w-full items-center rounded-lg px-3 text-left text-sm',
'mb-0.5 flex h-8 w-full items-center rounded-lg px-3 text-left text-sm focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden',
activeMenu === item.key
? 'bg-state-base-active system-sm-semibold text-components-menu-item-text-active'
: 'system-sm-medium text-components-menu-item-text',

4
web/app/components/header/account-setting/model-provider-page/model-selector/marketplace-section.tsx
View File

@ -40,7 +40,7 @@ function MarketplaceSection({
<div className="flex h-5.5 items-center pr-2 pl-4">
<button
type="button"
className="flex flex-1 cursor-pointer items-center border-0 bg-transparent p-0 text-left system-sm-medium text-text-primary outline-hidden focus-visible:ring-2 focus-visible:ring-state-accent-solid"
className="flex flex-1 cursor-pointer items-center border-0 bg-transparent p-0 text-left system-sm-medium text-text-primary focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden"
onClick={() => onMarketplaceCollapsedChange(!marketplaceCollapsed)}
>
{t(($) => $['modelProvider.selector.fromMarketplace'], { ns: 'common' })}
@ -93,7 +93,7 @@ function MarketplaceSection({
{onOpenMarketplace ? (
<button
type="button"
className="flex w-full cursor-pointer items-center gap-0.5 border-0 bg-transparent px-3 py-1.5 text-left outline-hidden focus-visible:ring-2 focus-visible:ring-state-accent-solid"
className="flex w-full cursor-pointer items-center gap-0.5 border-0 bg-transparent px-3 py-1.5 text-left focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden"
onClick={onOpenMarketplace}
>
<span className="flex-1 system-xs-regular text-text-accent">

2
web/app/components/header/account-setting/model-provider-page/model-selector/popup-item.tsx
View File

@ -123,7 +123,7 @@ function PopupItem({
<div className="sticky top-0 z-1 flex h-5.5 min-w-0 items-center justify-between gap-2 bg-components-panel-bg px-3 text-xs font-medium text-text-tertiary">
<button
type="button"
className="flex min-w-0 cursor-pointer items-center border-0 bg-transparent p-0 text-left outline-hidden focus-visible:ring-2 focus-visible:ring-state-accent-solid"
className="flex min-w-0 cursor-pointer items-center border-0 bg-transparent p-0 text-left focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden"
onClick={() => setCollapsed((prev) => !prev)}
>
<span className="truncate">{renderI18nObject(model.label, language)}</span>

2
web/app/components/header/account-setting/model-provider-page/provider-added-card/provider-card-actions.tsx
View File

@ -174,7 +174,7 @@ function SummaryProviderCardActions({ summary, providerLabel, onUpdate }: Summar
{canChangeVersion ? (
<button
type="button"
className="rounded-md border-0 bg-transparent p-0 outline-hidden focus-visible:ring-2 focus-visible:ring-state-accent-solid"
className="rounded-md border-0 bg-transparent p-0 focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden"
aria-label={summary.version}
disabled={loadingAction === 'version'}
onClick={() => loadDetail('version')}

2
web/app/components/header/account-setting/model-provider-page/provider-added-card/quota-panel.tsx
View File

@ -277,7 +277,7 @@ const QuotaPanel: FC<QuotaPanelProps> = ({ providers }) => {
aria-busy={isLoadingPlugin}
aria-disabled={isLoadingPlugin}
className={cn(
'relative size-6 border-0 bg-transparent p-0 outline-hidden focus-visible:ring-2 focus-visible:ring-state-accent-solid',
'relative size-6 border-0 bg-transparent p-0 focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden',
!providerType && canInstallPlugin && 'cursor-pointer hover:opacity-80',
)}
onClick={() => handleIconClick(key)}

6
web/app/components/main-nav/components/help-menu/account-about-dialog.tsx
View File

@ -47,7 +47,7 @@ export default function AccountAboutDialog({
href="https://github.com/langgenius/dify/blob/main/LICENSE"
target="_blank"
rel="noopener noreferrer"
className="rounded-sm outline-hidden focus-visible:ring-2 focus-visible:ring-state-accent-solid"
className="rounded-sm focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden"
>
Open Source License
</Link>
@ -58,7 +58,7 @@ export default function AccountAboutDialog({
href="https://dify.ai/privacy"
target="_blank"
rel="noopener noreferrer"
className="rounded-sm outline-hidden focus-visible:ring-2 focus-visible:ring-state-accent-solid"
className="rounded-sm focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden"
>
Privacy Policy
</Link>
@ -67,7 +67,7 @@ export default function AccountAboutDialog({
href="https://dify.ai/terms"
target="_blank"
rel="noopener noreferrer"
className="rounded-sm outline-hidden focus-visible:ring-2 focus-visible:ring-state-accent-solid"
className="rounded-sm focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden"
>
Terms of Service
</Link>

2
web/app/components/plugins/plugin-page/debug-info.tsx
View File

@ -73,7 +73,7 @@ function DebugInfo({
)}
target="_blank"
rel="noopener noreferrer"
className="flex cursor-pointer items-center gap-1 rounded-xs system-xs-regular text-text-accent outline-hidden focus-visible:ring-2 focus-visible:ring-state-accent-solid"
className="flex cursor-pointer items-center gap-1 rounded-xs system-xs-regular text-text-accent focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden"
>
<span>{t(($) => $[`${i18nPrefix}.viewDocs`], { ns: 'plugin' })}</span>
<span aria-hidden className="i-ri-arrow-right-up-line size-3" />

2
web/app/components/tools/mcp/provider-card.tsx
View File

@ -45,7 +45,7 @@ const MCPCard = ({ currentProvider, data, onEdit, onDelete, handleSelect }: Prop
aria-haspopup="dialog"
aria-expanded={currentProvider?.id === data.id}
onClick={handleSelectProvider}
className="flex w-full cursor-pointer flex-col rounded-xl text-left outline-hidden focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:ring-inset"
className="flex w-full cursor-pointer flex-col rounded-xl text-left focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden focus-visible:ring-inset"
>
<div className="flex shrink-0 items-center gap-3 rounded-t-xl p-4">
<div className="shrink-0 overflow-hidden rounded-lg border-[0.5px] border-effects-icon-border">

2
web/app/components/workflow/run/retry-log/retry-result-panel.tsx
View File

@ -17,7 +17,7 @@ function RetryResultPanel({ list, onBack }: Props) {
<div>
<button
type="button"
className="flex h-8 w-full cursor-pointer items-center bg-components-panel-bg px-4 system-sm-medium text-text-accent-secondary outline-hidden focus-visible:ring-2 focus-visible:ring-state-accent-solid"
className="flex h-8 w-full cursor-pointer items-center bg-components-panel-bg px-4 system-sm-medium text-text-accent-secondary focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden"
onClick={(e) => {
e.stopPropagation()
e.nativeEvent.stopImmediatePropagation()

2
web/app/education-apply/verify-state-modal.tsx
View File

@ -76,7 +76,7 @@ function Confirm({
href={eduDocLink}
target="_blank"
rel="noopener noreferrer"
className="inline-flex cursor-pointer items-center gap-1 system-xs-regular text-text-accent outline-hidden focus-visible:ring-2 focus-visible:ring-state-accent-solid"
className="inline-flex cursor-pointer items-center gap-1 system-xs-regular text-text-accent focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden"
>
{t(($) => $.learn, { ns: 'education' })}
<span className="i-ri-external-link-line size-3 text-text-accent"></span>

2
web/features/agent-v2/agent-detail/configure/components/community-edition-tip.tsx
View File

@ -39,7 +39,7 @@ export function CommunityEditionTip({
render={
<button
type="button"
className="inline-flex size-4 shrink-0 items-center justify-center rounded-sm outline-hidden focus-visible:ring-2 focus-visible:ring-state-accent-solid"
className="inline-flex size-4 shrink-0 items-center justify-center rounded-sm focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden"
>
<span
aria-hidden

2
web/features/agent-v2/agent-detail/configure/components/orchestrate/common/missing-reference-warning.tsx
View File

@ -18,7 +18,7 @@ export function MissingReferenceWarning({
type="button"
aria-label={label}
className={cn(
'flex size-5 shrink-0 items-center justify-center rounded-md outline-hidden focus-visible:ring-2 focus-visible:ring-state-accent-solid',
'flex size-5 shrink-0 items-center justify-center rounded-md focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden',
className,
)}
>

2
web/features/agent-v2/agent-detail/configure/components/orchestrate/skills/upload-dialog.tsx
View File

@ -221,7 +221,7 @@ function AgentSkillPackageUploader({
href="https://agentskills.io/specification"
target="_blank"
rel="noopener noreferrer"
className="rounded-sm underline outline-hidden focus-visible:ring-2 focus-visible:ring-state-accent-solid"
className="rounded-sm underline focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden"
/>
),
}}

2
web/features/agent-v2/agent-detail/configure/components/preview/header.tsx
View File

@ -46,7 +46,7 @@ function ModeInfoTip({ children, ariaLabel }: { children: ReactNode; ariaLabel:
closeDelay={200}
aria-label={ariaLabel}
onClick={handleClick}
className="inline-flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent p-0 outline-hidden focus-visible:ring-2 focus-visible:ring-state-accent-solid"
className="inline-flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent p-0 focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden"
>
<span
aria-hidden

2
web/features/agent-v2/roster/components/agent-form-fields.tsx
View File

@ -36,7 +36,7 @@ export function AgentFormFields({
<button
type="button"
aria-label={iconAriaLabel}
className="shrink-0 rounded-full outline-hidden focus-visible:ring-2 focus-visible:ring-state-accent-solid"
className="shrink-0 rounded-full focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden"
onClick={onIconClick}
>
<AppIcon

2
web/features/agent-v2/roster/components/duplicate-agent-dialog.tsx
View File

@ -155,7 +155,7 @@ export function DuplicateAgentDialog({
aria-label={t(($) => $['roster.duplicateForm.changeIcon'], {
name: latestAgent.name,
})}
className="shrink-0 rounded-full outline-hidden focus-visible:ring-2 focus-visible:ring-state-accent-solid"
className="shrink-0 rounded-full focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden"
onClick={() => setIconPickerOpen(true)}
>
<AppIcon

2
web/features/deployments/detail/api-tokens/api-keys/api-key-list.tsx
View File

@ -97,7 +97,7 @@ function RevokeApiKeyButton({ apiKey }: { apiKey: ApiKey }) {
aria-busy={isRevoking}
disabled={isRevoking}
className={cn(
'inline-flex size-8 shrink-0 items-center justify-center rounded-md text-text-tertiary outline-hidden focus-visible:ring-2 focus-visible:ring-state-accent-solid',
'inline-flex size-8 shrink-0 items-center justify-center rounded-md text-text-tertiary focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden',
isRevoking
? 'cursor-not-allowed opacity-60'
: 'hover:bg-state-destructive-hover hover:text-text-destructive',

2
web/features/deployments/list/ui/instance-card.tsx
View File

@ -56,7 +56,7 @@ export function InstanceCard({ summary }: { summary: AppInstanceSummary }) {
<div className="flex min-h-0 flex-1 flex-col">
<Link
href={detailHref}
className="block min-w-0 rounded-t-xl px-4 pt-4 outline-hidden focus-visible:ring-2 focus-visible:ring-state-accent-solid"
className="block min-w-0 rounded-t-xl px-4 pt-4 focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden"
>
<h3 className="truncate title-md-semi-bold text-text-primary">{appName}</h3>
{description ? (

2
web/features/new-rag/components/knowledge-view-switcher.tsx
View File

@ -90,7 +90,7 @@ export function KnowledgeViewSwitcher({ value, onChange }: KnowledgeViewSwitcher
href="https://docs.dify.ai/en/guides/knowledge-base"
target="_blank"
rel="noreferrer"
className="rounded-sm system-xs-regular text-text-accent outline-hidden focus-visible:ring-2 focus-visible:ring-state-accent-solid"
className="rounded-sm system-xs-regular text-text-accent focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden"
>
{t(($) => $['newKnowledge.learnMore'])}
</a>

2
web/features/new-rag/document-detail-header.tsx
View File

@ -81,7 +81,7 @@ export function DocumentDetailHeader({
<div className="min-w-0">
<h1
ref={titleRef}
className="truncate title-2xl-semi-bold text-text-primary outline-hidden focus-visible:ring-2 focus-visible:ring-state-accent-solid"
className="truncate title-2xl-semi-bold text-text-primary focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden"
tabIndex={-1}
>
{document.title}

2
web/features/new-rag/document-list.tsx
View File

@ -468,7 +468,7 @@ export function DocumentsList({
ref={resultsContainerRef}
aria-labelledby="new-knowledge-documents-title"
aria-busy={completingResults || isFetchingNextPage || sourcesPending || tasksPending}
className="mt-4 overflow-x-auto rounded-lg outline-hidden focus-visible:ring-2 focus-visible:ring-state-accent-solid"
className="mt-4 overflow-x-auto rounded-lg focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden"
role="region"
tabIndex={-1}
>

2
web/features/new-rag/sources-page.tsx
View File

@ -654,7 +654,7 @@ export function SourcesPage({ knowledgeSpaceId }: { knowledgeSpaceId: string })
onClick={() =>
setSort((current) => (current === 'name-asc' ? 'name-desc' : 'name-asc'))
}
className="inline-flex items-center gap-1 rounded outline-hidden focus-visible:ring-2 focus-visible:ring-state-accent-solid"
className="inline-flex items-center gap-1 rounded focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden"
>
{t(($) => $['newKnowledge.sourceColumn'])}
<span

2
web/features/new-rag/website-crawl-preview.tsx
View File

@ -1096,7 +1096,7 @@ export function WebsiteCrawlPreview({
<button
type="button"
aria-expanded={optionsExpanded}
className="flex h-9 w-full items-center gap-2 px-3 text-left outline-hidden focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:ring-inset"
className="flex h-9 w-full items-center gap-2 px-3 text-left focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden focus-visible:ring-inset"
onClick={() => setOptionsExpanded((expanded) => !expanded)}
>
<span

2
web/features/tag-management/components/tag-filter.tsx
View File

@ -118,7 +118,7 @@ export const TagFilter = ({
<button
type="button"
aria-label={t(($) => $['operation.clear'], { ns: 'common' })}
className="group/clear absolute top-1/2 right-2 -translate-y-1/2 rounded-md border-none bg-transparent p-px outline-hidden focus-visible:ring-2 focus-visible:ring-state-accent-solid"
className="group/clear absolute top-1/2 right-2 -translate-y-1/2 rounded-md border-none bg-transparent p-px focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden"
onClick={(event) => {
event.stopPropagation()
onChange([])