أزرار التبديل - ما هي وكيف تجعلها قابلة للوصول على الويب

العلامة HTML:

نبدأ بـ HTML، سنستخدم مدخل checkbox، الذي يحتوي على بعض ميزات الوصول المدمجة فيه. لذا لا حاجة لاستخدام JavaScript لإدارة الضغط أو الحالة.

نحتاج أيضًا إلى إضافة السمة role="switch" لتكون التكنولوجيا المساعدة على علم أن هذا هو مكون التبديل وليس checkbox. سيكون الكود كما يلي:

<label>
	إظهار الترجمة
	<input type="checkbox" role="switch" />
</label>

لقد أضفت أيضًا label لوصف وظيفة الزر.

مع ذلك، نكون قد انتهينا من HTML وننتقل إلى التنسيق.

CSS:

في CSS، نحتاج إلى تنسيق شيئين:

• تنسيق الـ checkbox ليكون المسار.
• تنسيق العنصر الزائف (::before أو ::after) ليكون الزر.

أولاً، دعنا نستهدف الـ checkbox باستخدام السمة role باستخدام محدد السمة، وهذا سيضمن وجود هذه السمة حيث إنها مهمة جدًا، ولن تعمل الأنماط إن لم تكن حاضرة.

[role="switch"] {
	/* ستذهب الأنماط للمسار هنا */
}
[role="switch"]::before {
	content: "";
	/* ستذهب الأنماط للزر هنا */
}

لتنسيق الـ checkbox كما نريد، يجب أولاً ضبط خاصية appearance إلى none، وهذا سيزيل التنسيق الافتراضي ويمنحنا الحرية لتنسيقه كما نريد.

إليك الأنماط الخاصة بمسار الزر:

[role="switch"] {
  --padd: 0.05em;
  --track-width: 1em;

  font-size: 11rem;
  box-sizing: content-box;
  appearance: none;
  display: inline-grid;
  background-color: #607d8b;
  width: var(--track-width);
  height: calc(var(--track-width) / 2 ); 
  border-radius: 9999px; /* الشكل على شكل عمود */
  padding: var(--padd);

  cursor: pointer;
  transition: background-color 300ms;
}

لوضع الزر داخل switch، يمكننا استخدام خاصية position، ومع ذلك في هذه الحالة، اخترت استخدام عرض الشبكة (grid) الذي سيضع العنصر الزائف داخل المدخل.

الآن دعنا ننسق العنصر الزائف ::before ليكون الزر بهذا الشكل:

[role="switch"]::before {
    content: "";
    /* جعله دائريًا */
    width: calc(var(--track-width) / 2);
    height: calc(var(--track-width) / 2);
    border-radius: 50%;

    background-color: #eceff1; /* لون الزر */
    box-shadow: 0 0 0.62em #444a;

    transition: transform 300ms, box-shadow 150ms ease-in-out;
}

تنسيق الحالات المختلفة: الآن أصبح التبديل يبدو جيدًا، ولكن لا يمكننا معرفة ما إذا كان في حالة تشغيل أو إيقاف، لإصلاح ذلك سننسق التبديل استنادًا إلى الكلاس الزائف :checked:

[role="switch"]:checked {
    background-color: #00bfa5;
}
[role="switch"]:checked::before {
     /* وضع الزر على الجانب الآخر عندما يكون في حالة التحديد */
      transform: translateX(calc(100% - var(--padd) * 2));
}

لحالات hover و focus، سأعرض حلقة حول الزر باستخدام خاصية box-shadow كما يلي:

[role="switch"]:hover::before,
[role="switch"]:focus-visible::before {
    box-shadow: 0 0 0 0.1em #cfd8dc90;
}

أخيرًا، دعنا نتحقق مما إذا كان المدخل معطلًا وننسقه وفقًا لذلك.

في HTML، يمكننا تعطيل الـ checkbox عن طريق إضافة السمة disabled هكذا:

<input type="checkbox" role="switch" disabled />

وننسقه استنادًا إلى الكلاس الزائف :disabled للإشارة إلى أن هذا العنصر غير تفاعلي:

[role="switch"]:disabled {
    cursor: not-allowed;
    background-color: #cfd8dc;
}
[role="switch"]:disabled::before {
    background-color: #90a4ae;
    box-shadow: none;
}