artisanpack-ui/accessibility 问题修复 & 功能扩展

解决BUG、新增功能、兼容多环境部署,快速响应你的开发需求

邮箱:yvsm@zunyunkeji.com | QQ:316430983 | 微信:yvsm316

artisanpack-ui/accessibility

Composer 安装命令:

composer require artisanpack-ui/accessibility

包简介

A package for all accessibility functions for ArtisanPack UI.

README 文档

README

A PHP package for ensuring web applications meet accessibility standards, particularly for color contrast.

Features

  • Color Contrast Checking: Determine if text colors have sufficient contrast against background colors
  • Accessible Text Color Generation: Generate accessible text colors based on background colors
  • Color Format Support: Support for hex, Tailwind CSS, rgb(), and hsl() color formats.
  • User Accessibility Settings: Manage user preferences for accessibility features
  • Laravel Integration: Seamless integration with Laravel applications

Installation

You can install the package via Composer:

composer require artisanpack-ui/accessibility

For detailed installation instructions, including Laravel integration, see the Getting Started Guide.

Usage

Here is a practical, real-world example of how to use the package to create an accessible button component in Laravel.

Creating an Accessible Button Component

1. Create a new Blade component:

php artisan make:component Button

2. Modify the component class:

In app/View/Components/Button.php, we'll accept a background color and automatically determine the correct text color.

// app/View/Components/Button.php

namespace App\View\Components;

use Illuminate\View\Component;

class Button extends Component
{
    public string $bgColor;
    public string $textColor;

    public function __construct(string $bgColor = '#3b82f6')
    {
        $this->bgColor = $bgColor;
        $this->textColor = a11yGetContrastColor($this->bgColor);
    }

    public function render()
    {
        return view('components.button');
    }
}

3. Update the component view:

In resources/views/components/button.blade.php, we'll apply the colors as inline styles.

// resources/views/components/button.blade.php

@props(['bgColor', 'textColor'])

<button {{ $attributes->merge(['class' => 'px-4 py-2 rounded']) }} style="background-color: {{ $bgColor }}; color: {{ $textColor }};">
    {{ $slot }}
</button>

4. Use the component in your views:

Now you can easily create accessible buttons with any background color.

<x-button>Click Me</x-button>

<x-button bg-color="#dc2626">Delete</x-button>

<x-button bg-color="rgb(16, 185, 129)">Success</x-button>

For more detailed examples, including Livewire components and dynamic theming, see the Real-World Examples documentation.

AI features

When artisanpack-ui/ai v1.0+ is installed alongside this package, three AI-powered accessibility agents become available. Each is toggle-able through the shared FeatureRegistry and no-ops when the toggle is off.

Feature key Agent Purpose
a11y.content_analysis ContentAccessibilityAgent Finds content-level issues (ambiguous link text, vague headings, undefined jargon) that static rules miss.
a11y.aria_suggestion AriaSuggestionAgent Suggests ARIA roles, states, and properties for custom components from their markup and behavior.
a11y.contrast_explanation ColorContrastExplanationAgent Explains contrast failures in plain language and proposes alternatives that preserve brand intent.

Trigger surfaces ship in-package for all three frontends so extending framework support does not require any changes to @artisanpack-ui/react or @artisanpack-ui/vue:

  • Livewire<livewire:a11y-ai-content-analysis />, <livewire:a11y-ai-aria-suggestion />, <livewire:a11y-ai-contrast-explanation />.
  • React — TypeScript/TSX components at resources/js/react/ (barrel exports through resources/js/react/index.ts). Copy into your app's asset pipeline or wire directly through your Vite/Webpack config.
  • Vue — the same three components as Vue 3 SFCs at resources/js/vue/.

The React and Vue components POST to /api/v1/a11y/ai/{content-analysis,aria-suggestion,contrast-explanation} by default; pass an endpoint prop to override.

The shipped endpoints sit behind auth:sanctum and throttle:api, so a stateful SPA needs Laravel Sanctum's SPA setup: SANCTUM_STATEFUL_DOMAINS configured for the frontend origin, a prior GET to /sanctum/csrf-cookie to seed the XSRF-TOKEN cookie, and same-origin requests. The bundled React and Vue triggers automatically read that cookie and send X-XSRF-TOKEN + X-Requested-With: XMLHttpRequest, so no per-caller header wiring is needed once the SPA is authenticated.

Documentation

For complete documentation, please visit the links below.

Requirements

  • PHP 8.3 or higher
  • Laravel 12 or 13 (for Laravel integration)

The PHP floor moved to 8.3 in 2.2.0 to match the artisanpack-ui/ai foundation dependency. Laravel 11 support was dropped in the same release. Users staying on PHP 8.2 or Laravel 11 should pin to ^2.1.2.

Contributing

As an open source project, this package is open to contributions from anyone. Please read through the contributing guidelines to learn more about how you can contribute to this project.

License

This package is open-sourced software licensed under the GPL-3.0-or-later license.

artisanpack-ui/accessibility 适用场景与选型建议

artisanpack-ui/accessibility 是一款 基于 PHP 开发的 Composer 扩展包,目前已累计 1.94k 次下载、GitHub Stars 达 0, 最近一次更新时间为 2025 年 05 月 14 日, 在 PHP 生态内属于活跃度较高的组件。

我们在过去多个企业项目中使用过 artisanpack-ui/accessibility 或与其功能相近的方案,如果你在选型或落地过程中遇到问题,例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查,欢迎联系我们协助评估。

围绕 artisanpack-ui/accessibility 我们能提供哪些服务?
定制开发 / 二次开发

基于 artisanpack-ui/accessibility 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复;针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维;也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ:316430983 微信:yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发

统计信息

  • 总下载量: 1.94k
  • 月度下载量: 0
  • 日度下载量: 0
  • 收藏数: 0
  • 点击次数: 9
  • 依赖项目数: 7
  • 推荐数: 0

GitHub 信息

  • Stars: 0
  • Watchers: 0
  • Forks: 0
  • 开发语言: PHP

其他信息

  • 授权协议: MIT
  • 更新时间: 2025-05-14